/* ============================================================
   VaultEdge — Custom Override CSS
   Completely new visual identity: dark navy + gold accent
   Fonts: Nunito (headings) + DM Sans (body)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap");

/* ---- CSS VARIABLES ---- */
:root {
    --ve-dark: #17212b;
    --ve-dark2: #123F63;
    --ve-navy: #155A86;
    --ve-gold: #1C79C8;
    --ve-gold2: #1C79C8;
    --ve-light: #f4f7fb;
    --ve-white: #ffffff;
    --ve-text: #4a5568;
    --ve-border: #e2e8f0;
    --ve-radius: 12px;
    --ve-shadow: 0 8px 30px rgba(13, 27, 42, 0.10);
    --ve-trans: all 0.3s ease;
}

/* ---- RESET BODY FONTS ---- */
body {
    font-family: 'DM Sans', sans-serif;
    color: var(--ve-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Nunito', sans-serif;
    color: var(--ve-dark);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.ve-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--ve-dark);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    transition: var(--ve-trans);
}

.ve-header.scrolled {
    background: rgba(13, 27, 42, 0.97);
    backdrop-filter: blur(10px);
}

.ve-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 90px;
}

/* Logo */
.ve-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ve-logo-icon {
    width: 38px;
    height: 38px;
    background: var(--ve-gold);
    color: var(--ve-dark);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 20px;
}

.ve-logo-text {
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    color: #fff;
    font-weight: 600;
}

.ve-logo-text strong {
    color: var(--ve-gold);
    font-weight: 900;
}

/* Nav links */
.ve-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
}

.ve-nav ul li {
    position: relative;
}

.ve-nav ul li a {
    display: block;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--ve-trans);
}

.ve-nav ul li a:hover,
.ve-nav ul li a.active {
    color: #fff;
    background: rgba(212, 160, 23, 0.15);
}

.ve-nav ul li a.active {
    color: var(--ve-gold);
}

/* Dropdown */
.ve-nav .has-drop:hover .ve-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ve-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--ve-dark2);
    border-radius: 10px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--ve-trans);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ve-dropdown li a {
    padding: 10px 20px;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.ve-dropdown li a:hover {
    color: #fff;
    background: rgba(212, 160, 23, 0.12);
}

/* CTA button */
.ve-nav-cta .ve-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ve-gold);
    color: var(--ve-dark);
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-cta-btn:hover {
    background: var(--ve-gold2);
    transform: translateY(-1px);
}

/* Mobile toggle */
.ve-toggler {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.ve-toggler span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--ve-trans);
}

/* Mobile menu */
.ve-mobile-menu {
    display: none;
    background: var(--ve-dark2);
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ve-mobile-menu.open {
    display: block;
}

.ve-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ve-mobile-menu ul li a {
    display: block;
    padding: 12px 8px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================
   HERO
   ============================================================ */
.ve-hero {
    display: flex;
    min-height: 100vh;
    padding-top: 72px;
    background: var(--ve-dark);
    overflow: hidden;
}

.ve-hero-left {
    flex: 0 0 55%;
    padding: 80px 60px 80px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.ve-hero-badge {
    display: inline-block;
    background: rgb(238, 247, 255);
    color: var(--ve-gold);
    border: 1px solid rgba(28, 121, 200, 0.25);
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 28px;
    letter-spacing: 0.5px;
}

.ve-hero-left h1 {
    font-size: 62px;
    line-height: 1.1;
    color: #fff;
    font-weight: 900;
    margin-bottom: 22px;
}

.ve-hero-left h1 .ve-highlight {
    color: var(--ve-gold);
}

.ve-hero-left p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 480px;
}

/* Hero buttons */
.ve-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.ve-btn-primary {
    display: inline-block;
    background: var(--ve-gold);
    color: #fff;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-btn-primary:hover {
    background: #155F9F;
    transform: translateY(-2px);
    color: #fff;
}

.ve-btn-ghost {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-btn-ghost:hover {
    border-color: var(--ve-gold);
    color: var(--ve-gold);
    background: rgba(212, 160, 23, 0.08);
}

/* Hero stats */
.ve-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ve-stat strong {
    display: block;
    font-size: 28px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
}

.ve-stat span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ve-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
}

/* Hero right */
.ve-hero-right {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
}

.ve-hero-img-main {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.ve-hero-img-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--ve-dark) 0%, transparent 40%);
}

.ve-hero-img-accent {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 200px;
    height: 140px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--ve-gold);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.ve-float-card {
    position: absolute;
    top: 60px;
    right: 60px;
    z-index: 4;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
}

.ve-float-card i {
    font-size: 28px;
    color: var(--ve-gold);
}

.ve-float-card strong {
    display: block;
    font-size: 22px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: var(--ve-dark);
}

.ve-float-card span {
    font-size: 12px;
    color: var(--ve-text);
}


/* ============================================================
   SECTION SHARED
   ============================================================ */
.ve-section {
    padding: 50px 0;
}

.ve-section-header {
    margin-bottom: 60px;
}

.ve-section-tag {
    display: inline-block;
    background: rgb(238, 247, 255);
    color: var(--ve-gold);
    border: 1px solid rgba(28, 121, 200, 0.25);
    border-radius: 50px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}

.ve-section-header h2 {
    font-size: 42px;
    font-weight: 900;
    color: #17212b;
    margin-bottom: 14px;
    line-height: 1.2;
}

.ve-section-header h2 span {
    color: var(--ve-gold);
}

.ve-section-header p {
    font-size: 16px;
    color: var(--ve-text);
    max-width: 580px;
    margin: 0 auto;
}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.ve-services-section {
    background: var(--ve-light);
}

.ve-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.ve-service-card {
    background: #fff;
    border-radius: var(--ve-radius);
    padding: 36px 30px;
    transition: var(--ve-trans);
    border: 1px solid var(--ve-border);
    position: relative;
    overflow: hidden;
}

.ve-service-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ve-gold), var(--ve-gold2));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--ve-trans);
}

.ve-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ve-shadow);
}

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

.ve-service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg,
            #0F4C81 0%,
            #1C79C8 55%,
            #1C79C8 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    font-size: 26px;
    color: #fff;
}

.ve-service-card h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 10px;
}

.ve-service-card p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--ve-text);
}

.ve-card-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--ve-gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--ve-trans);
}

.ve-card-link:hover {
    gap: 10px;
    color: var(--ve-dark);
}

/* ============================================================
   WHY US
   ============================================================ */
.ve-whyus-section {
    background: #fff;
}

.ve-whyus-img-wrap {
    position: relative;
    padding-bottom: 40px;
    padding-right: 40px;
}

.ve-whyus-img-main {
    height: 480px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

.ve-whyus-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--ve-gold);
    border-radius: 14px;
    padding: 22px 28px;
    text-align: center;
    min-width: 160px;
}

.ve-whyus-badge strong {
    display: block;
    font-size: 40px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: var(--ve-dark);
}

.ve-whyus-badge span {
    font-size: 12px;
    font-weight: 600;
    color: var(--ve-dark);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.ve-whyus-content {
    padding-left: 40px;
}

.ve-whyus-content h2 {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 16px;
}

.ve-whyus-content h2 span {
    color: var(--ve-gold);
}

.ve-whyus-content>p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.ve-checklist {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ve-check-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ve-check-item>i {
    font-size: 22px;
    color: var(--ve-gold);
    margin-top: 2px;
    flex-shrink: 0;
}

.ve-check-item strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 4px;
}

.ve-check-item p {
    font-size: 14px;
    color: var(--ve-text);
    margin: 0;
    line-height: 1.6;
}

.mt-30 {
    margin-top: 30px;
}

/* ============================================================
   COUNTERS
   ============================================================ */
.ve-counter-section {
    background: linear-gradient(135deg, var(--ve-dark) 0%, var(--ve-navy) 100%);
    padding: 70px 0;
}

.ve-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.ve-counter-item {
    text-align: center;
    padding: 30px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.ve-counter-item:last-child {
    border-right: none;
}

.ve-counter-item i {
    font-size: 36px;
    color: var(--ve-gold);
    margin-bottom: 14px;
    display: block;
}

.ve-counter-item strong {
    font-size: 46px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.ve-counter-item span {
    font-size: 24px;
    color: var(--ve-gold);
    font-weight: 700;
}

.ve-counter-item p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.ve-testimonials-section {
    background: var(--ve-light);
}

.ve-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.ve-testi-card {
    background: #fff;
    border-radius: var(--ve-radius);
    padding: 32px 28px;
    box-shadow: var(--ve-shadow);
    border: 1px solid var(--ve-border);
    transition: var(--ve-trans);
}

.ve-testi-card:hover {
    transform: translateY(-4px);
}

.ve-testi-stars {
    font-size: 18px;
    color: var(--ve-gold);
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.ve-testi-card>p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ve-text);
    margin-bottom: 24px;
    font-style: italic;
}

.ve-testi-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ve-testi-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.ve-testi-author strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--ve-dark);
}

.ve-testi-author span {
    font-size: 13px;
    color: var(--ve-text);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.ve-cta-banner {
    position: relative;
    padding: 90px 0;
    background-size: cover;
    background-position: center;
}

.ve-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 27, 42, 0.92) 60%, rgba(13, 27, 42, 0.6));
}

.ve-cta-content {
    position: relative;
    z-index: 2;
}

.ve-cta-content h2 {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 14px;
}

.ve-cta-content h2 span {
    color: var(--ve-gold);
}

.ve-cta-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.ve-btn-white {
    display: inline-block;
    background: #fff;
    color: var(--ve-dark);
    padding: 16px 34px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-btn-white:hover {
    background: var(--ve-gold);
    color: #fff;
    transform: translateY(-2px);
}

.text-lg-right {
    text-align: right;
}

/* ============================================================
   INSIGHTS
   ============================================================ */
.ve-insights-section {
    background: #fff;
}

.ve-insight-card {
    border-radius: var(--ve-radius);
    overflow: hidden;
    border: 1px solid var(--ve-border);
    transition: var(--ve-trans);
    background: #fff;
}

.ve-insight-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ve-shadow);
}

.ve-insight-img {
    height: 220px;
    background-size: cover;
    background-position: center;
}

.ve-insight-body {
    padding: 26px;
}

.ve-insight-cat {
    display: inline-block;
    background: rgb(238, 247, 255);
    color: var(--ve-gold);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    padding: 4px 10px;
    margin-bottom: 12px;
}

.ve-insight-body h5 a {
    font-size: 17px;
    font-weight: 800;
    color: var(--ve-dark);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    margin-bottom: 10px;
}

.ve-insight-body h5 a:hover {
    color: var(--ve-gold);
}

.ve-insight-body>p {
    font-size: 14px;
    color: var(--ve-text);
    line-height: 1.7;
    margin-bottom: 16px;
}

.ve-insight-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ve-insight-meta span {
    font-size: 13px;
    color: #aaa;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ve-insight-meta a {
    font-size: 13px;
    font-weight: 700;
    color: var(--ve-gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--ve-trans);
}

.ve-insight-meta a:hover {
    gap: 10px;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.ve-newsletter-section {
    background: linear-gradient(135deg, var(--ve-dark) 0%, var(--ve-navy) 100%);
    padding: 60px 0;
}

.ve-newsletter-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.ve-nl-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ve-nl-left i {
    font-size: 42px;
    color: var(--ve-gold);
    flex-shrink: 0;
}

.ve-nl-left h3 {
    font-size: 22px;
    color: #fff;
    font-weight: 900;
    margin-bottom: 4px;
}

.ve-nl-left p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.ve-nl-form {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #1C79C8;
}

.ve-nl-form input {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    padding: 14px 20px;
    color: #fff;
    font-size: 14px;
    width: 300px;
    outline: none;
}

.ve-nl-form input::placeholder {
    color: #fff;
}

.ve-nl-form button {
    background: var(--ve-gold);
    color: #fff;
    border: none;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: var(--ve-trans);
}

.ve-nl-form button:hover {
    background: var(--ve-gold2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.ve-footer {
    background: linear-gradient(110deg, #FFFFFF 0%, #F7FBFE 50%, #EDF6FC 100%);
    padding: 80px 0 0;
}

.mb-50 {
    margin-bottom: 50px;
}

.ve-footer-brand p {
    font-size: 15px;
    color: #333;
    font-weight: 400;
    margin: 18px 0 24px;
}

.ve-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 14px;
}

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

.ve-social a {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #1C79C8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: var(--ve-trans);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ve-social a:hover {
    background: #155F9F;
    color: #fff;
    border-color: var(--ve-gold);
}

.ve-footer-title {
    font-size: 15px;
    font-weight: 800;
    color: #1C79C8;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ve-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ve-footer-links li {
    margin-bottom: 10px;
}

.ve-footer-links li a {
    font-size: 15px;
    color: #333;
    font-weight: 400;
    transition: var(--ve-trans);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ve-footer-links li a::before {
    content: '›';
    color: var(--ve-gold);
    font-size: 16px;
}

.ve-footer-links li a:hover {
    color: var(--ve-gold);
    padding-left: 4px;
}

.ve-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ve-footer-contact li {
    font-size: 15px;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}

.ve-footer-contact li i {
    color: var(--ve-gold);
    margin-top: 2px;
    flex-shrink: 0;
}

.ve-footer-bottom {
    background: #F7FBFE;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 20px;
    padding: 22px 0;
}

.ve-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.ve-footer-bottom-inner p {
    font-size: 13px;
    color: #333;
    margin: 0;
}

.ve-footer-bottom-inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.ve-footer-bottom-inner ul li a {
    font-size: 13px;
    color: #333;
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-footer-bottom-inner ul li a:hover {
    color: var(--ve-gold);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1199px) {
    .ve-hero-left {
        padding: 70px 40px;
    }

    .ve-hero-left h1 {
        font-size: 50px;
    }

    .ve-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ve-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ve-testi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:991px) {
    .ve-hero {
        flex-direction: column;
        min-height: auto;
    }

    .ve-hero-left {
        flex: none;
        padding: 100px 30px 60px;
    }

    .ve-hero-right {
        flex: none;
        height: 350px;
    }

    .ve-nav,
    .ve-nav-cta {
        display: none;
    }

    .ve-toggler {
        display: flex;
    }

    .ve-whyus-content {
        padding-left: 0;
        margin-top: 40px;
    }

    .ve-newsletter-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .ve-nl-form {
        width: 100%;
    }

    .ve-nl-form input {
        flex: 1;
        width: auto;
    }
}

@media (max-width:767px) {
    .ve-hero-left h1 {
        font-size: 38px;
    }

    .ve-services-grid,
    .ve-testi-grid,
    .ve-counter-grid {
        grid-template-columns: 1fr;
    }

    .ve-hero-stats {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ve-nav-wrap {
        padding: 0 20px;
    }

    .ve-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .ve-cta-content h2 {
        font-size: 28px;
    }

    .text-lg-right {
        text-align: left;
        margin-top: 20px;
    }

    .ve-counter-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .ve-counter-item:last-child {
        border-bottom: none;
    }
}

/* ============================================================
   HIDE OLD HEADER (replaced by ve-header)
   ============================================================ */
.header-area {
    display: none !important;
}

/* Ensure body offset for fixed navbar */
body {
    padding-top: 0;
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.ve-page-hero {
    position: relative;
    padding: 160px 0 90px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.ve-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 27, 42, 0.92) 0%, rgba(13, 27, 42, 0.6) 100%);
}

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

.ve-page-hero-content h1 {
    font-size: 50px;
    font-weight: 900;
    color: #fff;
    margin: 12px 0 20px;
    line-height: 1.15;
}

.ve-page-hero-content h1 span {
    color: var(--ve-gold);
}

.ve-breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.ve-breadcrumb li {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

.ve-breadcrumb li::after {
    content: '/';
    margin-left: 10px;
}

.ve-breadcrumb li:last-child::after {
    display: none;
}

.ve-breadcrumb li a {
    color: var(--ve-gold);
    text-decoration: none;
}

.ve-breadcrumb li.active {
    color: rgba(255, 255, 255, 0.8);
}

.ve-post-meta-hero {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ve-post-meta-hero span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.ve-about-img-stack {
    position: relative;
    padding-bottom: 60px;
    padding-right: 60px;
}

.ve-about-img-1 {
    height: 420px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

.ve-about-img-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 220px;
    height: 180px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    border: 4px solid var(--ve-gold);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.ve-about-ribbon {
    position: absolute;
    top: 30px;
    left: -20px;
    background: var(--ve-gold);
    border-radius: 12px;
    padding: 20px 24px;
    text-align: center;
}

.ve-about-ribbon strong {
    display: block;
    font-size: 36px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: var(--ve-dark);
}

.ve-about-ribbon span {
    font-size: 11px;
    font-weight: 700;
    color: var(--ve-dark);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.ve-about-text {
    padding-left: 50px;
}

.ve-about-text h2 {
    font-size: 38px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 16px;
}

.ve-about-text h2 span {
    color: var(--ve-gold);
}

.ve-lead {
    font-size: 17px;
    color: var(--ve-dark);
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.7;
}

.ve-about-features {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ve-af-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ve-text);
}

.ve-af-item i {
    color: var(--ve-gold);
    font-size: 14px;
}

/* MVV Cards */
.ve-mvv-section {
    background: var(--ve-dark);
    padding: 80px 0;
}

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

.ve-mvv-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ve-radius);
    padding: 40px 30px;
    text-align: center;
    transition: var(--ve-trans);
}

.ve-mvv-card:hover {
    background: rgba(212, 160, 23, 0.08);
    border-color: rgba(212, 160, 23, 0.3);
}

.ve-mvv-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.2), rgba(212, 160, 23, 0.05));
    border: 1px solid rgba(212, 160, 23, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 26px;
    color: var(--ve-gold);
}

.ve-mvv-card h4 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.ve-mvv-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.8;
}

/* Team */
.ve-team-section {
    background: var(--ve-light);
}

.ve-team-card {
    background: #fff;
    border-radius: var(--ve-radius);
    overflow: hidden;
    box-shadow: var(--ve-shadow);
    transition: var(--ve-trans);
    margin-bottom: 30px;
}

.ve-team-card:hover {
    transform: translateY(-5px);
}

.ve-team-img {
    height: 280px;
    background-size: cover;
    background-position: center top;
}

.ve-team-info {
    padding: 22px 24px;
}

.ve-team-info h5 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 4px;
}

.ve-team-info span {
    font-size: 13px;
    color: var(--ve-text);
    display: block;
    margin-bottom: 14px;
}

.ve-team-social {
    display: flex;
    gap: 8px;
}

.ve-team-social a {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--ve-light);
    color: var(--ve-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-team-social a:hover {
    background: var(--ve-gold);
    color: var(--ve-dark);
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.ve-process-section {
    background: var(--ve-dark);
    padding: 90px 0;
}

.ve-process-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.ve-process-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ve-radius);
    padding: 36px 28px;
    text-align: center;
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    transition: var(--ve-trans);
}

.ve-process-step:hover {
    background: rgb(238, 247, 255);
    border-color: rgba(28, 121, 200, 0.25);
}

.ve-process-num {
    font-size: 40px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: rgba(212, 160, 23, 0.3);
    margin-bottom: 12px;
    line-height: 1;
}

.ve-process-step h5 {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.ve-process-step p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    margin: 0;
}

.ve-process-arrow {
    font-size: 24px;
    color: rgba(212, 160, 23, 0.4);
    flex-shrink: 0;
}

/* FAQ */
.ve-faq-section {
    background: var(--ve-light);
}

.ve-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ve-faq-item {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--ve-border);
    overflow: hidden;
}

.ve-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    cursor: pointer;
    gap: 16px;
}

.ve-faq-q span {
    font-size: 15px;
    font-weight: 700;
    color: var(--ve-dark);
}

.ve-faq-q i {
    color: var(--ve-gold);
    font-size: 14px;
    flex-shrink: 0;
}

.ve-faq-a {
    padding: 0 22px 18px;
    font-size: 14px;
    color: var(--ve-text);
    line-height: 1.8;
    display: none;
}

.ve-faq-item.open .ve-faq-a {
    display: block;
}

.ve-faq-item.open .ve-faq-q {
    border-bottom: 1px solid var(--ve-border);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.ve-contact-cards-section {
    background: var(--ve-dark);
    padding: 0;
    margin-top: -1px;
}

.ve-contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.ve-contact-info-card {
    padding: 50px 40px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.ve-contact-info-card:last-child {
    border-right: none;
}

.ve-ci-icon {
    width: 60px;
    height: 60px;
    background: rgba(212, 160, 23, 0.15);
    border: 1px solid rgba(212, 160, 23, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    color: var(--ve-gold);
}

.ve-contact-info-card h5 {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.ve-contact-info-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.7;
}

.ve-contact-info-card small {
    font-size: 12px;
    opacity: 0.6;
}

.ve-contact-form-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 50px;
    box-shadow: var(--ve-shadow);
}

.ve-contact-form-wrap h2 {
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 10px;
}

.ve-contact-form-wrap h2 span {
    color: var(--ve-gold);
}

.ve-contact-form-wrap>p {
    font-size: 15px;
    color: var(--ve-text);
    margin-bottom: 30px;
}

.ve-contact-form .ve-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ve-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.ve-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ve-dark);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ve-form-group input,
.ve-form-group select,
.ve-form-group textarea {
    border: 1px solid var(--ve-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--ve-dark);
    outline: none;
    transition: var(--ve-trans);
    font-family: 'DM Sans', sans-serif;
    background: #fff;
}

.ve-form-group input:focus,
.ve-form-group select:focus,
.ve-form-group textarea:focus {
    border-color: var(--ve-gold);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12);
}

.ve-form-group textarea {
    resize: vertical;
}

.ve-contact-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 20px;
}

.ve-ca-box {
    background: var(--ve-dark);
    border-radius: 14px;
    padding: 32px;
}

.ve-ca-box h4 {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}

.ve-ca-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ve-ca-list li {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ve-ca-list li i {
    color: var(--ve-gold);
}

.ve-ca-hours {
    background: var(--ve-light);
    border-radius: 14px;
    padding: 28px;
}

.ve-ca-hours h5 {
    font-size: 16px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ve-ca-hours h5 i {
    color: var(--ve-gold);
}

.ve-ca-hours ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ve-ca-hours ul li {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--ve-text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ve-border);
}

.ve-ca-hours ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ve-ca-hours ul li strong {
    color: var(--ve-dark);
    font-weight: 700;
}

.ve-ca-social {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid var(--ve-border);
}

.ve-ca-social h5 {
    font-size: 15px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 16px;
}

/* ============================================================
   BLOG / POST
   ============================================================ */
.ve-pagination {
    display: flex;
    gap: 8px;
    margin-top: 40px;
}

.ve-pagination a {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    background: var(--ve-light);
    color: var(--ve-dark);
    transition: var(--ve-trans);
    border: 1px solid var(--ve-border);
}

.ve-pagination a:hover,
.ve-pagination a.active {
    background: var(--ve-gold);
    color: var(--ve-dark);
    border-color: var(--ve-gold);
}

.ve-sidebar {
    position: sticky;
    top: 90px;
}

.ve-sidebar-widget {
    background: #fff;
    border-radius: var(--ve-radius);
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--ve-border);
}

.ve-sidebar-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--ve-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ve-gold);
    display: inline-block;
}

.ve-search-box {
    display: flex;
    border: 1px solid var(--ve-border);
    border-radius: 8px;
    overflow: hidden;
}

.ve-search-box input {
    flex: 1;
    border: none;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.ve-search-box button {
    background: var(--ve-gold);
    border: none;
    padding: 0 18px;
    cursor: pointer;
    color: var(--ve-dark);
    font-size: 14px;
}

.ve-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ve-cat-list li {
    border-bottom: 1px solid var(--ve-border);
}

.ve-cat-list li:last-child {
    border-bottom: none;
}

.ve-cat-list li a {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: var(--ve-text);
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-cat-list li a:hover {
    color: var(--ve-gold);
}

.ve-cat-list li a span {
    background: var(--ve-light);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ve-dark);
}

.ve-recent-post {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ve-border);
}

.ve-recent-post:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ve-rp-img {
    width: 64px;
    height: 54px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.ve-recent-post a {
    font-size: 13px;
    font-weight: 700;
    color: var(--ve-dark);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
    line-height: 1.4;
    transition: var(--ve-trans);
}

.ve-recent-post a:hover {
    color: var(--ve-gold);
}

.ve-recent-post span {
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ve-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ve-tags a {
    background: var(--ve-light);
    color: var(--ve-text);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--ve-trans);
    border: 1px solid var(--ve-border);
}

.ve-tags a:hover {
    background: var(--ve-gold);
    color: var(--ve-dark);
    border-color: var(--ve-gold);
}

/* Single post */
.ve-article {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--ve-shadow);
    margin-bottom: 40px;
}

.ve-article-featured {
    height: 380px;
    background-size: cover;
    background-position: center;
}

.ve-article-body {
    padding: 40px;
}

.ve-article-body h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ve-dark);
    margin: 28px 0 12px;
}

.ve-article-body p {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ve-text);
    margin-bottom: 16px;
}

.ve-article-lead {
    font-size: 17px;
    font-weight: 500;
    color: var(--ve-dark);
    line-height: 1.7;
    border-left: 4px solid var(--ve-gold);
    padding-left: 20px;
    margin-bottom: 28px;
}

.ve-blockquote {
    background: var(--ve-light);
    border-left: 4px solid var(--ve-gold);
    border-radius: 0 10px 10px 0;
    padding: 24px 28px;
    margin: 30px 0;
}

.ve-blockquote p {
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    color: var(--ve-dark);
    margin-bottom: 8px;
}

.ve-blockquote cite {
    font-size: 13px;
    color: var(--ve-text);
    font-style: normal;
}

.ve-article-tags {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--ve-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ve-article-tags strong {
    font-size: 13px;
    color: var(--ve-dark);
    font-weight: 700;
}

.ve-article-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.ve-article-share strong {
    font-size: 13px;
    color: var(--ve-dark);
    font-weight: 700;
}

.ve-article-share a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--ve-light);
    color: var(--ve-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-article-share a:hover {
    background: var(--ve-gold);
    color: var(--ve-dark);
}

/* Comments */
.ve-comments-section {
    margin-bottom: 40px;
}

.ve-comments-section h4,
.ve-comment-form-wrap h4 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 24px;
}

.ve-comment {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ve-border);
}

.ve-comment.ve-comment-reply {
    margin-left: 60px;
}

.ve-comment:last-child {
    border-bottom: none;
}

.ve-comment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.ve-comment-body {
    flex: 1;
}

.ve-comment-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
}

.ve-comment-meta strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--ve-dark);
}

.ve-comment-meta span {
    font-size: 12px;
    color: #aaa;
}

.ve-comment-body p {
    font-size: 14px;
    color: var(--ve-text);
    line-height: 1.7;
    margin-bottom: 10px;
}

.ve-reply-btn {
    font-size: 12px;
    font-weight: 700;
    color: var(--ve-gold);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ve-comment-form-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--ve-shadow);
}

/* Responsive additions */
@media(max-width:991px) {
    .ve-about-text {
        padding-left: 0;
        margin-top: 40px;
    }

    .ve-contact-cards-grid {
        grid-template-columns: 1fr;
    }

    .ve-contact-info-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ve-mvv-grid {
        grid-template-columns: 1fr;
    }

    .ve-contact-aside {
        padding-left: 0;
        margin-top: 30px;
    }

    .ve-process-grid {
        flex-direction: column;
    }

    .ve-process-arrow {
        transform: rotate(90deg);
    }

    .ve-page-hero-content h1 {
        font-size: 36px;
    }
}

@media(max-width:767px) {
    .ve-contact-form .ve-form-row {
        grid-template-columns: 1fr;
    }

    .ve-contact-form-wrap {
        padding: 28px;
    }

    .ve-article-body {
        padding: 24px;
    }

    .ve-about-img-stack {
        padding-bottom: 30px;
        padding-right: 30px;
    }

    .ve-about-img-2 {
        width: 150px;
        height: 120px;
    }
}

/* ============================================================
   PAGE-SPECIFIC COMPONENTS (all inner pages)
   ============================================================ */

/* Page Hero */
.ve-page-hero {
    min-height: 480px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding-bottom: 60px;
    margin-top: 72px;
}

.ve-page-hero-sm {
    min-height: 460px;
}

.ve-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 27, 42, 0.5) 0%, rgba(13, 27, 42, 0.85) 100%);
}

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

.ve-page-hero-content h1 {
    font-size: 46px;
    font-weight: 900;
    color: #fff;
    margin: 10px 0 18px;
    line-height: 1.15;
}

.ve-page-hero-content h1 span {
    color: var(--ve-gold);
}

.ve-post-meta-hero {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ve-post-meta-hero span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Breadcrumb */
.ve-breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}

.ve-breadcrumb li {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.ve-breadcrumb li a {
    color: var(--ve-gold);
    text-decoration: none;
}

.ve-breadcrumb li a:hover {
    color: #fff;
}

.ve-breadcrumb li.active {
    color: #fff;
}

.ve-breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.3);
}

/* About Page */
.ve-about-img-stack {
    position: relative;
    padding: 0 40px 40px 0;
}

.ve-about-img-1 {
    height: 400px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

.ve-about-img-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55%;
    height: 230px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    border: 4px solid #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.ve-about-ribbon {
    position: absolute;
    top: 30px;
    left: -20px;
    background: var(--ve-gold);
    border-radius: 12px;
    padding: 18px 22px;
    text-align: center;
}

.ve-about-ribbon strong {
    display: block;
    font-size: 36px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: #fff;
}

.ve-about-ribbon span {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.ve-about-text {
    padding-left: 40px;
}

.ve-about-text h2 {
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 16px;
}

.ve-about-text h2 span {
    color: var(--ve-gold);
}

.ve-lead {
    font-size: 17px;
    font-weight: 500;
    color: var(--ve-dark);
    margin-bottom: 14px;
    line-height: 1.7;
}

.ve-about-text>p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 24px;
}

.ve-about-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.ve-af-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--ve-dark);
    font-weight: 500;
}

.ve-af-item i {
    color: var(--ve-gold);
    font-size: 14px;
}

/* MVV Section */
.ve-mvv-section {
    background: linear-gradient(135deg, var(--ve-dark) 0%, var(--ve-navy) 100%);
    padding: 80px 0;
}

.ve-mvv-section .ve-section-header h2 {
    color: #fff;
}

.ve-mvv-section .ve-section-header p {
    color: rgba(255, 255, 255, 0.6);
}

.ve-mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 50px;
}

.ve-mvv-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ve-radius);
    padding: 36px 28px;
    text-align: center;
    transition: var(--ve-trans);
}

.ve-mvv-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

.ve-mvv-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--ve-gold), var(--ve-gold2));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--ve-dark);
    margin: 0 auto 20px;
}

.ve-mvv-card h4 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.ve-mvv-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    margin: 0;
}

/* Team Cards */
.ve-team-section {
    background: var(--ve-light);
}

.ve-team-card {
    background: #fff;
    border-radius: var(--ve-radius);
    overflow: hidden;
    border: 1px solid var(--ve-border);
    transition: var(--ve-trans);
    margin-bottom: 28px;
}

.ve-team-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ve-shadow);
}

.ve-team-img {
    height: 260px;
    background-size: cover;
    background-position: center top;
}

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

.ve-team-info h5 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 4px;
}

.ve-team-info span {
    font-size: 13px;
    color: var(--ve-text);
    display: block;
    margin-bottom: 14px;
}

.ve-team-social {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ve-team-social a {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--ve-light);
    color: var(--ve-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-team-social a:hover {
    background: var(--ve-gold);
    color: var(--ve-dark);
}

/* Process Steps */
.ve-process-section {
    background: var(--ve-light);
    padding: 80px 0;
}

.ve-process-grid {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 50px;
    flex-wrap: wrap;
}

.ve-process-step {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border-radius: var(--ve-radius);
    padding: 32px 24px;
    text-align: center;
    border: 1px solid var(--ve-border);
}

.ve-process-num {
    font-size: 42px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: var(--ve-gold);
    line-height: 1;
    margin-bottom: 14px;
}

.ve-process-step h5 {
    font-size: 16px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 8px;
}

.ve-process-step p {
    font-size: 13px;
    color: var(--ve-text);
    line-height: 1.7;
    margin: 0;
}

.ve-process-arrow {
    font-size: 24px;
    color: var(--ve-gold);
    padding: 0 16px;
    flex-shrink: 0;
}

/* FAQ */
.ve-faq-section {
    background: #fff;
}

.ve-faq-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ve-faq-item {
    border-bottom: 1px solid var(--ve-border);
}

.ve-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 18px;
    cursor: pointer;
    gap: 16px;
}

.ve-faq-q span {
    font-size: 15px;
    font-weight: 700;
    color: var(--ve-dark);
}

.ve-faq-q i {
    font-size: 14px;
    color: var(--ve-gold);
    flex-shrink: 0;
    transition: var(--ve-trans);
}

.ve-faq-item.open .ve-faq-q i {
    transform: rotate(45deg);
}

.ve-faq-a {
    font-size: 14px;
    color: var(--ve-text);
    line-height: 1.8;
    padding: 10px 10px 16px;
    display: none;
}

.ve-faq-item.open .ve-faq-a {
    display: block;
}

/* Contact Cards */
.ve-contact-cards-section {
    background: var(--ve-light);
    padding: 60px 0;
}

.ve-contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ve-contact-info-card {
    background: #fff;
    border-radius: var(--ve-radius);
    padding: 36px 28px;
    text-align: center;
    border: 1px solid var(--ve-border);
    transition: var(--ve-trans);
}

.ve-contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ve-shadow);
}

.ve-ci-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--ve-dark), var(--ve-navy));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--ve-gold);
    margin: 0 auto 18px;
}

.ve-contact-info-card h5 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 8px;
}

.ve-contact-info-card p {
    font-size: 14px;
    color: var(--ve-text);
    line-height: 1.7;
    margin: 0;
}

/* Contact Form Wrap */
.ve-contact-form-wrap h2 {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 10px;
}

.ve-contact-form-wrap h2 span {
    color: var(--ve-gold);
}

.ve-contact-form-wrap>p {
    font-size: 15px;
    color: var(--ve-text);
    margin-bottom: 28px;
}

.ve-contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ve-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.ve-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ve-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ve-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ve-form-group input,
.ve-form-group select,
.ve-form-group textarea {
    border: 2px solid var(--ve-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: var(--ve-dark);
    background: #fff;
    outline: none;
    transition: var(--ve-trans);
}

.ve-form-group input:focus,
.ve-form-group select:focus,
.ve-form-group textarea:focus {
    border-color: var(--ve-gold);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
}

.ve-form-group textarea {
    resize: vertical;
}

/* Contact Aside */
.ve-contact-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 30px;
}

.ve-ca-box {
    background: var(--ve-light);
    border-radius: var(--ve-radius);
    padding: 28px;
    border: 1px solid var(--ve-border);
}

.ve-ca-box h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 18px;
}

.ve-ca-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ve-ca-list li {
    font-size: 14px;
    color: var(--ve-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ve-ca-list li i {
    color: var(--ve-gold);
}

.ve-ca-hours {
    background: var(--ve-dark);
    border-radius: var(--ve-radius);
    padding: 24px;
}

.ve-ca-hours h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ve-gold);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ve-ca-hours ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ve-ca-hours ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 14px;
}

.ve-ca-hours ul li:last-child {
    border-bottom: none;
}

.ve-ca-hours ul li span {
    color: rgba(255, 255, 255, 0.5);
}

.ve-ca-hours ul li strong {
    color: #fff;
}

.ve-ca-social h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ve-dark);
    margin-bottom: 12px;
}

/* Blog / Sidebar */
.ve-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-left: 20px;
}

.ve-sidebar-widget {
    background: #fff;
    border-radius: var(--ve-radius);
    padding: 28px;
    border: 1px solid var(--ve-border);
}

.ve-sidebar-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ve-gold);
    display: inline-block;
}

.ve-search-box {
    display: flex;
    border: 2px solid var(--ve-border);
    border-radius: 8px;
    overflow: hidden;
}

.ve-search-box input {
    flex: 1;
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.ve-search-box button {
    background: var(--ve-gold);
    border: none;
    padding: 0 16px;
    color: var(--ve-dark);
    cursor: pointer;
    font-size: 14px;
    transition: var(--ve-trans);
}

.ve-search-box button:hover {
    background: var(--ve-dark);
    color: #fff;
}

.ve-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ve-cat-list li a {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: var(--ve-text);
    text-decoration: none;
    border-bottom: 1px solid var(--ve-border);
    transition: var(--ve-trans);
}

.ve-cat-list li:last-child a {
    border-bottom: none;
}

.ve-cat-list li a span {
    background: var(--ve-light);
    color: var(--ve-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.ve-cat-list li a:hover {
    color: var(--ve-gold);
}

.ve-recent-post {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.ve-recent-post:last-child {
    margin-bottom: 0;
}

.ve-rp-img {
    width: 65px;
    height: 50px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.ve-recent-post div a {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ve-dark);
    text-decoration: none;
    margin-bottom: 4px;
    line-height: 1.4;
}

.ve-recent-post div a:hover {
    color: var(--ve-gold);
}

.ve-recent-post div span {
    font-size: 12px;
    color: var(--ve-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ve-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ve-tags a {
    background: var(--ve-light);
    color: var(--ve-text);
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid var(--ve-border);
    transition: var(--ve-trans);
}

.ve-tags a:hover {
    background: var(--ve-gold);
    color: var(--ve-dark);
    border-color: var(--ve-gold);
}

/* Pagination */
.ve-pagination {
    display: flex;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.ve-pagination a {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--ve-light);
    border: 1px solid var(--ve-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ve-text);
    text-decoration: none;
    transition: var(--ve-trans);
}

.ve-pagination a.active,
.ve-pagination a:hover {
    background: var(--ve-gold);
    color: var(--ve-dark);
    border-color: var(--ve-gold);
}

/* Article */
.ve-article {
    background: #fff;
    border-radius: var(--ve-radius);
    overflow: hidden;
    border: 1px solid var(--ve-border);
    margin-bottom: 40px;
}

.ve-article-featured {
    height: 380px;
    background-size: cover;
    background-position: center;
}

.ve-article-body {
    padding: 36px;
}

.ve-article-lead {
    font-size: 17px;
    font-weight: 500;
    color: var(--ve-dark);
    line-height: 1.8;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ve-border);
}

.ve-article-body h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ve-dark);
    margin: 28px 0 12px;
}

.ve-article-body p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ve-text);
    margin-bottom: 16px;
}

.ve-blockquote {
    background: var(--ve-light);
    border-left: 4px solid var(--ve-gold);
    border-radius: 0 10px 10px 0;
    padding: 24px 28px;
    margin: 28px 0;
}

.ve-blockquote p {
    font-size: 17px;
    font-style: italic;
    color: var(--ve-dark);
    font-weight: 500;
    margin: 0 0 8px;
}

.ve-blockquote cite {
    font-size: 13px;
    color: var(--ve-gold);
    font-weight: 700;
    font-style: normal;
}

.ve-article-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.ve-article-tags strong {
    font-size: 14px;
    color: var(--ve-dark);
}

.ve-article-tags a {
    background: var(--ve-light);
    color: var(--ve-text);
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid var(--ve-border);
    transition: var(--ve-trans);
}

.ve-article-tags a:hover {
    background: var(--ve-gold);
    color: var(--ve-dark);
    border-color: var(--ve-gold);
}

.ve-article-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.ve-article-share strong {
    font-size: 14px;
    color: var(--ve-dark);
}

.ve-article-share a {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--ve-light);
    color: var(--ve-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: var(--ve-trans);
    border: 1px solid var(--ve-border);
}

.ve-article-share a:hover {
    background: var(--ve-gold);
    color: var(--ve-dark);
    border-color: var(--ve-gold);
}

/* Comments */
.ve-comments-section {
    margin-bottom: 40px;
}

.ve-comments-section h4 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 24px;
}

.ve-comment {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.ve-comment-reply {
    margin-left: 50px;
}

.ve-comment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.ve-comment-body {
    flex: 1;
    background: var(--ve-light);
    border-radius: 10px;
    padding: 18px;
}

.ve-comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}

.ve-comment-meta strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--ve-dark);
}

.ve-comment-meta span {
    font-size: 13px;
    color: var(--ve-text);
}

.ve-comment-body p {
    font-size: 14px;
    color: var(--ve-text);
    line-height: 1.7;
    margin-bottom: 10px;
}

.ve-reply-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--ve-gold);
    text-decoration: none;
}

.ve-reply-btn:hover {
    color: var(--ve-dark);
}

/* Comment form */
.ve-comment-form-wrap h4 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ve-dark);
    margin-bottom: 24px;
}

/* Elements page */
.ve-elements-section {
    background: #fff;
}

.ve-el-block {
    margin-bottom: 70px;
}

.ve-el-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--ve-dark);
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ve-border);
    display: flex;
    align-items: center;
    gap: 14px;
}

.ve-el-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--ve-gold);
    color: var(--ve-dark);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 900;
    flex-shrink: 0;
}

.ve-el-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Why us section */
.ve-whyus-section {
    background: #fff;
}

.ve-whyus-img-wrap {
    position: relative;
    padding-bottom: 40px;
    padding-right: 40px;
}

.ve-whyus-img-main {
    height: 550px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

.ve-whyus-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--ve-gold);
    border-radius: 14px;
    padding: 22px 28px;
    text-align: center;
    min-width: 160px;
}

.ve-whyus-badge strong {
    display: block;
    font-size: 40px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: #fff;
}

.ve-whyus-badge span {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.ve-whyus-content {
    padding-left: 40px;
}

.ve-whyus-content h2 {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 16px;
    color: #17212b;
}

.ve-whyus-content h2 span {
    color: var(--ve-gold);
}

/* =========================================
   OUR CLIENTS
========================================= */

.ve-clients-section {
    position: relative;
    padding: 20px 0 90px;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================
   SECTION HEADER
========================================= */

.ve-clients-section .ve-section-header {
    max-width: 760px;
    margin: 0 auto 55px;
}

.ve-clients-section .ve-section-tag {
    display: inline-block;
    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ve-clients-section .ve-section-header h2 {
    margin-bottom: 17px;
}

.ve-clients-section .ve-section-header h2 span {
    position: relative;
}

.ve-clients-section .ve-section-header p {
    max-width: 680px;
    margin: 0 auto;

    color: #777;
    line-height: 1.8;
}


/* =========================================
   MARQUEE OUTER
========================================= */

.ve-client-marquee {
    position: relative;
    width: 100%;

    overflow: hidden;

    padding: 15px 0 25px;

    /* Fade edges */
    mask-image: linear-gradient(to right,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%);

    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%);
}


/* =========================================
   MOVING TRACK
========================================= */

.ve-client-track {
    display: flex;
    align-items: center;

    width: max-content;

    gap: 25px;

    animation: veClientScroll 25s linear infinite;
}


/* Pause when mouse enters */
.ve-client-marquee:hover .ve-client-track {
    animation-play-state: paused;
}


/* =========================================
   LOGO CARD
========================================= */

.ve-client-item {
    position: relative;

    width: 230px;
    height: 120px;

    flex-shrink: 0;

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

    padding: 25px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.045);

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


/* Top shine */
.ve-client-item::before {
    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 2px;

    background: linear-gradient(90deg,
            transparent,
            rgba(0, 0, 0, 0.12),
            transparent);

    opacity: 0;

    transition: opacity 0.4s ease;
}


/* Hover */
.ve-client-item:hover {
    transform: translateY(-8px);

    border-color: #dddddd;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.10);
}

.ve-client-item:hover::before {
    opacity: 1;
}


/* =========================================
   LOGO IMAGE
========================================= */

.ve-client-item img {
    display: block;

    max-width: 175px;
    max-height: 60px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.65;

    transition:
        filter 0.4s ease,
        opacity 0.4s ease,
        transform 0.4s ease;
}


/* Logo hover */
.ve-client-item:hover img {
    filter: grayscale(0%);
    opacity: 1;

    transform: scale(1.06);
}


/* =========================================
   INFINITE ANIMATION
========================================= */

@keyframes veClientScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 12.5px));
    }

}


/* =========================================
   BOTTOM TRUST TEXT
========================================= */

.ve-client-bottom {
    margin-top: 35px;

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

    gap: 18px;
}

.ve-client-line {
    display: block;

    width: 70px;
    height: 1px;

    background: #e5e5e5;
}

.ve-client-text {
    font-size: 12px;
    font-weight: 500;

    color: #999;

    letter-spacing: 0.3px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .ve-clients-section {
        padding: 80px 0;
    }

    .ve-client-item {
        width: 200px;
        height: 105px;
    }

    .ve-client-item img {
        max-width: 150px;
        max-height: 52px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .ve-clients-section {
        padding: 65px 0;
    }

    .ve-clients-section .ve-section-header {
        margin-bottom: 35px;
    }

    .ve-client-track {
        gap: 15px;

        animation-duration: 20s;
    }

    .ve-client-item {
        width: 170px;
        height: 90px;

        padding: 18px;

        border-radius: 14px;
    }

    .ve-client-item img {
        max-width: 130px;
        max-height: 45px;
    }

    .ve-client-bottom {
        margin-top: 25px;
    }

    .ve-client-line {
        width: 35px;
    }

    .ve-client-text {
        font-size: 10px;
        text-align: center;
    }

}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ve-client-track {
        animation: none;
    }

}

/* =========================================
   HAJORAS FULL WIDTH HEADER
========================================= */

.hj-pill-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 0;
    background: #f7faff;
}


/* =========================================
   MAIN HEADER
========================================= */

.hj-pill-nav {
    width: 100%;
    max-width: none;
    height: 100px;

    margin: 0;
    padding: 0 7%;

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

    background: #f7faff;

    border: none;
    border-radius: 0;

    box-shadow: none;

    transition: all 0.3s ease;
}


/* Remove highlight */

.hj-pill-nav::before {
    display: none;
}


/* =========================================
   LOGO
========================================= */

.hj-pill-logo {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
}

.hj-pill-logo a {
    display: flex;
    align-items: center;

    gap: 10px;

    text-decoration: none;
}

.hj-pill-logo img {
    height: 72px;
    width: auto;

    max-width: 260px;

    display: block;

    object-fit: contain;
}

.hj-logo-box {
    display: none;
}

.hj-logo-text {
    color: #222222;
}


/* =========================================
   NAVIGATION
========================================= */

.hj-pill-menu {
    height: 100%;
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
}

.hj-pill-menu ul {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 18px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.hj-pill-menu li {
    position: relative;
}


/* Navigation links */

.hj-pill-menu > ul > li > a {
    height: 42px;

    padding: 0 10px;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #111111;

    text-decoration: none;

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

    border-radius: 0;

    transition: color 0.25s ease;
}


/* Hover */

.hj-pill-menu > ul > li > a:hover {
    color: #1C79C8;
    background: transparent;
}


/* Active */

.hj-pill-menu > ul > li > a.hj-active {
    color: #1C79C8;
    background: transparent;
}


/* Dropdown arrow */

.hj-pill-menu i {
    font-size: 12px;
    color: #222222;

    transition: transform 0.25s ease;
}

.hj-has-menu:hover > a i {
    transform: rotate(180deg);
}


/* =========================================
   DROPDOWN
========================================= */

.hj-dropdown {
    position: absolute;

    top: calc(100% + 5px);
    left: 0;

    width: 280px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid rgba(28, 121, 200, 0.15);

    border-radius: 10px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.hj-has-menu:hover .hj-dropdown {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* Dropdown links */

.hj-dropdown a {
    display: block;

    padding: 10px 12px;

    color: #333333;

    text-decoration: none;

    font-size: 15px;

    border: 1px solid transparent;

    border-radius: 7px;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.hj-dropdown a:hover {
    color: #1C79C8;

    background: #EEF7FF;

    border-color: rgba(28, 121, 200, 0.20);
}


/* =========================================
   CTA BUTTON
========================================= */

.hj-pill-action {
    position: relative;
    z-index: 2;
}

.hj-pill-action a {
    display: inline-flex;

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

    padding: 0 24px;

    height: 54px;

    background: #1C79C8;

    color: #ffffff;

    border-radius: 5px;

    text-decoration: none;

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

    transition: all 0.25s ease;
}

.hj-pill-action a:hover {
    background: #ff6a0a;

    transform: translateY(-1px);
}


/* =========================================
   MOBILE BUTTON
========================================= */

.hj-pill-mobile {
    display: none;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    background: #1C79C8;

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

    flex-direction: column;

    gap: 4px;

    cursor: pointer;
}

.hj-pill-mobile span {
    width: 17px;
    height: 2px;

    background: #ffffff;

    border-radius: 5px;
}


/* =========================================
   MOBILE MENU
========================================= */

.hj-pill-mobile-menu {
    display: none;

    width: 100%;

    margin: 0;

    padding: 12px;

    background: #ffffff;

    border: 1px solid rgba(28, 121, 200, 0.15);

    border-radius: 0;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.10);
}

.hj-pill-mobile-menu a {
    display: block;

    padding: 13px 14px;

    color: #333333;

    text-decoration: none;

    font-size: 14px;

    border-radius: 8px;
}

.hj-pill-mobile-menu a:hover {
    background: #EEF7FF;

    color: #1C79C8;
}

.hj-pill-mobile-menu .hj-mobile-cta {
    margin-top: 7px;

    text-align: center;

    color: #ffffff;

    background: #1C79C8;
}


/* =========================================
   TABLET / MOBILE
========================================= */

@media (max-width: 900px) {

    .hj-pill-header {
        padding: 0;
    }

    .hj-pill-nav {
        height: 75px;

        padding: 0 25px;

        max-width: none;
    }

    .hj-pill-logo img {
        height: 52px;
        max-width: 190px;
    }

    .hj-pill-menu,
    .hj-pill-action {
        display: none;
    }

    .hj-pill-mobile {
        display: flex;
    }

    .hj-pill-mobile-menu {
        display: none;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .hj-pill-nav {
        height: 68px;

        padding: 0 15px;
    }

    .hj-pill-logo img {
        height: 45px;
        max-width: 160px;
    }

    .hj-pill-mobile {
        width: 40px;
        height: 40px;
    }
}

/* =========================================
   SCROLLED STATE
========================================= */

.hj-pill-header.hj-scrolled {

    top: 10px;
}


.hj-pill-header.hj-scrolled .hj-pill-nav {

    height: 60px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.30);
}


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

@media (max-width: 1050px) {

    .hj-pill-menu {

        display: none;

    }

    .hj-pill-action {

        display: none;

    }

    .hj-pill-mobile {

        display: flex;

    }

}


@media (max-width: 600px) {

    .hj-pill-header {

        top: 12px;

        padding: 0 12px;

    }

    .hj-pill-nav {

        height: 58px;

        padding-left: 10px;

    }

    .hj-logo-box {

        width: 36px;
        height: 36px;

        font-size: 17px;

    }

    .hj-logo-text {

        font-size: 18px;

    }

}

/* Scrollbar - Orange Theme */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #1a0d08;
}

::-webkit-scrollbar-thumb {
    background: #1C79C8;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1C79C8;
}


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

.haj-hero {
    position: relative;
    width: 100%;
    height: 720px;
    overflow: hidden;
    background: #071525;
    font-family: "Inter", sans-serif;
}

.haj-hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* ==========================================
   SLIDES
   ========================================== */

.haj-hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;

    transform: translateX(100%);

    transition:
        transform 1.8s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.8s ease,
        visibility 0.8s ease;

    z-index: 1;
}


/* Active */

.haj-hero-slide-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    z-index: 3;
}


/* Previous */

.haj-hero-slide-prev {
    opacity: 1;
    visibility: visible;
    transform: translateX(-100%);
    z-index: 2;
}


/* Next */

.haj-hero-slide-next {
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    z-index: 1;
}


/* ==========================================
   OVERLAY
   ========================================== */

.haj-hero-slide::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,20,40,.84) 0%,
            rgba(5,20,40,.64) 42%,
            rgba(5,20,40,.30) 70%,
            rgba(5,20,40,.10) 100%
        );

    z-index: 1;
}


/* ==========================================
   INNER
   ========================================== */

.haj-hero-inner {
    position: relative;

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

    margin: auto;

    padding: 0 8%;

    z-index: 5;
}


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

.haj-hero-content {
    position: relative;

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

    z-index: 5;
}


/* ==========================================
   LABEL
   ========================================== */

.haj-hero-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: #ff6a0a;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;

    letter-spacing: 1.5px;
}

.haj-hero-label span {
    width: 38px;
    height: 2px;

    background: #ff6a0a;
}


/* ==========================================
   HEADING
   ========================================== */

.haj-hero-content h1 {
    margin: 0 0 24px;

    color: #ff6a0a;

    font-family: "nunito", sans-serif;

    font-size: 52px;
    line-height: 1.12;
    font-weight: 800;

    letter-spacing: -1px;
}

.haj-hero-content h1 strong {
    display: block;
}


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

.haj-hero-content > p {
    max-width: 650px;

    margin: 0 0 32px;

    color: rgba(255,255,255,.88);

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


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

.haj-hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 38px;
}

.haj-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 5px;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition: .3s ease;
}


/* Primary */

.haj-hero-btn-primary {
    background: #1c79c8;
    color: #fff;

}

.haj-hero-btn-primary:hover {
    background: #ff6a0a;
    color: #fff;

}


/* Outline */

.haj-hero-btn-outline {
    background: transparent;
    color: #fff;

    border: 1px solid rgba(255,255,255,.65);
}

.haj-hero-btn-outline:hover {
    background: #ff6a0a;
    color: #fff;

}

.haj-hero-btn-outline span {
    margin-left: 10px;
}


/* ==========================================
   SERVICE INFO
   ========================================== */

.haj-hero-service-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.haj-hero-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;

    color: #fff;

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

.haj-hero-service-info strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
}

.haj-hero-service-info small {
    display: block;

    color: rgba(255,255,255,.70);

    font-size: 13px;
}


/* ==========================================
   ARROWS
   ========================================== */

.haj-hero-arrow {
    position: absolute;
    top: 50%;

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

    width: 48px;
    height: 48px;

    margin-top: -24px;
    padding: 0;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.30);

    border-radius: 50%;

    color: #fff;

    font-size: 22px;

    cursor: pointer;

    z-index: 10;

    transition: .3s ease;
}

.haj-hero-prev {
    left: 30px;
}

.haj-hero-next {
    right: 30px;
}

.haj-hero-arrow:hover {
    background: #1c79c8;
    border-color: #1c79c8;

    transform: scale(1.08);
}


/* ==========================================
   DOTS
   ========================================== */

.haj-hero-dots {
    position: absolute;

    left: 50%;
    bottom: 35px;

    display: flex;
    gap: 8px;

    transform: translateX(-50%);

    z-index: 10;
}

.haj-hero-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    background: rgba(255,255,255,.45);

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    transition: .4s ease;
}

.haj-hero-dot-active {
    width: 30px;
    border-radius: 10px;
    background: #1c79c8;
}


/* ==========================================
   CONTENT ANIMATION
   ========================================== */

.haj-hero-slide-active .haj-hero-label {
    animation: hajHeroFadeUp .8s ease .2s both;
}

.haj-hero-slide-active h1 {
    animation: hajHeroFadeUp .9s ease .3s both;
}

.haj-hero-slide-active .haj-hero-content > p {
    animation: hajHeroFadeUp .9s ease .45s both;
}

.haj-hero-slide-active .haj-hero-buttons {
    animation: hajHeroFadeUp .9s ease .6s both;
}

.haj-hero-slide-active .haj-hero-service-info {
    animation: hajHeroFadeUp .9s ease .75s both;
}

@keyframes hajHeroFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 1024px) {

    .haj-hero {
        height: 650px;
    }

    .haj-hero-inner {
        padding: 0 7%;
    }

    .haj-hero-content {
        max-width: 650px;
    }

    .haj-hero-content h1 {
        font-size: 44px;
    }

    .haj-hero-content > p {
        font-size: 16px;
    }

    .haj-hero-prev {
        left: 18px;
    }

    .haj-hero-next {
        right: 18px;
    }

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 767px) {

    .haj-hero {
        height: 680px;
    }

    .haj-hero-inner {
        padding: 0 6%;
    }

    .haj-hero-content {
        max-width: 100%;
    }

    .haj-hero-content h1 {
        font-size: 36px;
        line-height: 1.18;

        letter-spacing: -.5px;
    }

    .haj-hero-content > p {
        font-size: 15px;
        line-height: 1.65;
    }

    .haj-hero-label {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .haj-hero-label span {
        width: 28px;
    }

    .haj-hero-buttons {
        flex-direction: column;
        align-items: flex-start;

        gap: 10px;
    }

    .haj-hero-btn {
        min-height: 48px;
        padding: 0 20px;

        font-size: 14px;
    }

    .haj-hero-service-info {
        gap: 12px;
    }

    .haj-hero-number {
        width: 38px;
        height: 38px;
    }

    .haj-hero-service-info strong {
        font-size: 13px;
    }

    .haj-hero-service-info small {
        font-size: 11px;
    }

    .haj-hero-arrow {
        top: auto;
        bottom: 24px;

        width: 38px;
        height: 38px;

        margin: 0;

        font-size: 17px;
    }

    .haj-hero-prev {
        left: 18px;
    }

    .haj-hero-next {
        right: 18px;
    }

    .haj-hero-dots {
        bottom: 39px;
    }

}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media (max-width: 480px) {

    .haj-hero {
        height: 700px;
    }

    .haj-hero-inner {
        padding: 0 5%;
    }

    .haj-hero-content h1 {
        font-size: 31px;
    }

    .haj-hero-content > p {
        font-size: 14px;
    }

    .haj-hero-slide::before {
        background:
            linear-gradient(
                90deg,
                rgba(5,20,40,.90) 0%,
                rgba(5,20,40,.72) 100%
            );
    }

}
/* =========================================================
   HAJORAS ABOUT SECTION
   UNIQUE PREFIX: hjx-about-
   ========================================================= */

.hjx-about-section {
    width: 100%;
    padding: 90px 0 80px;
    background: #ffffff;
    font-family: "Inter", sans-serif;
    box-sizing: border-box;
}

.hjx-about-section *,
.hjx-about-section *::before,
.hjx-about-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.hjx-about-container {
    width: 80%;
    max-width: 1280px;
    margin: 0 auto;
}


/* =========================================================
   TOP SECTION
   ========================================================= */

.hjx-about-top {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    gap: 45px;
    margin-bottom: 55px;
}


/* =========================================================
   IMAGE HOLDER
   ========================================================= */

.hjx-about-image-area {
    width: 100%;
}

.hjx-about-image-holder {
    width: 100%;
    min-height: 500px;

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

    overflow: hidden;

    border-radius: 20px;

}

.hjx-about-image-holder img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 500px;

    object-fit: contain;
    object-position: center;

    border-radius: 20px;
}


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

.hjx-about-content {
    width: 100%;
}


/* =========================================================
   LABEL
   ========================================================= */

.hjx-about-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;

    color: #ff6a0a;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

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

.hjx-about-label span {
    display: inline-block;

    width: 38px;
    height: 2px;

    flex-shrink: 0;

    background: #ff6a0a;
}


/* =========================================================
   HEADING
   ========================================================= */

.hjx-about-heading {
    margin: 0 0 20px;

    color: #102957;

    font-family: "nunito", sans-serif;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -0.8px;
}

.hjx-about-heading span {
    display: block;
    color: #ff6a0a;
}


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

.hjx-about-description {
    margin: 0 0 14px;

    color: #667085;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 400;
}

.hjx-about-description-last {
    margin-bottom: 28px;
}


/* =========================================================
   FEATURES
   ========================================================= */

.hjx-about-features {
    display: grid;

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

    width: 100%;

    padding-top: 22px;

    border-top: 1px solid #edf0f5;
}

.hjx-about-feature {
    display: flex;
    flex-direction: column;

    padding: 0 18px;

    border-right: 1px solid #edf0f5;
}

.hjx-about-feature:first-child {
    padding-left: 0;
}

.hjx-about-feature:last-child {
    padding-right: 0;
    border-right: none;
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.hjx-about-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-bottom: 9px;

    color: #1c79c8;

    font-size: 19px;
}


/* =========================================================
   FEATURE CONTENT
   ========================================================= */

.hjx-about-feature-content strong {
    display: block;

    margin-bottom: 5px;

    color: #1c79c8;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.hjx-about-feature-content p {
    margin: 0;

    color: #7a8496;

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


/* =========================================================
   BOTTOM CARDS
   ========================================================= */

.hjx-about-cards {
    display: grid;

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

    gap: 14px;

    width: 100%;
}


/* =========================================================
   CARD
   ========================================================= */

.hjx-about-card {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    min-height: 150px;

    padding: 24px 20px;

    background: #ffffff;

    border: 1px solid #edf1f6;
    border-radius: 12px;

    box-shadow: 0 5px 25px rgba(20, 50, 90, 0.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

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

    border-color: #d9e8f8;

    box-shadow: 0 12px 30px rgba(20, 50, 90, 0.09);
}


/* =========================================================
   CARD ICON
   ========================================================= */

.hjx-about-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    border-radius: 50%;

    background: #edf6ff;

    color: #1c79c8;

    font-size: 19px;
}


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

.hjx-about-card-content {
    flex: 1;
}

.hjx-about-card-content span {
    display: block;

    margin-bottom: 6px;

    color: #7b8492;

    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: .3px;
}

.hjx-about-card-content h3 {
    margin: 0 0 7px;

    color: #1478d0;

    font-family: "Poppins", sans-serif;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
}

.hjx-about-card-content p {
    margin: 0;

    color: #697586;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .hjx-about-container {
        width: 88%;
    }

    .hjx-about-top {
        grid-template-columns: 46% 54%;
        gap: 30px;
    }

    .hjx-about-heading {
        font-size: 34px;
    }

    .hjx-about-image-holder,
    .hjx-about-image-holder img {
        min-height: 430px;
    }

    .hjx-about-features {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    .hjx-about-feature:nth-child(2) {
        border-right: none;
    }

    .hjx-about-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hjx-about-section {
        padding: 60px 0;
    }

    .hjx-about-container {
        width: 90%;
    }

    .hjx-about-top {
        display: flex;
        flex-direction: column;
        gap: 35px;
        margin-bottom: 40px;
    }

    .hjx-about-image-area {
        order: 1;
    }

    .hjx-about-content {
        order: 2;
    }

    .hjx-about-image-holder {
        min-height: 350px;
        border-radius: 15px;
    }

    .hjx-about-image-holder img {
        min-height: 350px;
        border-radius: 15px;
    }

    .hjx-about-heading {
        font-size: 30px;
        line-height: 1.2;
    }

    .hjx-about-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .hjx-about-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .hjx-about-feature {
        padding: 0 10px;
    }

    .hjx-about-feature:nth-child(2) {
        border-right: none;
    }

    .hjx-about-feature:nth-child(3),
    .hjx-about-feature:nth-child(4) {
        padding-top: 20px;
        border-top: 1px solid #edf0f5;
    }

    .hjx-about-feature:nth-child(4) {
        border-right: none;
    }

    .hjx-about-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hjx-about-card {
        min-height: auto;
        padding: 22px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hjx-about-section {
        padding: 50px 0;
    }

    .hjx-about-container {
        width: 92%;
    }

    .hjx-about-image-holder {
        min-height: 300px;
    }

    .hjx-about-image-holder img {
        min-height: 300px;
    }

    .hjx-about-heading {
        font-size: 27px;
    }

    .hjx-about-label {
        font-size: 12px;
    }

    .hjx-about-description {
        font-size: 13px;
    }

    .hjx-about-features {
        grid-template-columns: 1fr;
    }

    .hjx-about-feature,
    .hjx-about-feature:nth-child(3),
    .hjx-about-feature:nth-child(4) {
        padding: 15px 0 !important;

        border-right: none !important;

        border-top: none !important;

        border-bottom: 1px solid #edf0f5;
    }

    .hjx-about-feature:last-child {
        border-bottom: none;
    }

}
/* =========================================================
   HAJORAS - OUR CLIENTS SECTION - START
========================================================= */

.hjx-clients-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   MAIN 80% WIDTH CONTAINER
========================================================= */

.hjx-clients-wrapper {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.hjx-clients-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}


/* Small heading */

.hjx-clients-tag {
    display: inline-block;

    margin-bottom: 15px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #1C79C8;
}


/* Main heading */

.hjx-clients-heading h2 {
    margin: 0 0 18px;

    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.1;

    font-weight: 700;

    color: #17202d;

    letter-spacing: -1.5px;
}


/* Orange heading text */

.hjx-clients-heading h2 span {
    color: #1C79C8;
}


/* Description */

.hjx-clients-heading p {
    width: 100%;
    max-width: 700px;

    margin: 0 auto;

    font-size: 16px;
    line-height: 1.8;

    color: #6d7682;
}


/* =========================================================
   LOGO MARQUEE
========================================================= */

.hjx-logo-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 20px 0 30px;
}


/* =========================================================
   LEFT / RIGHT FADE
========================================================= */

.hjx-logo-marquee::before,
.hjx-logo-marquee::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 90px;

    z-index: 5;

    pointer-events: none;
}


/* Left fade */

.hjx-logo-marquee::before {
    left: 0;

    background: linear-gradient(to right,
            #ffffff 0%,
            rgba(255, 255, 255, 0) 100%);
}


/* Right fade */

.hjx-logo-marquee::after {
    right: 0;

    background: linear-gradient(to left,
            #ffffff 0%,
            rgba(255, 255, 255, 0) 100%);
}


/* =========================================================
   LOGO TRACK
========================================================= */

.hjx-logo-track {
    display: flex;

    align-items: center;

    width: max-content;

    gap: 22px;

    animation: hjxClientScroll 35s linear infinite;

    will-change: transform;
}


/* Pause when mouse is over the logo area */

.hjx-logo-marquee:hover .hjx-logo-track {
    animation-play-state: paused;
}


/* =========================================================
   CLIENT LOGO CARD
========================================================= */

.hjx-logo-box {
    position: relative;

    width: 210px;
    height: 125px;

    flex-shrink: 0;

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

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e8ecf1;

    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(20, 30, 45, 0.06);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;

    z-index: 1;
}



/* =========================================================
   LOGO IMAGE
========================================================= */

.hjx-logo-box img {
    display: block;

    width: auto;
    height: auto;

    max-width: 165px;
    max-height: 70px;

    object-fit: contain;

    /* Full color */

    filter: none;

    opacity: 1;

    transition:
        transform 0.35s ease;
}


/* =========================================================
   LOGO HOVER
========================================================= */

.hjx-logo-box:hover {
    transform: translateY(-8px);

    border-color: rgba(28, 121, 200, 0.25);

    z-index: 10;
}


.hjx-logo-box:hover::after {
    width: 60%;
}


.hjx-logo-box:hover img {
    transform: scale(1.08);
}


/* =========================================================
   INFINITE SCROLL ANIMATION
========================================================= */

@keyframes hjxClientScroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 11px));
    }

}


/* =========================================================
   BOTTOM TRUST MESSAGE
========================================================= */

.hjx-clients-bottom {
    width: 100%;

    margin: 45px auto 0;

    display: flex;

    align-items: center;

    gap: 25px;
}


/* Horizontal lines */

.hjx-clients-bottom>span {
    flex: 1;

    height: 1px;

    background: #e2e6eb;
}


/* Bottom text */

.hjx-clients-bottom p {
    margin: 0;

    text-align: center;

    font-size: 13px;

    line-height: 1.6;

    font-weight: 600;

    color: #78828e;

    letter-spacing: 0.2px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .hjx-clients-wrapper {
        width: 88%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .hjx-clients-section {
        padding: 85px 0;
    }


    .hjx-clients-wrapper {
        width: 90%;
    }


    .hjx-clients-heading {
        margin-bottom: 45px;
    }


    .hjx-logo-box {
        width: 190px;
        height: 115px;
    }


    .hjx-logo-box img {
        max-width: 145px;
        max-height: 60px;
    }


    .hjx-logo-track {
        gap: 18px;

        animation-duration: 32s;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .hjx-clients-section {
        padding: 70px 0;
    }


    .hjx-clients-wrapper {
        width: 92%;
    }


    /* Heading */

    .hjx-clients-heading {
        width: 100%;

        margin-bottom: 35px;
    }


    .hjx-clients-tag {
        font-size: 11px;

        letter-spacing: 1.6px;

        margin-bottom: 12px;
    }


    .hjx-clients-heading h2 {
        font-size: 34px;

        line-height: 1.15;

        letter-spacing: -0.8px;

        margin-bottom: 15px;
    }


    .hjx-clients-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* Marquee */

    .hjx-logo-marquee {
        padding: 15px 0 25px;
    }


    /* Fade */

    .hjx-logo-marquee::before,
    .hjx-logo-marquee::after {
        width: 50px;
    }


    /* Track */

    .hjx-logo-track {
        gap: 15px;

        animation-duration: 27s;
    }


    /* Cards */

    .hjx-logo-box {
        width: 165px;
        height: 105px;

        padding: 15px;

        border-radius: 13px;
    }


    /* Logos */

    .hjx-logo-box img {
        max-width: 130px;

        max-height: 55px;
    }


    /* Bottom */

    .hjx-clients-bottom {
        width: 100%;

        margin-top: 35px;

        gap: 12px;
    }


    .hjx-clients-bottom>span {
        display: none;
    }


    .hjx-clients-bottom p {
        width: 100%;

        font-size: 11px;

        line-height: 1.6;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .hjx-clients-wrapper {
        width: 94%;
    }


    .hjx-logo-box {
        width: 150px;
        height: 95px;
    }


    .hjx-logo-box img {
        max-width: 115px;
        max-height: 50px;
    }


    .hjx-logo-track {
        gap: 12px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hjx-logo-track {
        animation: none;
    }

}


/* =========================================================
   HAJORAS - OUR CLIENTS SECTION - END
========================================================= */


.hj-pill-logo img {
    height: 45px;
    width: auto;
    display: block;
    object-fit: contain;
}

.hj-pill-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* =========================================
   HAJORAS ABOUT SECTION
========================================= */

.hja-about-section {

    position: relative;

    width: 100%;

    padding: 110px 20px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #f5f7fa 0%,
            #ffffff 50%,
            #f3f5f7 100%);

}


/* =========================================
   MAIN CONTAINER
========================================= */

.hja-about-container {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    gap: 70px;

}


/* =========================================
   LEFT CONTENT
========================================= */

.hja-about-content {

    position: relative;

    z-index: 5;

}


/* =========================================
   LABEL
========================================= */

.hja-about-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 5px 16px;

    margin-bottom: 22px;

    color: #1C79C8;

    background: rgb(238, 247, 255);

    border:
        1px solid rgba(28, 121, 200, 0.25);

    border-radius: 30px;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.8px;

}


.hja-label-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #1C79C8;

}


/* =========================================
   HEADING
========================================= */

.hja-about-heading {

    max-width: 560px;

    margin: 0 0 25px;

    color: #111111;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -0.01em;

}


.hja-about-heading span {

    display: block;

    color: #1C79C8;

}


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

.hja-about-description {

    max-width: 555px;

    margin: 0 0 15px;

    color: #43536b;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================
   BUTTON
========================================= */

.hja-about-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 10px;

    padding: 14px 22px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #1C79C8,
            #1C79C8);

    border-radius: 30px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:
        .3s ease;

}


.hja-about-button i {

    transition:
        transform .3s ease;

}


.hja-about-button:hover {

    color: #ffffff;

    transform:
        translateY(-3px);



}


.hja-about-button:hover i {

    transform:
        translateX(5px);

}


/* =========================================
   RIGHT SIDE IMAGE
========================================= */

.hja-about-image-side {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hja-about-image-box {
    position: relative;
    width: 100%;
    max-width: 650px;
}

.hja-about-image {
    width: 100%;
    height: 550px;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:991px) {

    .hja-about-image-side {
        width: 100%;
        justify-content: center;
        margin-top: 30px;
    }

    .hja-about-image-box {
        max-width: 650px;
    }

    .hja-about-image {
        height: 500px;
    }

    .hja-about-image-badge {
        right: 0;
        width: 250px;
        height: 135px;
    }

    .hja-about-image-badge strong {
        font-size: 42px;
    }

    .hja-about-image-badge span {
        font-size: 12px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767px) {

    .hja-about-image-side {
        margin-top: 25px;
    }

    .hja-about-image {
        height: 430px;
    }

    .hja-about-image-badge {
        right: 10px;
        bottom: 0;

        width: 215px;
        height: 110px;

        border-radius: 14px;
    }

    .hja-about-image-badge strong {
        font-size: 34px;
    }

    .hja-about-image-badge span {
        font-size: 10px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px) {

    .hja-about-image {
        height: 360px;
    }

    .hja-about-image-badge {
        right: 5px;

        width: 180px;
        height: 90px;

        border-radius: 12px;
    }

    .hja-about-image-badge strong {
        font-size: 28px;
        margin-bottom: 5px;
    }

    .hja-about-image-badge span {
        font-size: 8px;
    }

}

/* =========================================
   RIGHT VISUAL
========================================= */

.hja-about-visual {

    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.hja-visual-glow {

    position: absolute;

    width: 370px;

    height: 370px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(255, 106, 10, .14),
            transparent 68%);

    filter: blur(20px);

}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.hja-decoration-circle {

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    border:
        1px solid rgba(28, 121, 200, 0.25);

}


/* =========================================
   MAIN DASHBOARD
========================================= */

.hja-dashboard {

    position: relative;

    width: 390px;

    min-height: 445px;

    padding: 25px;

    background:
        rgba(255, 255, 255, .95);

    border:
        1px solid rgba(28, 121, 200, 0.25);

    border-radius: 28px;

    box-shadow:

        0 30px 70px rgba(24, 31, 38, .12),

        0 10px 30px rgba(255, 106, 10, .06);

    z-index: 5;

    animation:
        hjaDashboardFloat 5s ease-in-out infinite;

}


@keyframes hjaDashboardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


/* =========================================
   DASHBOARD HEADER
========================================= */

.hja-dashboard-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(0, 0, 0, .06);

}


/* =========================================
   BRAND
========================================= */

.hja-dashboard-brand {

    display: flex;

    align-items: center;

    gap: 10px;

}




.hja-brand-text strong {

    display: block;

    color: #252525;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.hja-brand-text small {

    display: block;

    margin-top: 3px;

    color: #929292;

    font-size: 7px;

}


/* =========================================
   STATUS
========================================= */

.hja-dashboard-status {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #777777;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

}


.hja-dashboard-status span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #1C79C8;

    box-shadow:
        0 0 10px rgba(255, 106, 10, .5);

    animation:
        hjaStatusPulse 1.8s infinite;

}


@keyframes hjaStatusPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }

}


/* =========================================
   DASHBOARD INTRO
========================================= */

.hja-dashboard-intro {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 25px;

}


.hja-dashboard-intro small {

    display: block;

    margin-bottom: 7px;

    color: #1C79C8;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
    padding-left: 60px;

}


.hja-dashboard-intro h3 {

    margin: 0;

    color: #171717;

    font-size: 24px;

    line-height: 1.1;

    font-weight: 800;
    padding-left: 60px;

}


.hja-dashboard-intro h3 span {

    display: block;

    color: #1C79C8;

}


.hja-dashboard-icon {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1C79C8;

    background: rgb(238, 247, 255);

    border:
        1px solid rgba(28, 121, 200, 0.25);

    border-radius: 13px;

    font-size: 17px;

}


/* =========================================
   PILLARS
========================================= */

.hja-pillars {

    margin-top: 24px;

}


.hja-pillar {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 11px 12px;

    margin-bottom: 8px;

    background:
        #f8f9fa;

    border:
        1px solid rgba(0, 0, 0, .045);

    border-radius: 13px;

    transition:
        .3s ease;

}


.hja-pillar:hover {

    transform:
        translateX(4px);

    border-color:
        rgba(255, 106, 10, .18);

    background:
        #ffffff;

}


.hja-pillar-active {

    background: rgb(238, 247, 255);

    border:
        1px solid rgba(28, 121, 200, 0.25);

}


.hja-pillar-icon {

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #1C79C8,
            #1C79C8);

    border-radius: 9px;

    font-size: 12px;

}


.hja-pillar-content {

    flex: 1;

}


.hja-pillar-content strong {

    display: block;

    color: #292929;

    font-size: 12px;

    font-weight: 700;

}


.hja-pillar-content span {

    display: block;

    margin-top: 3px;

    color: #909090;

    font-size: 9px;

}


.hja-check {

    color: #1C79C8;

    font-size: 10px;

}


/* =========================================
   PROGRESS BOX
========================================= */

.hja-progress-box {

    margin-top: 17px;

    padding: 14px;

    background:
        #f8f9fa;

    border:
        1px solid rgba(0, 0, 0, .05);

    border-radius: 14px;

}


.hja-progress-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

}


.hja-progress-header small {

    display: block;

    margin-bottom: 4px;

    color: #999999;

    font-size: 8px;

    letter-spacing: 1px;

}


.hja-progress-header strong {

    color: #353535;

    font-size: 11px;

}


.hja-progress-header>b {

    color: #1C79C8;

    font-size: 16px;

}


.hja-progress-track {

    width: 100%;

    height: 5px;

    margin-top: 11px;

    overflow: hidden;

    background:
        #e6e7e8;

    border-radius: 10px;

}


.hja-progress-track span {

    display: block;

    width: 92%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(90deg,
            #1C79C8,
            #1C79C8);

    animation:
        hjaProgress 2s ease forwards;

}


@keyframes hjaProgress {

    from {
        width: 0;
    }

    to {
        width: 92%;
    }

}


.hja-progress-footer {

    display: flex;

    justify-content: space-between;

    margin-top: 7px;

}


.hja-progress-footer span {

    color: #999999;

    font-size: 8px;

}


/* =========================================
   MINI CARDS
========================================= */

.hja-mini-cards {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    margin-top: 10px;

}


.hja-mini-card {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px;

    background:
        #ffffff;

    border:
        1px solid rgba(0, 0, 0, .06);

    border-radius: 11px;

}


.hja-mini-icon {

    width: 29px;

    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1C79C8;

    background: rgb(238, 247, 255);



    border-radius: 8px;

    font-size: 12px;

}


.hja-mini-card strong {

    display: block;

    color: #333333;

    font-size: 10px;

}


.hja-mini-card span {

    display: block;

    margin-top: 2px;

    color: #999999;

    font-size: 8px;

}


/* =========================================
   FLOATING CARDS
========================================= */

.hja-floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 13px;

    background:
        rgba(255, 255, 255, .96);

    border:
        1px solid rgba(28, 121, 200, 0.25);

    border-radius: 13px;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .10);

    z-index: 15;

    backdrop-filter:
        blur(10px);

}


/* =========================================
   FLOATING ICON
========================================= */

.hja-floating-icon {

    width: 35px;

    height: 35px;

    flex: 0 0 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #1C79C8,
            #1C79C8);

    border-radius: 10px;

    font-size: 12px;

}


.hja-floating-content strong {

    display: block;

    color: #292929;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

}


.hja-floating-content span {

    display: block;

    margin-top: 3px;

    color: #909090;

    font-size: 9px;

    white-space: nowrap;

}


/* =========================================
   FLOATING CARD 1
========================================= */

.hja-floating-one {

    top: 95px;

    left: -45px;

    animation:
        hjaFloatOne 4s ease-in-out infinite;

}


/* =========================================
   FLOATING CARD 2
========================================= */

.hja-floating-two {

    top: 235px;

    right: -50px;

    animation:
        hjaFloatTwo 4.5s ease-in-out infinite;

}


/* =========================================
   FLOATING CARD 3
========================================= */

.hja-floating-three {

    bottom: 65px;

    left: -25px;

    animation:
        hjaFloatThree 5s ease-in-out infinite;

}


/* =========================================
   FLOAT ANIMATIONS
========================================= */

@keyframes hjaFloatOne {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


@keyframes hjaFloatTwo {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(9px);
    }

}


@keyframes hjaFloatThree {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-7px);
    }

}


/* =========================================
   FLOATING CHECK
========================================= */

.hja-floating-check {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 18px;

    height: 18px;

    margin-left: 5px;

    color: #ffffff;

    background: #1C79C8;

    border-radius: 50%;

    font-size: 9px;

}


/* =========================================
   DECORATIVE DOTS
========================================= */

.hja-dots {

    position: absolute;

    width: 65px;

    height: 65px;

    opacity: .45;

    background-image:
        radial-gradient(#1C79C8 1.5px,
            transparent 1.5px);

    background-size:
        10px 10px;

}


.hja-dots-top {

    top: 35px;

    right: 0;

}


.hja-dots-bottom {

    bottom: 30px;

    left: 0;

}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .hja-about-section {

        padding: 85px 20px;

    }


    .hja-about-container {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .hja-about-content {

        text-align: center;

        order: 2;

    }


    .hja-about-visual {

        order: 1;

        min-height: 560px;

    }


    .hja-about-heading {

        margin-left: auto;

        margin-right: auto;

    }


    .hja-about-description {

        margin-left: auto;

        margin-right: auto;

    }


    .hja-about-label {

        justify-content: center;

    }


    .hja-about-stats {

        justify-content: center;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .hja-about-section {

        padding: 70px 16px;

    }


    .hja-about-container {

        gap: 45px;

    }


    /* LEFT */

    .hja-about-heading {

        font-size: 36px;

        line-height: 1.12;

        letter-spacing: -1.2px;

    }


    .hja-about-description {

        font-size: 13px;

        line-height: 1.75;

    }


    .hja-about-stats {

        margin-top: 35px;

    }


    .hja-stat {

        min-width: 95px;

        padding-right: 12px;

        margin-right: 12px;

    }


    .hja-stat-number span {

        font-size: 23px;

    }


    .hja-stat-number b {

        font-size: 16px;

    }


    .hja-stat-text {

        font-size: 8px;

    }


    /* RIGHT */

    .hja-about-visual {

        min-height: 485px;

    }


    .hja-decoration-circle {

        width: 330px;

        height: 330px;

    }


    .hja-dashboard {

        width: 310px;

        min-height: 390px;

        padding: 19px;

        border-radius: 23px;

    }


    .hja-brand-icon {

        width: 33px;

        height: 33px;

        font-size: 14px;

    }


    .hja-brand-text strong {

        font-size: 10px;

    }


    .hja-brand-text small {

        font-size: 6px;

    }


    .hja-dashboard-intro {

        margin-top: 20px;

    }


    .hja-dashboard-intro h3 {

        font-size: 20px;

    }


    .hja-dashboard-icon {

        width: 38px;

        height: 38px;

        font-size: 14px;

    }


    .hja-pillar {

        padding: 9px;

    }


    .hja-pillar-icon {

        width: 30px;

        height: 30px;

        flex-basis: 30px;

        font-size: 10px;

    }


    .hja-pillar-content strong {

        font-size: 9px;

    }


    .hja-pillar-content span {

        font-size: 6px;

    }


    .hja-floating-card {

        padding: 8px 10px;

        min-width: 145px;

    }


    .hja-floating-icon {

        width: 30px;

        height: 30px;

        flex-basis: 30px;

        font-size: 10px;

    }


    .hja-floating-content strong {

        font-size: 7px;

    }


    .hja-floating-content span {

        font-size: 6px;

    }


    .hja-floating-one {

        left: -5px;

        top: 65px;

    }


    .hja-floating-two {

        right: -5px;

        top: 200px;

    }


    .hja-floating-three {

        left: 0;

        bottom: 40px;

    }


    .hja-dots-top {

        right: 5px;

    }


    .hja-dots-bottom {

        left: 5px;

    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .hja-about-section {

        padding: 60px 14px;

    }


    .hja-about-heading {

        font-size: 30px;

    }


    .hja-about-label {

        padding: 8px 15px;

        font-size: 10px;

        letter-spacing: 1.4px;

    }


    .hja-about-description {

        font-size: 12.5px;

    }


    .hja-about-visual {

        min-height: 430px;

    }


    .hja-decoration-circle {

        width: 285px;

        height: 285px;

    }


    .hja-dashboard {

        width: 270px;

        min-height: 350px;

        padding: 16px;

    }


    .hja-dashboard-intro h3 {

        font-size: 17px;

    }


    .hja-dashboard-intro small {

        font-size: 6px;

    }


    .hja-pillar {

        margin-bottom: 6px;

        padding: 7px;

    }


    .hja-pillar-icon {

        width: 27px;

        height: 27px;

        flex-basis: 27px;

    }


    .hja-pillar-content strong {

        font-size: 8px;

    }


    .hja-pillar-content span {

        font-size: 5.5px;

    }


    .hja-check {

        font-size: 8px;

    }


    .hja-progress-box {

        margin-top: 12px;

        padding: 10px;

    }


    .hja-mini-card {

        padding: 7px;

    }


    .hja-mini-icon {

        width: 25px;

        height: 25px;

        font-size: 8px;

    }


    .hja-mini-card strong {

        font-size: 7px;

    }


    .hja-mini-card span {

        font-size: 5px;

    }


    .hja-floating-card {

        min-width: 120px;

        max-width: 130px;

        padding: 7px 8px;

    }


    .hja-floating-icon {

        width: 27px;

        height: 27px;

        flex-basis: 27px;

    }


    .hja-floating-content strong {

        font-size: 6.5px;

    }


    .hja-floating-content span {

        font-size: 5.5px;

    }


    .hja-floating-one {

        left: -7px;

        top: 50px;

    }


    .hja-floating-two {

        right: -7px;

        top: 170px;

    }


    .hja-floating-three {

        left: -5px;

        bottom: 25px;

    }


    .hja-about-stats {

        justify-content: space-between;

    }


    .hja-stat {

        min-width: 0;

        padding-right: 8px;

        margin-right: 8px;

    }


    .hja-stat-number span {

        font-size: 20px;

    }


    .hja-stat-text {

        font-size: 7px;

    }

}

/* =========================================
   HAJORAS LOGO INSIDE DASHBOARD
========================================= */

.hja-brand-logo {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    height: 45px;

}


.hja-brand-logo img {

    display: block;

    width: 125px;

    height: auto;

    max-height: 42px;

    object-fit: contain;

}


/* =========================================
   MOBILE LOGO
========================================= */

@media (max-width: 767px) {

    .hja-brand-logo {

        height: 38px;

    }

    .hja-brand-logo img {

        width: 105px;

        max-height: 36px;

    }

}


@media (max-width: 480px) {

    .hja-brand-logo img {

        width: 90px;

        max-height: 32px;

    }

}


/* =========================================
   FOOTER
========================================= */

.hj-featured-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    margin-top: 35px;
}


.hj-featured-footer span {

    width: 65px;

    height: 1px;

    background: #ccd5dc;
}


.hj-featured-footer p {

    margin: 0;

    color: #91a0ad;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 4px;
}


/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1200px) {

    .hj-featured-container {

        width: 84%;
    }


    .hj-featured-copy h2 {

        font-size: 42px;
    }


    .hj-featured-visual {

        transform: scale(.92);

        transform-origin: center;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .hj-featured-container {

        width: 88%;
    }


    .hj-featured-top {

        grid-template-columns: 1fr;

    }


    .hj-featured-copy {

        padding-right: 0;

        text-align: center;
    }


    .hj-featured-label {

        justify-content: center;
    }


    .hj-featured-copy h2 {

        margin-left: auto;

        margin-right: auto;
    }


    .hj-featured-copy>p {

        margin-left: auto;

        margin-right: auto;
    }


    .hj-featured-actions {

        justify-content: center;
    }


    .hj-featured-stats {

        justify-content: center;
    }


    .hj-featured-visual {

        margin-top: 25px;

        transform: scale(.88);

    }


    .hj-solution-cards {

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


    .hj-solution-card:last-child {

        grid-column: 1 / 3;

        max-width: 50%;

        margin: 0 auto;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .hj-featured-section {

        padding: 60px 0;
    }


    .hj-featured-container {

        width: 92%;
    }


    .hj-featured-copy h2 {

        font-size: 32px;

        line-height: 1.18;

        letter-spacing: -.8px;
    }


    .hj-featured-copy>p {

        font-size: 13px;
    }


    .hj-featured-actions {

        flex-direction: column;

        gap: 14px;
    }


    .hj-featured-stats {

        gap: 12px;
    }


    .hj-featured-stat strong {

        font-size: 21px;
    }


    .hj-featured-stat span {

        font-size: 7px;

        text-align: center;
    }


    .hj-featured-visual {

        height: 400px;

        margin-top: 20px;

        margin-left: -20px;

        margin-right: -20px;

        transform: scale(.72);

    }


    .hj-solution-cards {

        grid-template-columns: 1fr;
    }


    .hj-solution-card {

        grid-column: auto !important;

        max-width: none !important;

        min-height: 300px;

    }


    .hj-featured-footer {

        gap: 10px;
    }


    .hj-featured-footer span {

        width: 25px;
    }


    .hj-featured-footer p {

        font-size: 6px;

        letter-spacing: 2px;

        text-align: center;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .hj-featured-copy h2 {

        font-size: 28px;
    }


    .hj-featured-stats {

        gap: 8px;
    }


    .hj-stat-line {

        height: 38px;
    }


    .hj-featured-visual {

        height: 370px;

        transform: scale(.62);

    }

}

/* =========================================
   PEGA CENTER
========================================= */

.hj-visual-center {

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 15;

    width: 145px;
    height: 145px;

    display: flex;

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

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

    border-radius: 50%;

    background:
        radial-gradient(circle at 30% 25%,
            #ffffff,
            #f4f7f9 65%,
            #e7edf1);

    border: 1px solid rgba(28, 121, 200, 0.25);



    animation: hjCenterFloat 4s ease-in-out infinite;
}


/* =========================================
   PEGA LOGO
========================================= */

.hj-center-pega-logo {

    width: 90px;

    height: auto;

    max-height: 90px;

    object-fit: contain;

    display: block;

    transition: transform .35s ease;
}


.hj-visual-center:hover .hj-center-pega-logo {

    transform: scale(1.08);
}


/* =========================================
   FLOATING ANIMATION
========================================= */

@keyframes hjCenterFloat {

    0%,
    100% {

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

    }

    50% {

        transform:
            translate(-50%, -50%) translateY(-8px);

    }

}

/* =========================================
   HAJORAS MOBILE MENU
========================================= */

.hj-mob-menu {

    display: none;

    width: calc(100% - 30px);

    max-width: 1180px;

    margin: 8px auto 0;

    padding: 10px;

    background: #ffffff;

    border: 1px solid rgba(255, 106, 10, 0.18);

    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(22, 11, 7, 0.18);

    box-sizing: border-box;

    overflow: hidden;

    position: relative;

    z-index: 9999;
}


/* =========================================
   OPEN MOBILE MENU
========================================= */

.hj-mob-menu.hj-mob-open {

    display: block;

    animation:
        hjMobMenuOpen .3s ease forwards;
}


@keyframes hjMobMenuOpen {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================
   NORMAL LINKS
========================================= */

.hj-mob-link {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 48px;

    padding: 0 17px;

    box-sizing: border-box;

    color: #333;

    background: transparent;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    border-radius: 30px;

    transition: all .25s ease;
}


.hj-mob-link:hover {

    color: #1C79C8;

    background: #fff3ed;

    transform: translateX(3px);
}


/* =========================================
   DROPDOWN CONTAINER
========================================= */

.hj-mob-dropdown {

    width: 100%;

    position: relative;
}


/* =========================================
   DROPDOWN BUTTON
========================================= */

.hj-mob-dropdown-btn {

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 17px;

    border: 0;

    outline: none;

    background: transparent;

    color: #25201d;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    font-weight: 500;

    text-align: left;

    cursor: pointer;

    border-radius: 30px;

    transition: all .25s ease;
}


.hj-mob-dropdown-btn:hover {

    color: #1C79C8;

    background: rgb(238, 247, 255);
    border: 1px solid rgba(28, 121, 200, 0.25);
    padding-left: 17px;
}


/* =========================================
   ARROW
========================================= */

.hj-mob-dropdown-btn i {

    font-size: 16px;

    color: #55504d;

    transition:
        transform .3s ease,
        color .3s ease;
}


/* =========================================
   ACTIVE DROPDOWN
========================================= */

.hj-mob-dropdown.hj-mob-active .hj-mob-dropdown-btn {

    color: #fff;

    background: #1C79C8;

}


.hj-mob-dropdown.hj-mob-active .hj-mob-dropdown-btn i {

    color: #fff;

    transform: rotate(180deg);
}


/* =========================================
   SUBMENU
========================================= */

.hj-mob-submenu {

    max-height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0 8px;

    opacity: 0;

    transition:
        max-height .35s ease,
        opacity .25s ease,
        padding .3s ease;
}


/* =========================================
   OPEN SUBMENU
========================================= */

.hj-mob-dropdown.hj-mob-active .hj-mob-submenu {

    max-height: 450px;

    padding: 6px 8px 9px;

    opacity: 1;
}


/* =========================================
   SUBMENU LINKS
========================================= */

.hj-mob-submenu a {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 43px;

    padding: 0 14px 0 29px;

    color: #55504d;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    border-radius: 30px;

    transition: all .25s ease;
}


/* Orange dot */

.hj-mob-submenu a::before {

    content: "";

    position: absolute;

    left: 14px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #1C79C8;
}


/* Hover */

.hj-mob-submenu a:hover {

    color: #000;

    background: #fff5f0;

    padding-left: 34px;
}


/* =========================================
   GET STARTED
========================================= */

.hj-mob-cta {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    min-height: 48px;

    margin-top: 8px;

    padding: 0 15px;

    box-sizing: border-box;

    border-radius: 11px;

    background: #1C79C8;

    color: #ffffff !important;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition: all .3s ease;
}


.hj-mob-cta i {

    transition: transform .3s ease;
}


.hj-mob-cta:hover {

    background: #e85c05;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(255, 106, 10, .25);
}


.hj-mob-cta:hover i {

    transform: translateX(4px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

    .hj-mob-menu {

        display: none;

    }

    .hj-mob-menu.hj-mob-open {

        display: block;

    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .hj-mob-menu {

        width: calc(100% - 20px);

        padding: 8px;

        margin-top: 7px;

        border-radius: 20px;

    }


    .hj-mob-link,
    .hj-mob-dropdown-btn {

        min-height: 47px;

        padding-left: 15px;

        padding-right: 15px;

    }


    .hj-mob-submenu a {

        min-height: 40px;

        font-size: 11px;

    }

}

/* =========================================
   CAREER PAGE — HERO VISIBLE BEHIND HEADER
========================================= */

/* Header itself must be completely transparent */
body.hj-career-page .hj-pill-header,
body.hj-career-page header.hj-pill-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Remove header overlays */
body.hj-career-page .hj-pill-header::before,
body.hj-career-page .hj-pill-header::after {
    content: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}


/* IMPORTANT:
   Do NOT make the navigation transparent.
   Keep your existing mobile white pill.
*/


/* Hero must start at the top */
body.hj-career-page .ve-page-hero {
    margin-top: 0 !important;
}

/* =========================================================
   HAJORAS CAREERS
========================================================= */

.hz-career-intro-section,
.hz-jobs-section,
.hz-more-section {
    padding: 95px 0;
    background: #ffffff;
}

.hz-career-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   COMMON PILL
========================================================= */

.hz-career-pill,
.hz-modal-label {
    display: inline-flex;
    align-items: center;

    padding: 8px 18px;

    border: 1px solid rgba(255, 106, 10, .35);
    border-radius: 30px;
    border-color: rgba(28, 121, 200, 0.25);
    background: rgb(238, 247, 255);

    color: #1C79C8;

    font-family: "DM sans", sans-serif;
    font-size: 12px;
    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================================
   INTRO
========================================================= */

.hz-career-intro-content {
    max-width: 850px;
    margin-bottom: 55px;
}

.hz-career-intro-content h2,
.hz-jobs-heading h2,
.hz-culture-content h2,
.hz-more-heading h2 {
    margin: 22px 0 0;

    color: #160b07;

    font-family: "Nunito", sans-serif;
    font-size: 42px;
    font-weight: 900;

    line-height: 1.18;
    letter-spacing: -.8px;
}

.hz-career-intro-content h2 span,
.hz-jobs-heading h2 span,
.hz-culture-content h2 span,
.hz-more-heading h2 span {
    display: block;
    color: #1C79C8;
}

.hz-career-intro-content p,
.hz-jobs-heading p,
.hz-culture-content p,
.hz-more-heading p {
    max-width: 800px;

    margin: 23px 0 0;

    color: #737d87;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.85;
}


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

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

.hz-career-benefit {
    padding: 28px 25px;

    background: #ffffff;

    border: 1px solid #e8ecef;
    border-radius: 18px;

    transition: .3s ease;
}

.hz-career-benefit:hover {
    transform: translateY(-5px);

    border-color: rgba(28, 121, 200, 0.25);

    box-shadow: 0 18px 35px rgba(22, 11, 7, .07);
}

.hz-benefit-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 24px;
}

.hz-benefit-top>span {
    color: #c8cfd4;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.hz-benefit-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 12px;

    background: #fff3ec;

    color: #1C79C8;

    font-size: 18px;
}

.hz-career-benefit h3 {
    margin: 0 0 10px;

    color: #160b07;

    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.hz-career-benefit p {
    margin: 0;

    color: #737d87;

    font-family: "Inter", sans-serif;
    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   JOBS SECTION
========================================================= */

.hz-jobs-section {
    background: #f7f8fa;
}

.hz-jobs-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 40px;
}

.hz-jobs-heading h2 {
    margin-top: 20px;
}

.hz-job-total {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hz-job-total strong {
    color: #1C79C8;

    font-family: "DM Sans", sans-serif;
    font-size: 34px;
    font-weight: 700;
}

.hz-job-total span {
    color: #737d87;

    font-family: "Inter", sans-serif;
    font-size: 13px;
}


/* =========================================================
   FILTERS
========================================================= */

.hz-job-filters {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr auto;

    gap: 10px;

    margin-bottom: 25px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #e4e8eb;

    border-radius: 14px;
}

.hz-job-search {
    position: relative;
}

.hz-job-search i {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #9aa3aa;

    font-size: 12px;
}

.hz-job-search input,
.hz-job-filters select {
    width: 100%;
    height: 43px;

    box-sizing: border-box;

    padding: 0 13px;

    border: 1px solid #e2e6e9;

    border-radius: 8px;

    background: #fafbfc;

    color: #4c5660;

    font-family: "Inter", sans-serif;
    font-size: 13px;

    outline: none;
}

.hz-job-search input {
    padding-left: 38px;
}

.hz-job-search input:focus,
.hz-job-filters select:focus {
    border-color: #1C79C8;

    background: #ffffff;
}

.hz-clear-filter {
    height: 43px;

    padding: 0 16px;

    border: 1px solid #1C79C8;

    border-radius: 8px;

    background: #ffffff;

    color: #1C79C8;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: .25s ease;
}

.hz-clear-filter:hover {
    background: #1C79C8;
    color: #ffffff;
}


/* =========================================================
   JOB LIST
========================================================= */

.hz-job-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.hz-job-card {
    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    gap: 25px;

    padding: 27px 30px;

    background: #ffffff;

    border: 1px solid #e4e8eb;

    border-radius: 18px;

    transition: .3s ease;
}

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

    border-color: rgba(28, 121, 200, 0.25);

    box-shadow: 0 18px 35px rgba(22, 11, 7, .07);
}

.hz-job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 9px;
}

.hz-job-tag {
    padding: 5px 9px;

    border-radius: 5px;

    background: rgb(238, 247, 255);

    color: #1C79C8;

    font-family: "DM sans", sans-serif;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: .7px;
}

.hz-job-title {
    margin: 0 0 8px;

    color: #160b07;

    font-family: "DM Sans", sans-serif;

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

.hz-job-description {
    max-width: 760px;

    margin: 0 0 13px;

    color: #737d87;

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

    font-size: 14px;

    line-height: 1.7;
}

.hz-job-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 17px;
}

.hz-job-meta span {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #7b858d;

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

    font-size: 11px;
}

.hz-job-meta i {
    color: #1C79C8;
}

.hz-job-actions {
    display: flex;
    gap: 8px;
}

.hz-view-job,
.hz-apply-job {
    height: 40px;

    padding: 0 16px;

    border-radius: 8px;

    font-family: "Nunito", sans-serif;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: .25s ease;
}

.hz-view-job {
    background: #ffffff;

    border: 1px solid #dce2e6;

    color: #3c454d;
}

.hz-view-job:hover {
    border-color: #1C79C8;
    color: #1C79C8;
}

.hz-apply-job {
    border: 1px solid #1C79C8;

    background: #1C79C8;

    color: #ffffff;
}

.hz-apply-job:hover {
    background: #155F9F;

}


/* =========================================================
   NO JOBS
========================================================= */

.hz-no-jobs {
    display: none;

    text-align: center;

    padding: 55px 25px;

    background: #ffffff;

    border: 1px dashed #d9dfe3;

    border-radius: 18px;
}

.hz-no-jobs-icon {
    width: 52px;
    height: 52px;

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

    margin: 0 auto 16px;

    border-radius: 14px;

    background: #fff3ec;

    color: #1C79C8;

    font-size: 19px;
}

.hz-no-jobs h3 {
    margin: 0 0 8px;

    color: #160b07;

    font-family: "DM Sans", sans-serif;

    font-size: 20px;
}

.hz-no-jobs p {
    max-width: 550px;

    margin: 0 auto 20px;

    color: #737d87;

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

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CULTURE
========================================================= */

.hz-career-culture {
    padding: 95px 0;

    background: #ffffff;
}

.hz-culture-box {
    display: grid;

    grid-template-columns: 1fr .8fr;

    min-height: 420px;

    overflow: hidden;

    border-radius: 25px;

    background: #160b07;
}

.hz-culture-content {
    padding: 65px 60px;
}

.hz-culture-content h2 {
    color: #ffffff;
}

.hz-culture-content p {
    max-width: 600px;
    color: #c4bcb8;
}

.hz-culture-points {
    display: grid;

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

    gap: 14px;

    margin-top: 28px;
}

.hz-culture-points div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #ffffff;

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

    font-size: 12px;
}

.hz-culture-points i {
    color: #1C79C8;
}

.hz-culture-visual {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(circle at center,
            rgba(255, 106, 10, .22),
            transparent 60%);
}

.hz-culture-circle {
    position: absolute;

    width: 300px;
    height: 300px;

    top: 50%;
    left: 50%;

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

    border: 1px solid rgba(255, 106, 10, .3);

    border-radius: 50%;
}

.hz-culture-card {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 12px 17px;

    background: rgba(255, 255, 255, .96);

    border-radius: 10px;

    color: #160b07;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 600;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}

.hz-culture-card i {
    color: #1C79C8;
}

.hz-culture-card-one {
    top: 24%;
    left: 16%;
}

.hz-culture-card-two {
    top: 48%;
    right: 10%;
}

.hz-culture-card-three {
    bottom: 18%;
    left: 25%;
}


/* =========================================================
   MORE SECTION
========================================================= */

.hz-more-heading {
    max-width: 800px;

    margin-bottom: 45px;
}

.hz-more-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.hz-more-item {
    padding: 28px;

    border-bottom: 1px solid #e3e7ea;

    transition: .25s ease;
}

.hz-more-item:hover {
    border-bottom-color: #1C79C8;
}

.hz-more-item i {
    margin-bottom: 20px;

    color: #1C79C8;

    font-size: 21px;
}

.hz-more-item h3 {
    margin: 0 0 9px;

    color: #160b07;

    font-family: "DM Sans", sans-serif;

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

.hz-more-item p {
    margin: 0;

    color: #737d87;

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

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.hz-career-cta {
    padding: 0 0 95px;

    background: #ffffff;
}

.hz-career-cta-box {
    display: flex;

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

    gap: 40px;

    padding: 55px 60px;

    border-radius: 24px;

    background: linear-gradient(135deg, var(--ve-dark) 0%, var(--ve-navy) 100%);
}

.hz-dark-pill {
    background: rgb(238, 247, 255);
}

.hz-career-cta-box h2 {
    margin: 20px 0 0;

    color: #ffffff;

    font-family: "nunito", sans-serif;

    font-size: 42px;
    font-weight: 900;

    line-height: 1;
}

.hz-career-cta-box h2 span {
    color: #1C79C8;
}

.hz-career-cta-box p {
    max-width: 650px;

    margin: 18px 0 0;

    color: #c4bcb8;

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

    font-size: 14px;

    line-height: 1.8;
}

.hz-general-apply {
    display: inline-flex;

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

    gap: 9px;

    flex-shrink: 0;

    padding: 13px 20px;

    border: 1px solid #1C79C8;

    border-radius: 8px;

    background: #1C79C8;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    transition: .3s ease;
}

.hz-general-apply:hover {
    background: #155F9F;

    transform: translateY(-2px);
}

.hz-career-cta {
    width: 100%;
    padding: 0;
    overflow: hidden
}

.hz-career-cta .hz-career-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0
}

.hz-career-cta-box {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    padding: 55px 8%
}

/* =========================================================
   MODALS
========================================================= */

.hz-job-modal,
.hz-application-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

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

    padding: 20px;

    box-sizing: border-box;

    background: rgba(22, 11, 7, .76);

    backdrop-filter: blur(6px);
}

.hz-job-modal.active,
.hz-application-modal.active {
    display: flex;
}

.hz-job-modal-box,
.hz-application-box {
    position: relative;

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

    max-height: 92vh;

    overflow-y: auto;

    padding: 42px;

    box-sizing: border-box;

    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 30px 80px rgba(0, 0, 0, .3);

    animation: hzModalIn .3s ease;
}

@keyframes hzModalIn {

    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

.hz-modal-close {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 36px;
    height: 36px;

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

    border: 1px solid #e0e5e8;

    border-radius: 50%;

    background: #ffffff;

    color: #68727b;

    cursor: pointer;

    transition: .25s ease;
}

.hz-modal-close:hover {
    color: #ffffff;

    background: #1C79C8;

    border-color: #1C79C8;

    transform: rotate(90deg);
}


/* =========================================================
   JOB DETAILS
========================================================= */

.hz-job-modal-box h2 {
    margin: 18px 0;

    color: #160b07;

    font-family: "DM Sans", sans-serif;

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

.hz-detail-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 30px;
}

.hz-detail-meta span {
    padding: 7px 10px;

    border-radius: 6px;

    background: #fff3ec;

    color: #1C79C8;

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

    font-size: 11px;
}

.hz-detail-content h4 {
    margin: 24px 0 9px;

    color: #160b07;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    letter-spacing: .8px;
}

.hz-detail-content p,
.hz-detail-content li {
    color: #737d87;

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

    font-size: 14px;

    line-height: 1.75;
}

.hz-detail-content ul {
    margin: 0;
    padding-left: 18px;
}

.hz-detail-skills {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.hz-detail-skills span {
    padding: 6px 10px;

    border-radius: 6px;

    background: #f5f6f7;

    color: #525c64;

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

    font-size: 10px;
}

.hz-detail-bottom {
    display: flex;

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

    gap: 20px;

    margin-top: 30px;

    padding-top: 22px;

    border-top: 1px solid #e7eaed;
}

.hz-detail-bottom span {
    color: #737d87;

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

    font-size: 12px;
}

.hz-detail-bottom button {
    padding: 12px 18px;

    border: 0;

    border-radius: 8px;

    background: #1C79C8;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}


/* =========================================================
   APPLICATION HEADER
========================================================= */

.hz-application-header {
    max-width: 650px;

    margin-bottom: 28px;

    padding-right: 30px;
}

.hz-application-header h2 {
    margin: 18px 0 10px;

    color: #160b07;

    font-family: "DM Sans", sans-serif;

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

.hz-application-header h2 span {
    color: #1C79C8;
}

.hz-application-header p {
    margin: 0;

    color: #737d87;

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

    font-size: 14px;

    line-height: 1.75;
}


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

.hz-form-grid {
    display: grid;

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

    gap: 15px;
}

.hz-form-field {
    margin-bottom: 17px;
}

.hz-form-field label {
    display: block;

    margin-bottom: 7px;

    color: #303940;

    font-family: "DM Sans", sans-serif;

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

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

    box-sizing: border-box;

    padding: 12px 13px;

    border: 1px solid #dfe4e7;

    border-radius: 8px;

    outline: none;

    background: #fafbfc;

    color: #303940;

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

    font-size: 12px;

    transition: .25s ease;
}

.hz-form-field textarea {
    resize: vertical;
}

.hz-form-field input:focus,
.hz-form-field select:focus,
.hz-form-field textarea:focus {
    border-color: #1C79C8;

    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(255, 106, 10, .08);
}


/* =========================================================
   UPLOAD
========================================================= */

.hz-upload-area input {
    display: none;
}

.hz-upload-label {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px;

    border: 1px dashed rgba(255, 106, 10, .5);

    border-radius: 9px;

    background: #fffaf7;

    cursor: pointer;

    transition: .25s ease;
}

.hz-upload-label:hover {
    border-color: #1C79C8;

    background: #fff3ed;
}

.hz-upload-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 9px;

    background: #1C79C8;

    color: #ffffff;
}

.hz-upload-label strong {
    display: block;

    margin-bottom: 3px;

    color: #303940;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;
}

.hz-upload-label span,
.hz-upload-label small {
    display: block;

    color: #8b949b;

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

    font-size: 9px;
}

.hz-upload-label small {
    margin-top: 3px;
}

.hz-upload-arrow {
    margin-left: auto;

    color: #1C79C8;
}


/* =========================================================
   CONSENT
========================================================= */

.hz-consent {
    margin: 4px 0 18px;
}

.hz-consent label {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    color: #737d87;

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

    font-size: 13px;

    line-height: 1.5;

    cursor: pointer;
}

.hz-consent input {
    accent-color: #1C79C8;
}


/* =========================================================
   SUBMIT
========================================================= */

.hz-submit-application {
    width: 100%;

    padding: 14px 20px;

    display: flex;

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

    gap: 9px;

    border: 0;

    border-radius: 8px;

    background: #1C79C8;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: .3s ease;
}

.hz-submit-application:hover {
    background: #e95c05;

    box-shadow: 0 8px 20px rgba(255, 106, 10, .2);
}


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

.hz-application-success {
    display: none;

    text-align: center;

    padding: 45px 15px 25px;
}

.hz-application-success.active {
    display: block;
}

.hz-success-icon {
    width: 65px;
    height: 65px;

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

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #fff3ec;

    color: #1C79C8;

    font-size: 25px;
}

.hz-application-success h2 {
    margin: 0 0 12px;

    color: #160b07;

    font-family: "DM Sans", sans-serif;

    font-size: 25px;
}

.hz-application-success h2 span {
    color: #1C79C8;
}

.hz-application-success p {
    max-width: 560px;

    margin: 0 auto 25px;

    color: #737d87;

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

    font-size: 14px;

    line-height: 1.8;
}

.hz-application-success button {
    padding: 12px 20px;

    border: 0;

    border-radius: 8px;

    background: #1C79C8;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
}


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

@media (max-width: 1100px) {

    .hz-career-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hz-job-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    .hz-job-search {
        grid-column: 1 / -1;
    }

    .hz-culture-box {
        grid-template-columns: 1fr;
    }

    .hz-culture-visual {
        min-height: 300px;
    }

}


@media (max-width: 767px) {

    .hz-career-intro-section,
    .hz-jobs-section,
    .hz-more-section {
        padding: 65px 0;
    }

    .hz-career-container {
        width: 92%;
    }

    .hz-career-intro-content h2,
    .hz-jobs-heading h2,
    .hz-culture-content h2,
    .hz-more-heading h2 {
        font-size: 31px;

        line-height: 1.22;
    }

    .hz-career-intro-content p,
    .hz-jobs-heading p,
    .hz-culture-content p,
    .hz-more-heading p {
        font-size: 14px;
    }

    .hz-career-benefits-grid {
        grid-template-columns: 1fr;
    }

    .hz-jobs-heading {
        display: block;
    }

    .hz-job-total {
        margin-top: 18px;
    }

    .hz-job-filters {
        grid-template-columns: 1fr;
    }

    .hz-job-search {
        grid-column: auto;
    }

    .hz-job-card {
        grid-template-columns: 1fr;

        padding: 23px 20px;
    }

    .hz-job-actions {
        width: 100%;
    }

    .hz-view-job,
    .hz-apply-job {
        flex: 1;
    }

    .hz-culture-content {
        padding: 45px 25px;
    }

    .hz-culture-points {
        grid-template-columns: 1fr;
    }

    .hz-culture-visual {
        min-height: 270px;
    }

    .hz-more-grid {
        grid-template-columns: 1fr;
    }

    .hz-career-cta {
        padding-bottom: 65px;
    }

    .hz-career-cta-box {
        display: block;

        padding: 40px 25px;
    }

    .hz-career-cta-box h2 {
        font-size: 29px;
    }

    .hz-cta-button {
        width: 100%;
        margin-top: 25px;
    }

    .hz-job-modal,
    .hz-application-modal {
        padding: 10px;
    }

    .hz-job-modal-box,
    .hz-application-box {
        max-height: 95vh;

        padding: 32px 20px;

        border-radius: 18px;
    }

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

    .hz-detail-bottom {
        display: block;
    }

    .hz-detail-bottom button {
        width: 100%;
        margin-top: 15px;
    }

}

/* =========================================================
   HAJORAS — AGILE MANAGEMENT
========================================================= */

.hz-agile-page {
    --hz-orange: #1C79C8;
    --hz-dark: #17110e;
    --hz-text: #17110e;
    --hz-muted: #667085;
    --hz-light: #fafafa;
    --hz-warm: #fff8f3;
    --hz-white: #ffffff;
    --hz-light-orange: #fff1e8;
    --hz-border: #eaeaea;

    color: var(--hz-text);
    background: var(--hz-white);
    font-family: "Inter", sans-serif;
    overflow: hidden;
}

.hz-agile-page *,
.hz-agile-page *::before,
.hz-agile-page *::after {
    box-sizing: border-box;
}

.hz-agile-page h1,
.hz-agile-page h2,
.hz-agile-page h3,
.hz-agile-page h4,
.hz-agile-page strong {
    font-family: "Nunito", sans-serif;
}

.hz-agile-container {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

.hz-agile-page p {
    color: var(--hz-muted);
    font-size: 15px;
    line-height: 1.85;
}

.hz-agile-page a {
    text-decoration: none;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.hz-agile-breadcrumb {
    padding: 22px 0;
    background: #fff;
    border-bottom: 1px solid var(--hz-border);
}

.hz-agile-breadcrumb span,
.hz-agile-breadcrumb strong,
.hz-agile-breadcrumb i {
    font-size: 13px;
    font-style: normal;
}

.hz-agile-breadcrumb span {
    color: #98a2b3;
}

.hz-agile-breadcrumb i {
    padding: 0 8px;
    color: #c5c5c5;
}

.hz-agile-breadcrumb strong {
    color: var(--hz-orange);
}


/* =========================================================
   COMMON
========================================================= */

.hz-agile-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid rgba(255, 106, 10, .30);
    border-radius: 50px;
    background: var(--hz-light-orange);
    color: var(--hz-orange);
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.hz-section-heading {
    max-width: 800px;
    margin-bottom: 55px;
}

.hz-section-heading h2 {
    margin: 20px 0 16px;
    font-size: 42px;
    line-height: 1.13;
    letter-spacing: -1.5px;
    font-weight: 900;
}

.hz-section-heading h2 span {
    color: var(--hz-orange);
}

.hz-section-heading>p {
    max-width: 720px;
}

.hz-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hz-center>p {
    margin-left: auto;
    margin-right: auto;
}


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

.hz-agile-hero {
    position: relative;
    padding: 80px 0 105px;
    background:
        radial-gradient(circle at 85% 50%, rgba(255, 106, 10, .07), transparent 32%),
        #fff;
}

.hz-agile-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.hz-agile-hero-content h1 {
    margin: 22px 0;
    font-size: clamp(48px, 5.7vw, 78px);
    line-height: 1.03;
    letter-spacing: -3px;
}

.hz-agile-hero-content h1 span {
    color: var(--hz-orange);
}

.hz-agile-hero-content p {
    max-width: 620px;
    margin-bottom: 32px;
    font-size: 17px;
    line-height: 1.8;
}

.hz-agile-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hz-agile-btn-primary,
.hz-agile-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 23px;
    border-radius: 11px;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: .3s ease;
}

.hz-agile-btn-primary {
    color: #fff;
    background: var(--hz-orange);
}

.hz-agile-btn-primary:hover {
    transform: translateY(-3px);
}

.hz-agile-btn-primary span {
    transition: transform .3s ease;
}

.hz-agile-btn-primary:hover span {
    transform: translateX(4px);
}

.hz-agile-btn-secondary {
    color: var(--hz-dark);
    background: #fff;
    border: 1px solid var(--hz-border);
}

.hz-agile-btn-secondary:hover {
    border-color: var(--hz-orange);
    color: var(--hz-orange);
}


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

.hz-agile-hero-visual {
    position: relative;
    width: min(540px, 100%);
    height: 500px;
    margin: auto;
}

.hz-agile-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 175px;
    height: 175px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    color: #fff;
    background: var(--hz-dark);
    box-shadow:
        0 0 0 13px rgba(255, 106, 10, .08),
        0 25px 70px rgba(23, 17, 14, .20);
}

.hz-agile-core strong {
    position: relative;
    z-index: 2;
    color: var(--hz-orange);
    font-size: 26px;
}

.hz-agile-core small {
    position: relative;
    z-index: 2;
    margin-top: 5px;
    color: #d0cbc8;
    font-size: 10px;
}

.hz-core-ring {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 106, 10, .55);
    border-radius: 50%;
}

.hz-agile-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(255, 106, 10, .22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.hz-orbit-one {
    width: 330px;
    height: 330px;
    animation: hzOrbit 18s linear infinite;
}

.hz-orbit-two {
    width: 455px;
    height: 455px;
    border-color: rgba(23, 17, 14, .10);
    animation: hzOrbitReverse 25s linear infinite;
}

@keyframes hzOrbit {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes hzOrbitReverse {
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

.hz-agile-node {
    position: absolute;
    z-index: 8;
    min-width: 100px;
    padding: 13px 16px;
    border: 1px solid var(--hz-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(23, 17, 14, .08);
    text-align: center;
    animation: hzFloat 4s ease-in-out infinite;
}

.hz-agile-node span {
    display: block;
    margin-bottom: 3px;
    color: var(--hz-orange);
    font-size: 9px;
    font-weight: 700;
}

.hz-agile-node strong {
    font-size: 11px;
    letter-spacing: .5px;
}

.hz-node-plan {
    top: 35px;
    left: 50px;
}

.hz-node-build {
    top: 80px;
    right: 30px;
    animation-delay: .5s;
}

.hz-node-test {
    right: 0;
    bottom: 95px;
    animation-delay: 1s;
}

.hz-node-review {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 1.5s;
}

.hz-node-improve {
    bottom: 90px;
    left: 0;
    animation-delay: 2s;
}

.hz-node-deliver {
    top: 115px;
    left: 10px;
    animation-delay: 2.5s;
}

@keyframes hzFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


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

.hz-agile-overview {
    padding: 115px 0;
    background: var(--hz-light);
}

.hz-overview-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

.hz-overview-text {
    padding-top: 10px;
}

.hz-overview-text p {
    margin: 0 0 25px;
    font-size: 17px;
}

.hz-metric-stack {
    display: grid;
    gap: 14px;
}

.hz-metric-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 18px;
    padding: 27px;
    border: 1px solid var(--hz-border);
    border-radius: 18px;
    background: #fff;
    transition: .3s ease;
}

.hz-metric-card:hover {
    border-color: rgba(255, 106, 10, .35);
    transform: translateX(5px);
}

.hz-metric-number {
    color: var(--hz-orange);
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.hz-metric-card h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.hz-metric-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
}




/* =========================================================
   WHY HAJORAS
========================================================= */

.hz-why-section {
    padding: 120px 0;
    background: var(--hz-warm);
}

.hz-why-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: center;
}

.hz-why-content h2 {
    margin: 20px 0;
    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.12;
}

.hz-why-content h2 span {
    color: var(--hz-orange);
}

.hz-why-content p {
    margin-bottom: 30px;
}

.hz-why-list {
    display: grid;
    gap: 12px;
}

.hz-why-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--hz-border);
    border-radius: 15px;
    background: #fff;
}

.hz-why-item>span {
    color: var(--hz-orange);
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
}

.hz-why-item h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.hz-why-item p {
    margin: 0;
    font-size: 13px;
}


/* =========================================================
   FAQ
========================================================= */

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

.hz-faq-list {
    max-width: 900px;
    margin: auto;
}

.hz-faq-item {
    border-bottom: 1px solid var(--hz-border);
}

.hz-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 25px 5px;
    border: 0;
    background: transparent;
    color: var(--hz-dark);
    cursor: pointer;
    text-align: left;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.hz-faq-question b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--hz-orange);
    background: var(--hz-light-orange);
    font-size: 18px;
}

.hz-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: .35s ease;
}

.hz-faq-answer p {
    overflow: hidden;
    margin: 0;
    padding: 0 45px 0 5px;
    font-size: 13px;
}

.hz-faq-item.active .hz-faq-answer {
    grid-template-rows: 1fr;
}

.hz-faq-item.active .hz-faq-answer p {
    padding-bottom: 25px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.hz-agile-final-cta {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    background: var(--hz-orange);
}

.hz-cta-inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hz-cta-label {
    color: rgba(255, 255, 255, .75);
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.hz-cta-inner h2 {
    max-width: 750px;
    margin: 12px 0;
    color: #fff;
    font-size: clamp(32px, 4vw, 53px);
    line-height: 1.12;
}

.hz-cta-inner h2 strong {
    color: var(--hz-dark);
}

.hz-cta-inner p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
}

.hz-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 205px;
}

.hz-cta-white,
.hz-cta-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    transition: .3s ease;
}

.hz-cta-white {
    gap: 10px;
    color: var(--hz-dark);
    background: #fff;
}

.hz-cta-white:hover {
    transform: translateY(-3px);
}

.hz-cta-outline {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
}

.hz-cta-outline:hover {
    color: var(--hz-dark);
    background: #fff;
}

.hz-cta-shape {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
}

.hz-cta-shape-one {
    width: 400px;
    height: 400px;
    top: -230px;
    right: -100px;
}

.hz-cta-shape-two {
    width: 250px;
    height: 250px;
    bottom: -170px;
    left: 8%;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.hz-visible {
    opacity: 1;
    transform: translateY(0);
}


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

@media (max-width: 1100px) {

    .hz-agile-hero-grid {
        gap: 35px;
    }

    .hz-agile-hero-content h1 {
        font-size: 58px;
    }

    .hz-challenge-grid,
    .hz-core-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hz-capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hz-outcomes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hz-agile-cycle {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 20px;
    }

    .hz-cycle-line {
        display: none;
    }
}


@media (max-width: 800px) {

    .hz-agile-container {
        width: min(100% - 32px, 680px);
    }

    .hz-agile-breadcrumb {
        padding: 18px 0;
    }

    .hz-agile-hero {
        padding: 60px 0 75px;
    }

    .hz-agile-hero-grid {
        grid-template-columns: 1fr;
    }

    .hz-agile-hero-content {
        text-align: center;
    }

    .hz-agile-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hz-agile-hero-actions {
        justify-content: center;
    }

    .hz-agile-hero-visual {
        height: 420px;
        margin-top: 15px;
    }

    .hz-agile-core {
        width: 145px;
        height: 145px;
    }

    .hz-orbit-one {
        width: 270px;
        height: 270px;
    }

    .hz-orbit-two {
        width: 370px;
        height: 370px;
    }

    .hz-overview-grid,
    .hz-collaboration-grid,
    .hz-why-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hz-challenge-grid,
    .hz-capability-grid,
    .hz-core-grid,
    .hz-usecase-grid,
    .hz-benefits-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hz-outcomes-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hz-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .hz-cta-actions {
        flex-direction: row;
        width: 100%;
    }

    .hz-cta-white,
    .hz-cta-outline {
        flex: 1;
    }
}


@media (max-width: 560px) {

    .hz-agile-container {
        width: calc(100% - 28px);
    }

    .hz-section-heading {
        margin-bottom: 38px;
    }

    .hz-section-heading h2 {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .hz-agile-hero-content h1 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .hz-agile-hero-content p {
        font-size: 14px;
    }

    .hz-agile-hero-visual {
        height: 350px;
    }

    .hz-agile-node {
        min-width: 78px;
        padding: 9px 8px;
    }

    .hz-agile-node strong {
        font-size: 9px;
    }

    .hz-node-plan {
        left: 0;
        top: 25px;
    }

    .hz-node-build {
        right: 0;
        top: 45px;
    }

    .hz-node-test {
        right: 0;
        bottom: 70px;
    }

    .hz-node-review {
        bottom: 0;
    }

    .hz-node-improve {
        bottom: 70px;
        left: 0;
    }

    .hz-node-deliver {
        top: 90px;
        left: 0;
    }

    .hz-challenge-grid,
    .hz-capability-grid,
    .hz-core-grid,
    .hz-usecase-grid,
    .hz-outcomes-grid {
        grid-template-columns: 1fr;
    }

    .hz-metric-card {
        grid-template-columns: 55px 1fr;
        padding: 22px;
    }

    .hz-agile-cycle {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hz-cycle-item {
        display: grid;
        grid-template-columns: 45px 20px 1fr;
        align-items: start;
        column-gap: 12px;
        padding: 5px 0;
    }

    .hz-cycle-item>span {
        margin: 0;
    }

    .hz-cycle-dot {
        margin: 0;
    }

    .hz-cycle-item h3 {
        margin: 0 0 5px;
    }

    .hz-cycle-item p {
        grid-column: 3;
    }

    .hz-lifecycle {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        overflow: visible;
    }

    .hz-life-item,
    .hz-life-item:first-child,
    .hz-life-item:last-child {
        display: grid;
        grid-template-columns: 45px 1fr;
        align-items: center;
        text-align: left;
        border-radius: 10px;
    }

    .hz-life-item span {
        margin: 0;
    }

    .hz-life-arrow {
        display: none;
    }

    .hz-collaboration-visual {
        height: 400px;
    }

    .hz-business-core {
        width: 115px;
        height: 115px;
        font-size: 10px;
    }

    .hz-collaboration-visual::before {
        width: 220px;
        height: 220px;
    }

    .hz-collaboration-visual::after {
        width: 330px;
        height: 330px;
    }

    .hz-team-node {
        padding: 8px 9px;
        font-size: 8px;
    }

    .hz-team-stake {
        left: 0;
        top: 210px;
    }

    .hz-team-tech {
        right: 0;
        top: 210px;
    }

    .hz-collaboration-points {
        grid-template-columns: 1fr;
    }

    .hz-cta-actions {
        flex-direction: column;
    }

    .hz-cta-inner h2 {
        font-size: 34px;
    }

    .hz-faq-question {
        gap: 15px;
        font-size: 13px;
    }

    .hz-faq-answer p {
        padding-right: 10px;
    }
}

/* =========================================================
   HAJORAS AGILE PROCESS
========================================================= */

.hj-process-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    padding: 35px 0 10px;
    width: 100%;
}


/* Connecting Line */

.hj-process-line {
    position: absolute;
    top: 76px;
    left: 7%;
    right: 7%;
    height: 1px;
    background: rgba(255, 106, 10, 0.22);
    z-index: 1;
}


/* Process Step */

.hj-process-step {
    position: relative;
    z-index: 2;
    min-width: 0;
    transition: all 0.3s ease;
}


/* Number */

.hj-process-number {
    display: block;
    margin-bottom: 18px;

    color: #1C79C8;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


/* Dot */

.hj-process-dot {
    position: relative;

    width: 15px;
    height: 15px;

    margin-bottom: 24px;

    border: 3px solid #17110e;
    border-radius: 50%;

    background: #7b716c;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25);

    transition: all 0.3s ease;
}


/* Active Dot */

.hj-process-active .hj-process-dot {
    background: #1C79C8;

    box-shadow:
        0 0 0 5px rgba(255, 106, 10, 0.12);
}


/* Hover */

.hj-process-step:hover .hj-process-dot {
    background: #1C79C8;

    box-shadow:
        0 0 0 5px rgba(255, 106, 10, 0.12);
}


/* Heading */

.hj-process-step h3 {
    margin: 0 0 9px;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;

    line-height: 1.3;
}


/* Description */

.hj-process-step p {
    margin: 0;

    color: #aaa3a0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.75;
}


/* Hover Step */

.hj-process-step:hover {
    transform: translateY(-4px);
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 1000px) {

    .hj-process-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 45px 25px;
    }

    .hj-process-line {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .hj-process-track {
        display: flex;
        flex-direction: column;
        gap: 0;

        padding: 10px 0;
    }

    .hj-process-step {
        display: grid;

        grid-template-columns: 45px 22px 1fr;
        column-gap: 12px;

        padding-bottom: 35px;
    }


    /* Vertical line */

    .hj-process-track::before {
        content: "";

        position: absolute;

        top: 25px;
        bottom: 35px;
        left: 53px;

        width: 1px;

        background: rgba(255, 106, 10, 0.22);
    }


    .hj-process-line {
        display: none;
    }


    /* Number */

    .hj-process-number {
        margin: 0;

        font-size: 12px;

        grid-column: 1;
        grid-row: 1 / span 3;
    }


    /* Dot */

    .hj-process-dot {
        width: 13px;
        height: 13px;

        margin: 3px 0 0;

        grid-column: 2;
        grid-row: 1;
    }


    /* Heading */

    .hj-process-step h3 {
        margin: 0 0 7px;

        grid-column: 3;
        grid-row: 1;

        font-size: 16px;
    }


    /* Description */

    .hj-process-step p {
        grid-column: 3;
        grid-row: 2;

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

}

/* ==============================
   HAJORAS TECHNOLOGY SECTION
============================== */

.hja-tech-capabilities {
    width: 80%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 90px 0 0;
    background: #fff;
    font-family: Inter, sans-serif;
    color: #17100d;
}


/* ==============================
   HEADER
============================== */

.hja-tech-cap-header {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    align-items: end;
    gap: 50px;
    padding-bottom: 55px;
}

.hja-tech-cap-label {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid rgba(28, 121, 200, 0.25);
    border-radius: 50px;
    background-color: rgba(238, 247, 255);
    color: #1C79C8;
    font: 600 10px DM Sans, sans-serif;
    letter-spacing: 2px;
    line-height: 1;
    white-space: nowrap;
}

.hja-tech-cap-header h2 {
    margin: 0;
    max-width: 650px;
    font: 900 38px/1.2 nunito, sans-serif;
    letter-spacing: -1.5px;
}

.hja-tech-cap-header h2 span {
    color: #1C79C8;
}


/* ==============================
   CAPABILITY GRID
============================== */

.hja-tech-cap-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid #e9e5e2;
    border-bottom: 1px solid #e9e5e2;
}


/* ==============================
   EACH ITEM
============================== */

.hja-tech-cap-item {
    min-height: 235px;
    padding: 38px 25px 30px;
    border-right: 1px solid #e9e5e2;
    position: relative;
    transition: background .3s ease;
}

.hja-tech-cap-item:last-child {
    border-right: none;
}


/* NUMBER */

.hja-tech-cap-number {
    display: block;
    color: #1C79C8;
    font: 600 12px DM Sans, sans-serif;
}


/* ICON */

.hja-tech-cap-icon {
    margin-top: 32px;
    margin-bottom: 25px;
    color: #1C79C8;
    font: 400 30px Arial, sans-serif;
    line-height: 1;
    transition: transform .3s ease;
}


/* TITLE */

.hja-tech-cap-item h3 {
    margin: 0 0 13px;
    color: #17100d;
    font: 600 14px/1.4 DM Sans, sans-serif;
}


/* DESCRIPTION */

.hja-tech-cap-item p {
    margin: 0;
    max-width: 190px;
    color: #667085;
    font: 400 14px/1.7 DM sans, sans-serif;
}


/* HOVER */

.hja-tech-cap-item:hover {
    background: #fffaf7;
}

.hja-tech-cap-item:hover .hja-tech-cap-icon {
    transform: translateY(-3px);
}


/* ==============================
   TABLET
============================== */

@media(max-width:1100px) {

    .hja-tech-capabilities {
        width: 90%;
    }

    .hja-tech-cap-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hja-tech-cap-item:nth-child(3) {
        border-right: none;
    }

    .hja-tech-cap-item:nth-child(n+4) {
        border-top: 1px solid #e9e5e2;
    }

}


/* ==============================
   MOBILE
============================== */

@media(max-width:650px) {

    .hja-tech-capabilities {
        width: 92%;
        padding-top: 65px;
    }

    .hja-tech-cap-header {
        display: block;
        padding-bottom: 40px;
    }

    .hja-tech-cap-header h2 {
        margin-top: 18px;
        font-size: 28px;
        letter-spacing: -1px;
    }

    .hja-tech-cap-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hja-tech-cap-item {
        min-height: 205px;
        padding: 27px 18px;
    }

    .hja-tech-cap-item:nth-child(3) {
        border-right: 1px solid #e9e5e2;
    }

    .hja-tech-cap-item:nth-child(even) {
        border-right: none;
    }

    .hja-tech-cap-item:nth-child(n+3) {
        border-top: 1px solid #e9e5e2;
    }

}


/* ==============================
   SMALL MOBILE
============================== */

@media(max-width:430px) {

    .hja-tech-capabilities {
        width: 92%;
    }

    .hja-tech-cap-grid {
        grid-template-columns: 1fr;
    }

    .hja-tech-cap-item,
    .hja-tech-cap-item:nth-child(3) {
        border-right: none;
        border-top: 1px solid #e9e5e2;
    }

    .hja-tech-cap-item:first-child {
        border-top: none;
    }

    .hja-tech-cap-item {
        min-height: auto;
        padding: 25px 20px;
    }

}

.hjp-premium-showcase {
    width: 80%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 30px 0;
    background: #fff;
}

.hjp-premium-showcase-wrap {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 90px;
}


/* CONTENT */

.hjp-premium-showcase-copy {
    max-width: 570px;
}

.hjp-premium-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid rgba(255, 106, 10, .25);
    border-radius: 40px;
    background: #fff7f1;
    color: #1C79C8;
    font: 600 10px DM Sans, sans-serif;
    letter-spacing: 2px;
}

.hjp-premium-showcase-copy h2 {
    margin: 25px 0 22px;
    color: #17100d;
    font: 900 clamp(40px, 4.2vw, 42px)/1.05 nunito, sans-serif;
    letter-spacing: -0.02px;
}

.hjp-premium-showcase-copy h2 span {
    display: block;
    color: #1C79C8;
}

.hjp-premium-lead {
    max-width: 530px;
    margin: 0;
    color: #667085;
    font: 400 15px/1.9 Inter, sans-serif;
}

.hjp-premium-stats {
    display: flex;
    gap: 0;
    margin: 45px 0 38px;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.hjp-premium-stats div {
    flex: 1;
    padding: 20px 22px 20px 0;
    border-right: 1px solid #e7e7e7;
}

.hjp-premium-stats div+div {
    padding-left: 22px;
}

.hjp-premium-stats div:last-child {
    border-right: 0;
}

.hjp-premium-stats strong {
    display: block;
    color: #17100d;
    font: 600 28px DM Sans, sans-serif;
}

.hjp-premium-stats span {
    display: block;
    margin-top: 4px;
    color: #8a8f98;
    font: 400 12px Inter, sans-serif;
}

.hjp-premium-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #17100d;
    text-decoration: none;
    font: 600 13px Inter, sans-serif;
    transition: .3s;
}

.hjp-premium-link span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1C79C8;
    color: #fff;
    transition: .3s;
}

.hjp-premium-link:hover span {
    transform: translate(4px, -4px);
}


/* VISUAL */

.hjp-premium-showcase-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hjp-premium-showcase-visual:before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 106, 10, .12);
    border-radius: 50%;
}

.hjp-premium-showcase-visual:after {
    content: "";
    position: absolute;
    width: 700px;
    height: 1px;
    background: #e8e5e2;
    transform: rotate(-28deg);
}


/* DEVICE */

.hjp-premium-device {
    position: relative;
    z-index: 3;
    width: min(650px, 82%);
    background: #17100d;
    border-radius: 18px;
    padding: 10px;
    box-shadow:
        0 35px 80px rgba(23, 16, 13, .18),
        0 8px 20px rgba(23, 16, 13, .10);
    transform: perspective(1400px) rotateY(-8deg) rotateX(3deg);
    transition: .5s ease;
}

.hjp-premium-showcase-visual:hover .hjp-premium-device {
    transform: perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(-5px);
}

.hjp-device-top {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hjp-device-brand {
    color: #fff;
    font: 600 12px DM Sans, sans-serif;
    letter-spacing: 2px;
}

.hjp-device-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #9b9b9b;
    font: 500 8px Inter, sans-serif;
    letter-spacing: 1px;
}

.hjp-device-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1C79C8;
}


/* DEVICE BODY */

.hjp-device-body {
    display: grid;
    grid-template-columns: 145px 1fr;
    min-height: 430px;
    background: #fdfdfc;
    border-radius: 10px;
    overflow: hidden;
}

.hjp-device-sidebar {
    padding: 30px 16px;
    background: #f5f3f1;
    border-right: 1px solid #e8e5e2;
}

.hjp-device-sidebar span {
    display: block;
    padding: 12px 13px;
    margin-bottom: 5px;
    color: #777;
    font: 500 10px Inter, sans-serif;
    border-radius: 7px;
}

.hjp-device-sidebar span.active {
    background: #17100d;
    color: #fff;
}


/* MAIN */

.hjp-device-main {
    padding: 35px;
}

.hjp-device-heading small {
    color: #1C79C8;
    font: 600 9px Inter, sans-serif;
    letter-spacing: 1.8px;
}

.hjp-device-heading h3 {
    margin: 9px 0 25px;
    color: #17100d;
    font: 600 30px/1.1 DM Sans, sans-serif;
}

.hjp-device-heading h3 span {
    color: #1C79C8;
}


/* CHART */

.hjp-device-chart {
    padding: 20px;
    border: 1px solid #e6e4e1;
    background: #fff;
}

.hjp-chart-head {
    display: flex;
    justify-content: space-between;
    color: #555;
    font: 500 10px Inter, sans-serif;
}

.hjp-chart-head b {
    color: #1C79C8;
}

.hjp-chart-lines {
    position: absolute;
    width: calc(100% - 40px);
    height: 110px;
}

.hjp-chart-lines i {
    display: block;
    margin-top: 27px;
    border-top: 1px dashed #e9e7e4;
}

.hjp-device-chart svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 130px;
    margin-top: 10px;
}


/* MINI PANELS */

.hjp-device-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.hjp-mini-panel {
    padding: 16px;
    border: 1px solid #e6e4e1;
    background: #fff;
}

.hjp-mini-panel span {
    display: block;
    color: #8b8b8b;
    font: 500 8px Inter, sans-serif;
    text-transform: uppercase;
}

.hjp-mini-panel strong {
    display: block;
    margin: 7px 0 2px;
    color: #17100d;
    font: 600 21px DM Sans, sans-serif;
}

.hjp-mini-panel small {
    color: #999;
    font: 400 8px Inter, sans-serif;
}


/* PRODUCT LABELS */

.hjp-product-label {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid #e2dfdc;
    box-shadow: 0 12px 30px rgba(23, 16, 13, .10);
}

.hjp-product-label span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fff3eb;
    color: #1C79C8;
    font: 600 9px DM Sans, sans-serif;
}

.hjp-product-label strong {
    display: block;
    color: #17100d;
    font: 600 10px DM Sans, sans-serif;
}

.hjp-product-label small {
    display: block;
    margin-top: 3px;
    color: #8c8c8c;
    font: 400 8px Inter, sans-serif;
}

.hjp-label-one {
    top: 80px;
    right: 20px;
}

.hjp-label-two {
    left: 10px;
    bottom: 150px;
}

.hjp-label-three {
    right: 35px;
    bottom: 55px;
}


/* RESPONSIVE */

@media(max-width:1000px) {

    .hjp-premium-showcase {
        width: 90%;
        padding: 90px 0;
    }

    .hjp-premium-showcase-wrap {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .hjp-premium-showcase-copy {
        max-width: 700px;
    }

    .hjp-premium-showcase-visual {
        min-height: 560px;
    }
}

@media(max-width:650px) {

    .hjp-premium-showcase {
        width: 92%;
        padding: 70px 0;
    }

    .hjp-premium-showcase-copy h2 {
        font-size: 40px;
        letter-spacing: -1.8px;
    }

    .hjp-premium-stats {
        flex-wrap: wrap;
    }

    .hjp-premium-stats div {
        min-width: 50%;
    }

    .hjp-premium-showcase-visual {
        min-height: 500px;
    }

    .hjp-premium-device {
        width: 94%;
        transform: none;
    }

    .hjp-device-body {
        grid-template-columns: 1fr;
    }

    .hjp-device-sidebar {
        display: none;
    }

    .hjp-device-main {
        padding: 20px;
    }

    .hjp-device-bottom {
        grid-template-columns: 1fr;
    }

    .hjp-product-label {
        min-width: auto;
        transform: scale(.8);
    }

    .hjp-label-one {
        top: 30px;
        right: -10px;
    }

    .hjp-label-two {
        left: -10px;
        bottom: 120px;
    }

    .hjp-label-three {
        right: -10px;
        bottom: 30px;
    }
}

/* =====================================================
   HAJORAS PRODUCT NEEDS SECTION
===================================================== */

.hjp-product-needs {
    width: 100%;
    padding: 110px 0;
    background: #fafafa;
    color: #17100d;
    font-family: Inter, sans-serif;
    overflow: hidden;
}

.hjp-product-needs-container {
    width: 80%;
    max-width: 1450px;
    margin: 0 auto;
}


/* ==============================
   SECTION HEADING
============================== */

.hjp-product-needs-heading {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.hjp-product-needs-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 9px 18px;
    border: 1px solid rgba(28, 121, 200, 0.25);
    border-radius: 50px;
    background: rgb(238, 247, 255);
    color: #1C79C8;
    font: 600 10px DM Sans, sans-serif;
    letter-spacing: 2px;
    line-height: 1;
}

.hjp-product-needs-heading h2 {
    margin: 22px 0 18px;
    font: 900 42px/1.15 nunito, sans-serif;
    letter-spacing: -1.8px;
}

.hjp-product-needs-heading h2 span {
    color: #1C79C8;
}

.hjp-product-needs-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: #667085;
    font: 400 15px/1.85 DM sans, sans-serif;
}


/* ==============================
   PRODUCT NEEDS GRID
============================== */

.hjp-product-needs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #e9e5e2;
    border-bottom: 1px solid #e9e5e2;
}


/* ==============================
   ITEM
============================== */

.hjp-product-needs-item {
    position: relative;
    min-height: 320px;
    padding: 32px 30px 35px;
    background: #fff;
    border-right: 1px solid #e9e5e2;
    transition: .35s ease;
}

.hjp-product-needs-item:last-child {
    border-right: none;
}

.hjp-product-needs-item:hover {
    background: #fffaf7;
}


/* ==============================
   TOP
============================== */

.hjp-product-needs-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hjp-product-needs-top>span {
    color: #1C79C8;
    font: 600 12px DM Sans, sans-serif;
}

.hjp-product-needs-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(28, 121, 200, 0.25);
    border-radius: 50%;
    background: rgb(238, 247, 255);
    color: #1C79C8;
    font-size: 17px;
    transition: .35s ease;
}

.hjp-product-needs-item:hover .hjp-product-needs-icon {
    background: #1C79C8;
    color: #fff;
    transform: translateY(-3px);
}


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

.hjp-product-needs-item h3 {
    max-width: 230px;
    margin: 55px 0 15px;
    font: 600 19px/1.35 DM Sans, sans-serif;
    letter-spacing: -.4px;
}

.hjp-product-needs-item p {
    margin: 0;
    max-width: 260px;
    color: #667085;
    font: 400 14px/1.8 DM sans, sans-serif;
}


/* ==============================
   ORANGE ACCENT LINE
============================== */

.hjp-product-needs-line {
    position: absolute;
    left: 30px;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #1C79C8;
    transition: .4s ease;
}

.hjp-product-needs-item:hover .hjp-product-needs-line {
    width: 65px;
}


/* ==============================
   TABLET
============================== */

@media(max-width:1100px) {

    .hjp-product-needs-container {
        width: 90%;
    }

    .hjp-product-needs-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hjp-product-needs-item:nth-child(2) {
        border-right: none;
    }

    .hjp-product-needs-item:nth-child(n+3) {
        border-top: 1px solid #e9e5e2;
    }

}


/* ==============================
   MOBILE
============================== */

@media(max-width:650px) {

    .hjp-product-needs {
        padding: 75px 0;
    }

    .hjp-product-needs-container {
        width: 92%;
    }

    .hjp-product-needs-heading {
        margin-bottom: 45px;
    }

    .hjp-product-needs-heading h2 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .hjp-product-needs-heading p {
        font-size: 12px;
    }

    .hjp-product-needs-grid {
        grid-template-columns: 1fr;
    }

    .hjp-product-needs-item,
    .hjp-product-needs-item:nth-child(2) {
        min-height: auto;
        padding: 30px 25px;
        border-right: none;
        border-top: 1px solid #e9e5e2;
    }

    .hjp-product-needs-item:first-child {
        border-top: none;
    }

    .hjp-product-needs-item h3 {
        margin-top: 38px;
        font-size: 20px;
    }

}

/* =====================================
   SERVICES DROPDOWN
===================================== */

.hj-mob-dropdown {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding-left: 15px;
}


/* Services page link */

.hj-mob-dropdown-link {
    flex: 1;
    display: flex;
    align-items: center;

    text-decoration: none;
    color: inherit;

    cursor: pointer;
}


/* Arrow button */

.hj-mob-dropdown-btn {
    width: 45px;
    height: 45px;

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

    padding: 0;
    margin: 0;

    border: none;
    outline: none;

    background: transparent;

    cursor: pointer;
}


/* Arrow animation */

.hj-mob-dropdown-btn i {
    transition: transform 0.3s ease;
}


/* Rotate arrow */

.hj-mob-dropdown.hj-mob-active .hj-mob-dropdown-btn i {
    transform: rotate(180deg);
}


/* Submenu closed */

.hj-mob-submenu {
    width: 100%;

    max-height: 0;
    overflow: hidden;

    opacity: 0;

    transition:
        max-height 0.35s ease,
        opacity 0.25s ease;
}


/* Submenu open */

.hj-mob-dropdown.hj-mob-active .hj-mob-submenu {
    max-height: 500px;
    opacity: 1;
}

/* =====================================
   MOBILE MENU HOVER / ACTIVE EFFECT
===================================== */

.hj-mob-menu>.hj-mob-link:hover,
.hj-mob-menu>.hj-mob-dropdown:hover {
    background: #fff1eb;
    border-radius: 30px;
}


/* Normal menu links */
.hj-mob-menu>.hj-mob-link {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.25s ease;
}


/* Services row */
.hj-mob-dropdown {
    border-radius: 30px;
    transition: all 0.25s ease;
}


/* Services text */
.hj-mob-dropdown-link {
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 400;
    text-decoration: none !important;
    transition: all 0.25s ease;
    font-family: DM Sans, sans-serif;
}


/* Services arrow */
.hj-mob-dropdown-btn {
    color: #333 !important;
    transition: all 0.25s ease;
}


/* Hover Services */
.hj-mob-dropdown:hover .hj-mob-dropdown-link,
.hj-mob-dropdown:hover .hj-mob-dropdown-btn {
    color: #333 !important;
}


/* Make text bold on hover */
.hj-mob-dropdown:hover .hj-mob-dropdown-link {
    font-weight: 600;
}

@media (max-width: 767px) {

    .ve-mvv-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 10px;
    }

    .ve-mvv-card {
        width: 100%;
        padding: 25px 20px;
        text-align: center;
        border-radius: 18px;
    }

    .ve-mvv-icon {
        margin: 0 auto 15px;
    }

    .ve-mvv-card h4 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .ve-mvv-card p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .ve-section-header h2 {
        font-size: 28px;
        line-height: 1.25;
    }

    .ve-section-tag {
        font-size: 12px;
    }
}

/* ABOUT HIGHLIGHTS */

.ab-highlights {
    padding: 90px 20px;
}

.ab-wrap {
    max-width: 1200px;
    margin: auto;
}

.ab-head {
    text-align: center;
    margin-bottom: 45px;
}

.ab-pill {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 30px;
    background-color: rgba(238, 247, 255);
    color: #1C79C8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid rgba(28, 121, 200, 0.25);
}

.ab-head h2 {
    margin: 15px 0 0;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 900;
}

.ab-head h2 span {
    color: #1C79C8;
}

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

.ab-card {
    padding: 30px 25px;
    border: 1px solid #eee;
    border-radius: 20px;
    background: #fff;
    transition: .3s ease;
}

.ab-card:hover {
    transform: translateY(-6px);
    border-color: #1C79C8;
}

.ab-card strong {
    color: #1C79C8;
    font-size: 14px;
}

.ab-card h3 {
    margin: 20px 0 10px;
    font-size: 20px;
}

.ab-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.7;
}


/* MOBILE */

@media (max-width: 767px) {

    .ab-highlights {
        padding: 60px 15px;
    }

    .ab-head h2 {
        font-size: 30px;
    }

    .ab-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ab-card {
        padding: 25px 20px;
    }

}

/* =====================================================
   HAJORAS SINGLE SERVICE PAGE
===================================================== */

.hz-service-page {

    --hz-blue: #1C79C8;
    --hz-blue-dark: #155f9d;
    --hz-blue-light: #eef7ff;
    --hz-blue-soft: #f7fbff;

    --hz-border:
        1px solid rgba(28, 121, 200, 0.25);

    --hz-text: #17212b;
    --hz-muted: #687582;
    --hz-white: #ffffff;

    font-family: "DM Sans", sans-serif;
    color: var(--hz-text);
}


/* RESET */

.hz-service-page *,
.hz-service-page *::before,
.hz-service-page *::after {
    box-sizing: border-box;
}


/* CONTAINER */

.hz-service-container {
    width: min(1240px, 92%);
    margin: 0 auto;
}


/* SECTIONS */

.hz-service-page section {
    padding: 90px 0;
}


/* =====================================================
   COMMON PILL
===================================================== */

.hz-pill {
    display: inline-flex;
    align-items: center;

    padding: 7px 15px;

    border-radius: 50px;

    background: #eef7ff;

    border: var(--hz-border);

    color: var(--hz-blue);

    font-family: "Nunito", sans-serif;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    margin-bottom: 14px;
}


/* WHITE PILL */

.hz-pill-white {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}


/* =====================================================
   HEADINGS
===================================================== */

.hz-section-heading {
    margin-bottom: 45px;
}

.hz-section-heading.hz-center {
    text-align: center;
}

.hz-section-heading h2,
.hz-cap-main h2 {

    margin: 0;

    font-family: "Nunito", sans-serif;

    font-size: 43px;

    line-height: 1.12;

    font-weight: 900;

    letter-spacing: -1px;

    color: var(--hz-text);
}

.hz-section-heading h2 span,
.hz-cap-main h2 span {
    color: var(--hz-blue);
}


/* BODY */

.hz-section-heading>p,
.hz-section-intro {

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.8;

    color: var(--hz-muted);
}


/* =====================================================
   SECTION 01
   CORE CAPABILITIES
===================================================== */

.hz-cap-section {
    background: #fff;
}

.hz-cap-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.75fr) minmax(280px, .75fr);

    gap: 30px;

    align-items: stretch;
}


.hz-cap-main h2 {
    margin-bottom: 16px;
}


.hz-section-intro {
    max-width: 800px;
    margin: 0 0 30px;
}


/* CAPABILITY GRID */

.hz-cap-grid {

    display: grid;

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

    gap: 16px;
}


/* CARD */

.hz-cap-card {

    position: relative;

    padding: 26px 28px;

    background: #fff;

    border: var(--hz-border);

    border-radius: 16px;

    min-height: 175px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.hz-cap-card:hover {

    transform: translateY(-5px);

    border-color: rgba(28, 121, 200, .55);


}


/* NUMBER */

.hz-number {

    display: inline-flex;

    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background: var(--hz-blue-light);

    color: var(--hz-blue);

    font-family: "Nunito", sans-serif;

    font-size: 12px;

    font-weight: 900;
}


.hz-cap-card h3 {

    margin: 16px 0 7px;

    font-family: "Nunito", sans-serif;

    font-size: 18px;

    font-weight: 900;
}


.hz-cap-card p {

    margin: 0;

    font-size: 15px;

    line-height: 1.65;

    color: var(--hz-muted);
}


/* =====================================================
   BUSINESS OUTCOME PANEL
===================================================== */

.hz-outcome-box {
    position: relative;
    padding: 32px;
    min-height: 100%;
    background: #fff;
    border: 1px solid rgba(28, 121, 200, .25);
    border-radius: 20px;
    color: #17212b;
    overflow: hidden;
    transition: .3s
}

.hz-outcome-box:before {
    content: "";
    position: absolute;
    right: 0;
    top: 18px;
    width: 5px;
    height: 70%;
    background: #1C79C8;
    border-radius: 5px 0 0 5px
}

.hz-outcome-box:after {
    content: "";
    position: absolute;
    right: 25px;
    bottom: 0;
    width: 65%;
    height: 5px;
    background: #1C79C8;
    border-radius: 5px 0 0
}

.hz-outcome-box:hover {
    transform: translateY(-5px);
}

.hz-outcome-box .hz-pill-white {
    background: #eef7ff;
    border: 1px solid rgba(28, 121, 200, .25);
    color: #1C79C8
}

.hz-outcome-box h3 {
    margin: 15px 0 22px;
    color: #17212b;
    font: 900 23px "Nunito", sans-serif
}

.hz-outcome-box ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.hz-outcome-box li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 19px;
    color: #4b5966;
    font: 500 15px/1.6 "DM Sans", sans-serif
}

.hz-outcome-box li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef7ff;
    color: #1C79C8;
    font-size: 12px;
    font-weight: 900
}

.hz-outcome-box h3,
.hz-outcome-box li {
    color: #17212b !important;
}

.hz-outcome-box li {
    color: #4b5966 !important;
}

.hz-outcome-box .hz-pill-white {
    color: #1C79C8 !important;
}

.hz-outcome-box li::before {
    color: #1C79C8 !important;
    background: #eef7ff !important;
}


/* subtle design */

.hz-outcome-box::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .16);
}


.hz-outcome-box h3 {

    position: relative;

    margin: 12px 0 25px;

    color: #fff;

    font-family: "Nunito", sans-serif;

    font-size: 22px;

    font-weight: 900;
}


.hz-outcome-box ul {

    position: relative;

    margin: 0;

    padding: 0;

    list-style: none;
}


.hz-outcome-box li {

    position: relative;

    padding-left: 23px;

    margin-bottom: 18px;

    color: #fff;

    font-size: 15px;

    line-height: 1.5;
}


.hz-outcome-box li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color: #fff;

    font-weight: 900;
}


/* =====================================================
   SECTION 02
   CONTENT TABS
===================================================== */

.hz-tabs-section {
    background: var(--hz-blue-soft);
}


.hz-tabs-wrapper {

    display: grid;

    grid-template-columns:
        minmax(300px, .85fr) minmax(0, 1.35fr);

    gap: 30px;

    padding: 28px;

    background: #fff;

    border: var(--hz-border);

    border-radius: 20px;
}


/* TAB MENU */

.hz-tab-menu {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.hz-tab-btn {

    width: 100%;

    min-height: 62px;

    padding: 15px 18px;

    display: flex;

    align-items: center;

    gap: 12px;

    border: var(--hz-border);

    background: #fff;

    color: var(--hz-text);

    font-family: "Nunito", sans-serif;

    font-size: 15px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    transition: .3s ease;
}


.hz-tab-btn span {

    color: var(--hz-blue);

    font-size: 18px;

    flex-shrink: 0;
}


.hz-tab-btn:hover,
.hz-tab-btn.active {

    background: var(--hz-blue);

    border-color: var(--hz-blue);

    color: #fff;

    transform: translateX(3px);
}


.hz-tab-btn.active span {
    color: #fff;
}


/* TAB CONTENT */

.hz-tab-content {

    min-height: 390px;

    padding: 35px;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 12px 40px rgba(22, 50, 70, .06);
}


.hz-tab-panel {
    display: none;
}


.hz-tab-panel.active {

    display: block;

    animation:
        hzTabFade .35s ease;
}


.hz-tab-panel h3 {

    margin: 0 0 18px;

    padding-bottom: 16px;

    border-bottom:
        1px solid rgba(28, 121, 200, .25);

    font-family: "Nunito", sans-serif;

    font-size: 28px;

    font-weight: 900;

    color: var(--hz-blue);
}


.hz-tab-panel p {

    margin: 0 0 17px;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.9;

    color: var(--hz-text);
}


@keyframes hzTabFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =====================================================
   SECTION 03
   ICON APPROACH TABS
===================================================== */

.hz-approach-section {
    background: #fff;
}


/* ICON TABS */

.hz-icon-tabs {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-bottom: 30px;
}


.hz-icon-tab {

    width: 105px;
    height: 92px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #fff;

    border: var(--hz-border);

    border-radius: 10px;

    color: var(--hz-blue);

    cursor: pointer;

    transition: .3s ease;
}


.hz-icon-tab i {
    font-size: 24px;
}


.hz-icon-tab span {

    font-family: "Nunito", sans-serif;

    font-size: 11px;

    font-weight: 900;
}


.hz-icon-tab:hover,
.hz-icon-tab.active {

    background: var(--hz-blue);

    color: #fff;

    border-color: var(--hz-blue);

    transform: translateY(-4px);

}


/* APPROACH CARD */

.hz-approach-card {

    display: grid;

    grid-template-columns:
        1fr .85fr;

    gap: 50px;

    align-items: center;

    padding: 55px;

    background: #fff;

    border: var(--hz-border);

    border-radius: 20px;

    position: relative;

    overflow: hidden;
}


/* LEFT BLUE ACCENT */

.hz-approach-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

}


.hz-step-label {

    color: var(--hz-blue);

    font-family: "Nunito", sans-serif;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.hz-approach-content h3 {

    margin: 12px 0 15px;

    font-family: "Nunito", sans-serif;

    font-size: 30px;

    font-weight: 900;

    color: var(--hz-text);
}


.hz-approach-content p {

    margin: 0 0 18px;

    max-width: 650px;

    font-size: 15px;

    line-height: 1.8;

    color: var(--hz-muted);
}


.hz-approach-content ul {

    margin: 0 0 25px;

    padding: 0;

    list-style: none;
}


.hz-approach-content li {

    position: relative;

    padding-left: 25px;

    margin-bottom: 9px;

    font-size: 15px;
}


.hz-approach-content li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color: var(--hz-blue);

    font-weight: 900;
}


/* BUTTON */

.hz-service-btn {

    display: inline-flex;

    padding: 12px 22px;

    background: var(--hz-blue);

    color: #fff;

    border-radius: 7px;

    font-family: "Nunito", sans-serif;

    font-size: 13px;

    font-weight: 900;

    text-decoration: none;

    transition: .3s ease;
}


.hz-service-btn:hover {

    background: var(--hz-blue-dark);

    color: #fff;

    transform: translateY(-2px);
}


/* =====================================================
   APPROACH IMAGE
===================================================== */

.hz-approach-image {

    position: relative;

    padding: 0 0 18px 18px;
}


/* RIGHT + BOTTOM BORDER */

.hz-image-frame {

    position: relative;

    padding: 12px 12px 18px 0;

    border-right:
        7px solid var(--hz-blue);

    border-bottom:
        7px solid var(--hz-blue);

    border-radius: 0 25px 25px 0;
}


.hz-image-frame::before {

    content: "";

    position: absolute;

    top: -14px;
    right: -14px;

    width: 75%;

    height: 70px;

    border-radius: 0 25px 0 0;
}


.hz-image-frame img {

    width: 100%;

    height: 390px;

    display: block;

    object-fit: cover;

    border-radius: 0 18px 18px 0;
}


/* =====================================================
   SECTION 04
   BENEFITS
===================================================== */

.hz-benefits-section {

    background: var(--hz-blue-soft);
}


.hz-benefits-grid {

    display: grid;

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

    gap: 18px;
}


.hz-benefit-card {

    position: relative;

    padding: 32px 28px;

    min-height: 245px;

    background: #fff;

    border: var(--hz-border);

    border-radius: 12px;

    text-align: center;

    transition: .3s ease;

    overflow: hidden;
}


/* TOP ACCENT */

.hz-benefit-card:first-child::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 32%;

    height: 5px;

}


.hz-benefit-card:last-child::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 32%;

    height: 5px;

}


.hz-benefit-card:hover {

    transform: translateY(-5px);


    border-color:
        rgba(28, 121, 200, .5);
}


.hz-benefit-icon {

    width: 54px;
    height: 54px;

    margin: 0 auto 18px;

    display: flex;

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

    border-radius: 13px;

    background: var(--hz-blue-light);

    color: var(--hz-blue);

    font-size: 22px;
}


.hz-benefit-card h3 {

    margin: 0 0 12px;

    font-family: "Nunito", sans-serif;

    font-size: 19px;

    font-weight: 900;
}


.hz-benefit-card p {

    margin: 0;

    font-size: 15px;

    line-height: 1.7;

    color: var(--hz-muted);
}


/* =====================================================
   SECTION 05
   TOOLS
===================================================== */

.hz-tools-section {
    background: #fff;
}


.hz-tools-marquee {

    width: 100%;

    overflow: hidden;

    margin-top: 40px;

    padding: 20px 0;

    border-top:
        1px dashed rgba(28, 121, 200, .25);

    border-bottom:
        1px dashed rgba(28, 121, 200, .25);
}


.hz-tools-track {

    display: flex;

    width: max-content;

    gap: 16px;

    animation:
        hzMarquee 25s linear infinite;
}


.hz-tools-marquee:hover .hz-tools-track {
    animation-play-state: paused;
}


.hz-tool-item {

    width: 190px;

    height: 80px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: #fff;

    border: var(--hz-border);

    border-radius: 12px;

    color: var(--hz-blue);

    box-shadow:
        0 5px 20px rgba(28, 121, 200, .04);
}


.hz-tool-item i {

    font-size: 24px;
}


.hz-tool-item span {

    font-family: "Nunito", sans-serif;

    font-size: 14px;

    font-weight: 900;

    color: var(--hz-text);
}


@keyframes hzMarquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .hz-cap-layout {

        grid-template-columns: 1fr;

    }


    .hz-outcome-box {

        min-height: auto;

    }


    .hz-approach-card {

        grid-template-columns: 1fr;

    }


    .hz-approach-image {

        max-width: 700px;

        width: 100%;

        margin: auto;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .hz-service-page section {

        padding: 60px 0;

    }


    .hz-service-container {

        width: 91%;

    }


    /* HEADING */

    .hz-section-heading h2,
    .hz-cap-main h2 {

        font-size: 32px;

        line-height: 1.2;

        letter-spacing: -.5px;

    }


    .hz-section-heading {

        margin-bottom: 30px;

    }


    /* CAPABILITIES */

    .hz-cap-grid {

        grid-template-columns: 1fr;

    }


    .hz-cap-card {

        min-height: auto;

        padding: 22px;

    }


    .hz-cap-card h3 {

        font-size: 17px;

    }


    .hz-section-intro {

        font-size: 15px;

    }


    .hz-outcome-box {

        padding: 26px 23px;

    }


    /* TABS */

    .hz-tabs-wrapper {

        grid-template-columns: 1fr;

        padding: 15px;

        gap: 20px;

    }


    .hz-tab-btn {

        min-height: 56px;

        font-size: 13px;

    }


    .hz-tab-content {

        min-height: auto;

        padding: 22px 18px;

    }


    .hz-tab-panel h3 {

        font-size: 23px;

    }


    /* ICON TABS */

    .hz-icon-tabs {

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 8px;

    }


    .hz-icon-tab {

        width: 100%;

        height: 78px;

    }


    .hz-icon-tab i {

        font-size: 20px;

    }


    /* APPROACH */

    .hz-approach-card {

        padding: 35px 22px;

        gap: 35px;

    }


    .hz-approach-content h3 {

        font-size: 25px;

    }


    .hz-image-frame img {

        height: 270px;

    }


    /* BENEFITS */

    .hz-benefits-grid {

        grid-template-columns: 1fr;

    }


    .hz-benefit-card {

        min-height: auto;

        padding: 28px 22px;

    }


    /* TOOLS */

    .hz-tool-item {

        width: 160px;

        height: 72px;

    }


    .hz-tool-item span {

        font-size: 12px;

    }

}

/* =========================================
   PREMIUM CONTACT HERO
========================================= */

.hz-contact-hero-v2 {
    position: relative;
    overflow: hidden;
    padding: 105px 20px 95px;
    background: #f7fbff;
}

.hz-contact-hero-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    right: -180px;
    top: -180px;
    border-radius: 50%;
    background: rgba(28, 121, 200, .08);
}

.hz-contact-hero-grid {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 80px;
    align-items: center;
}

.hz-contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(28, 121, 200, .22);
    border-radius: 50px;
    background: #eef7ff;
    color: #1C79C8;
    font: 700 12px "DM Sans", sans-serif;
    letter-spacing: 1px;
}

.hz-contact-eyebrow i {
    font-size: 13px;
}

.hz-contact-hero-content h1 {
    max-width: 720px;
    margin: 20px 0 18px;
    color: #17212b;
    font: 900 52px/1.08 "Nunito", sans-serif;
    letter-spacing: -1.5px;
}

.hz-contact-hero-content h1 span {
    color: #1C79C8;
}

.hz-contact-hero-content p {
    max-width: 650px;
    margin: 0;
    color: #687582;
    font: 500 15px/1.85 "DM Sans", sans-serif;
}

.hz-contact-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 32px;
}

.hz-contact-hero-meta div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #354452;
    font: 700 13px "DM Sans", sans-serif;
}

.hz-contact-hero-meta i {
    color: #1C79C8;
    font-size: 16px;
}


/* HERO SIDE CARD */

.hz-contact-hero-card {
    position: relative;
    padding: 36px 34px 30px;
    background: #fff;
    border: 1px solid rgba(28, 121, 200, .25);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(28, 121, 200, .1);
    overflow: hidden;
}

.hz-contact-card-line {
    position: absolute;
    right: 0;
    top: 30px;
    width: 5px;
    height: 110px;
    background: #1C79C8;
    border-radius: 5px 0 0 5px;
}

.hz-contact-hero-card:after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: 0;
    width: 120px;
    height: 5px;
    background: #1C79C8;
    border-radius: 5px 0 0;
}

.hz-card-label {
    color: #1C79C8;
    font: 800 10px "DM Sans", sans-serif;
    letter-spacing: 1.2px;
}

.hz-contact-hero-card h3 {
    max-width: 250px;
    margin: 15px 0 12px;
    color: #17212b;
    font: 900 30px/1.15 "Nunito", sans-serif;
}

.hz-contact-hero-card p {
    margin: 0;
    color: #687582;
    font: 500 14px/1.7 "DM Sans", sans-serif;
}

.hz-hero-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding: 12px 19px;
    border-radius: 30px;
    background: #1C79C8;
    color: #fff;
    text-decoration: none;
    font: 700 13px "DM Sans", sans-serif;
    transition: .1s;
}

.hz-hero-contact-btn:hover {
    background: #3B8FD1;
    color: #FFFFFF;
}

.hz-card-bottom {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #edf2f6;
}

.hz-card-bottom span {
    color: #87939d;
    font: 800 9px "DM Sans", sans-serif;
    letter-spacing: .8px;
}


/* =========================================
   GLOBAL OFFICES
========================================= */

.hz-global-offices-v2 {
    padding: 100px 20px;
    background: #fff;
}

.hz-global-heading {
    max-width: 1200px;
    margin: 0 auto 48px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 50px;
}

.hz-global-heading h2 {
    margin: 17px 0 0;
    color: #17212b;
    font: 900 43px/1.12 "Nunito", sans-serif;
    letter-spacing: -1px;
}

.hz-global-heading h2 span {
    color: #1C79C8;
}

.hz-global-heading>p {
    max-width: 420px;
    margin: 0 0 4px;
    color: #687582;
    font: 500 15px/1.8 "DM Sans", sans-serif;
}

.hz-global-office-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


/* OFFICE CARD */

.hz-global-office-card {
    position: relative;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    min-height: 440px;
    background: #fff;
    border: 1px solid rgba(28, 121, 200, .23);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(28, 121, 200, .08);
    overflow: hidden;
    transition: .3s ease;
}

.hz-global-office-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 65px rgba(28, 121, 200, .14);
}


/* MAP */

.hz-office-map-v2 {
    position: relative;
    min-height: 440px;
    background: #edf4f8;
}

.hz-office-map-v2 iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    filter: saturate(.75);
}

.hz-map-badge {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 50px;
    background: #fff;
    color: #1C79C8;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
    font: 800 10px "DM Sans", sans-serif;
    letter-spacing: .7px;
    margin-top: 29px
}

.hz-map-badge i {
    font-size: 12px;
}


/* OFFICE CONTENT */

.hz-office-content-v2 {
    position: relative;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hz-office-content-v2:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 90px;
    height: 5px;
}

.hz-office-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hz-office-top>span {
    color: #1C79C8;
    font: 800 10px "DM Sans", sans-serif;
    letter-spacing: 1px;
}

.hz-office-number {
    color: #dbeefa;
    font: 900 30px "Nunito", sans-serif;
}

.hz-office-content-v2 h3 {
    margin: 13px 0 10px;
    color: #17212b;
    font: 900 27px/1.2 "Nunito", sans-serif;
}

.hz-office-description {
    margin: 0 0 25px;
    color: #687582;
    font: 500 13px/1.7 "DM Sans", sans-serif;
}

.hz-office-contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hz-office-contact {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.hz-contact-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef7ff;
    color: #1C79C8;
}

.hz-office-contact small {
    display: block;
    margin-bottom: 3px;
    color: #8b969f;
    font: 800 9px "DM Sans", sans-serif;
    letter-spacing: .8px;
}

.hz-office-contact p {
    margin: 0;
    color: #566572;
    font: 500 13px/1.5 "DM Sans", sans-serif;
}

.hz-office-contact a {
    color: #1C79C8;
    text-decoration: none;
    font: 600 13px "DM Sans", sans-serif;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767px) {

    .hz-contact-hero-v2 {
        padding: 70px 18px;
    }

    .hz-contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hz-contact-hero-content h1 {
        font-size: 34px;
        line-height: 1.15;
    }

    .hz-contact-hero-content p {
        font-size: 14px;
    }

    .hz-contact-hero-meta {
        gap: 16px;
    }

    .hz-contact-hero-card {
        padding: 28px 25px;
    }

    .hz-global-offices-v2 {
        padding: 70px 18px;
    }

    .hz-global-heading {
        display: block;
        margin-bottom: 32px;
    }

    .hz-global-heading h2 {
        font-size: 32px;
    }

    .hz-global-heading>p {
        margin-top: 15px;
        font-size: 14px;
    }

    .hz-global-office-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hz-global-office-card {
        grid-template-columns: 1fr;
    }

    .hz-office-map-v2 {
        min-height: 250px;
        height: 250px;
    }

    .hz-office-content-v2 {
        padding: 26px 23px 30px;
    }

}

/* =========================================
   PREMIUM CONTACT CONNECT
========================================= */

.hj-contact-connect {
    position: relative;
    padding: 100px 20px;
    background: #f7fbff;
    overflow: hidden;
}

.hj-contact-connect:before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -220px;
    bottom: -220px;
    border-radius: 50%;
    background: rgba(28, 121, 200, .06);
}


/* HEADING */

.hj-contact-connect-head {
    position: relative;
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

.hj-contact-connect-tag,
.hj-contact-mini-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(28, 121, 200, .23);
    border-radius: 50px;
    background: #eef7ff;
    color: #1C79C8;
    font: 700 12px "DM Sans", sans-serif;
    letter-spacing: 1px;
}

.hj-contact-connect-head h2 {
    margin: 18px 0 14px;
    color: #17212b;
    font: 900 43px/1.12 "Nunito", sans-serif;
    letter-spacing: -1px;
}

.hj-contact-connect-head h2 span {
    color: #1C79C8;
}

.hj-contact-connect-head p {
    max-width: 650px;
    margin: auto;
    color: #687582;
    font: 500 15px/1.8 "DM Sans", sans-serif;
}


/* MAIN GRID */

.hj-contact-connect-grid {
    position: relative;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
    align-items: stretch;
}


/* =========================================
   LEFT CARD
========================================= */

.hj-contact-info-card {
    position: relative;
    padding: 38px;
    background: #fff;
    border: 1px solid rgba(28, 121, 200, .24);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(28, 121, 200, .08);
    overflow: hidden;
}

.hj-contact-card-accent {
    position: absolute;
    right: 0;
    top: 30px;
    width: 5px;
    height: 115px;
    border-radius: 5px 0 0 5px;
}

.hj-contact-info-card:after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: 0;
    width: 130px;
    height: 5px;
    border-radius: 5px 0 0;
}

.hj-contact-info-card h3 {
    max-width: 400px;
    margin: 17px 0 14px;
    color: #17212b;
    font: 900 30px/1.15 "Nunito", sans-serif;
}

.hj-contact-info-card h3 span {
    color: #1C79C8;
}

.hj-contact-info-text {
    margin: 0 0 25px;
    color: #687582;
    font: 500 14px/1.75 "DM Sans", sans-serif;
}


/* CAPABILITY LIST */

.hj-capability-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 15px;
    margin-bottom: 28px;
}

.hj-capability-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #52616d;
    font: 600 14px/1.45 "DM Sans", sans-serif;
}

.hj-capability-item i {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef7ff;
    color: #1C79C8;
    font-size: 9px;
    margin-top: 1px;
}


/* QUICK INFO */

.hj-contact-quick-info {
    display: flex;
    gap: 25px;
    padding-top: 22px;
    border-top: 1px solid #edf2f6;
}

.hj-quick-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hj-quick-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eef7ff;
    color: #1C79C8;
}

.hj-quick-info-item small {
    display: block;
    margin-bottom: 2px;
    color: #8a969f;
    font: 800 12px "DM Sans", sans-serif;
    letter-spacing: .7px;
}

.hj-quick-info-item a,
.hj-quick-info-item strong {
    color: #17212b;
    text-decoration: none;
    font: 700 14px "DM Sans", sans-serif;
}


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

.hj-contact-form-card {
    padding: 38px;
    background: #fff;
    border: 1px solid rgba(28, 121, 200, .24);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(28, 121, 200, .08);
}

.hj-form-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.hj-form-card-head>div:first-child>span {
    color: #1C79C8;
    font: 800 14px "DM Sans", sans-serif;
    letter-spacing: 1px;
}

.hj-form-card-head h3 {
    max-width: 400px;
    margin: 10px 0 0;
    color: #17212b;
    font: 900 27px/1.2 "Nunito", sans-serif;
}

.hj-form-card-head h3 strong {
    color: #1C79C8;
}

.hj-form-number {
    color: #dceefa;
    font: 900 32px "Nunito", sans-serif;
}


/* FORM */

.hj-new-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.hj-new-form-group {
    margin-bottom: 18px;
}

.hj-new-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #26343f;
    font: 700 14px "DM Sans", sans-serif;
}

.hj-new-form-group input,
.hj-new-form-group select,
.hj-new-form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid rgba(28, 121, 200, .2);
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #17212b;
    font: 500 13px "DM Sans", sans-serif;
    transition: .25s;
}

.hj-new-form-group input::placeholder,
.hj-new-form-group textarea::placeholder {
    color: #a0aab2;
}

.hj-new-form-group input:focus,
.hj-new-form-group select:focus,
.hj-new-form-group textarea:focus {
    border-color: #1C79C8;
    box-shadow: 0 0 0 3px rgba(28, 121, 200, .08);
}

.hj-new-form-group textarea {
    min-height: 125px;
    resize: vertical;
}


/* FORM BOTTOM */

.hj-form-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-top: 5px;
}

.hj-form-bottom p {
    margin: 0;
    color: #8a969f;
    font: 500 13px "DM Sans", sans-serif;
}

.hj-form-bottom p i {
    margin-right: 5px;
    color: #1C79C8;
}

.hj-send-message {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 21px;
    border: 0;
    border-radius: 50px;
    background: #1C79C8;
    color: #fff;
    cursor: pointer;
    font: 700 13px "DM Sans", sans-serif;
    transition: .3s;
}

.hj-send-message:hover {
    background: #155f9d;
    transform: translateY(-2px);
}

.hj-send-message i {
    transition: .3s;
}

.hj-send-message:hover i {
    transform: translateX(4px);
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767px) {

    .hj-contact-connect {
        padding: 70px 18px;
    }

    .hj-contact-connect-head {
        margin-bottom: 32px;
    }

    .hj-contact-connect-head h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .hj-contact-connect-head p {
        font-size: 14px;
    }

    .hj-contact-connect-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hj-contact-info-card,
    .hj-contact-form-card {
        padding: 27px 22px;
    }

    .hj-contact-info-card h3 {
        font-size: 26px;
    }

    .hj-capability-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hj-contact-quick-info {
        flex-direction: column;
        gap: 15px;
    }

    .hj-new-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hj-form-card-head h3 {
        font-size: 24px;
    }

    .hj-form-number {
        font-size: 26px;
    }

    .hj-form-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .hj-send-message {
        width: 100%;
        justify-content: center;
    }

}

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

.hjp-premium-hero,
.hjp-premium-hero * {
    box-sizing: border-box;
}

.hjp-premium-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #F7FAFD;
    font-family: "DM Sans", sans-serif;
}

.hjp-premium-wrap {
    width: 88%;
    max-width: 1500px;
    min-height: 760px;
    margin: auto;

    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;
    gap: 50px;

    padding: 130px 0 70px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.hjp-premium-content {
    position: relative;
    z-index: 3;
    padding-right: 20px;
}

.hjp-premium-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 15px;

    border: 1px solid #BBD9EE;
    border-radius: 40px;

    background: #F1F8FD;

    color: #1C79C8;

    font: 900 12px "DM Sans", sans-serif;
    letter-spacing: 1.5px;
}

.hjp-premium-eyebrow span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #1C79C8;
}


.hjp-premium-content h1 {
    max-width: 680px;

    margin: 28px 0 25px;

    color: #17212b;

    font: 900 clamp(52px, 5.3vw, 60px)/1.01 "Nunito", sans-serif;

    letter-spacing: 0px;
}

.hjp-premium-content h1 span {
    display: block;
    color: #1C79C8;
}


.hjp-premium-content>p {
    max-width: 570px;

    margin: 0;

    color: #607587;

    font: 400 16px/1.85 "DM Sans", sans-serif;
}


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

.hjp-premium-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 25px;
}

.hjp-premium-primary,
.hjp-premium-secondary {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 23px;
    border-radius: 7px;
    text-decoration: none;

    font-family: "DM Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    transform: none !important;
    animation: none !important;
    box-shadow: none !important;

    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* =========================================
   SECONDARY BUTTON
========================================= */

.hjp-premium-secondary {
    background: #1C79C8 !important;
    color: #FFFFFF !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    transform: none !important;
}


/* =========================================
   HOVER - COLOR ONLY
========================================= */

.hjp-premium-secondary:hover {
    background: #155F9F !important;
    color: #FFFFFF !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    transform: none !important;
    scale: 1 !important;
    animation: none !important;
    box-shadow: none !important;
}

/* =========================================
   FOCUS / ACTIVE
========================================= */

.hjp-premium-secondary:focus,
.hjp-premium-secondary:active,
.hjp-premium-secondary:focus-visible {
    background: #155F9F !important;
    color: #FFFFFF !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    transform: none !important;
    scale: 1 !important;
    animation: none !important;
    box-shadow: none !important;
}


/* =========================================
   TRUST LINE
========================================= */

.hjp-premium-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;

    margin-top: 25px;

    border-top: 1px solid #DDE8F0;
    padding-top: 15px;
}

.hjp-premium-trust span {
    padding: 0 18px;

    color: #8495A3;

    font: 600 11px "DM Sans", sans-serif;
    letter-spacing: 1px;

    border-right: 1px solid #DDE8F0;
}

.hjp-premium-trust span:first-child {
    padding-left: 0;
}

.hjp-premium-trust span:last-child {
    border: 0;
}


/* =========================================
   HAJORAS HERO RIGHT SIDE SLIDER
========================================= */

.hjp-premium-slider {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin-left: auto;
}


/* =========================================
   IMAGE AREA
========================================= */

.hjp-premium-image-wrapper {
    position: relative;
    width: 100%;
    height: 560px;

    overflow: hidden;
    border-radius: 18px;

    background: #EEF7FF;
}


/* =========================================
   IMAGES
========================================= */

.hjp-premium-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.45s ease,
        visibility 0.45s ease;
}

.hjp-premium-image.active {
    opacity: 1;
    visibility: visible;
}

.hjp-premium-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: none !important;
    transition: none !important;
}


/* =========================================
   CONTENT OVER IMAGE
========================================= */

.hjp-premium-slide-content {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 8;

    padding: 28px 30px 25px;

    box-sizing: border-box;

    background: linear-gradient(to bottom,
            rgba(7, 21, 34, 0.88),
            rgba(7, 21, 34, 0.55),
            rgba(7, 21, 34, 0));

    margin: 0;

    pointer-events: none;
}


/* Hide all content */

.hjp-slide-content {
    display: none;

    width: 70%;

    padding-left: 15px;

    border-left: 3px solid #1C79C8;
}


/* Show current content */

.hjp-slide-content.active {
    display: block;
}


/* Number */

.hjp-slide-number {
    display: block;

    margin-bottom: 6px;

    color: #8CCBFF;

    font: 700 12px "DM Sans", sans-serif;

    letter-spacing: 1.5px;
}


/* Heading */

.hjp-slide-content h3 {
    margin: 0 0 7px;

    color: #FFFFFF;

    font: 700 24px/1.3 "DM Sans", sans-serif;
}


/* Description */

.hjp-slide-content p {
    margin: 0;

    max-width: 520px;

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

    font: 400 14px/1.6 "DM Sans", sans-serif;
}


/* =========================================
   ARROWS
========================================= */

.hjp-premium-arrow {
    position: absolute;

    top: 50%;

    width: 50px;
    height: 50px;

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

    border: none;
    border-radius: 50%;

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

    color: #1C79C8;

    font-size: 22px;

    cursor: pointer;

    z-index: 20;

    /* Hidden initially */

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(-50%) !important;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


/* Left */

.hjp-premium-prev {
    left: 18px;
}


/* Right */

.hjp-premium-next {
    right: 18px;
}


/* =========================================
   SHOW ARROWS ONLY WHEN IMAGE IS HOVERED
========================================= */

.hjp-premium-image-wrapper:hover .hjp-premium-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   ARROW HOVER
========================================= */

.hjp-premium-arrow:hover {
    background: #1C79C8;

    color: #FFFFFF;

    transform: translateY(-50%) !important;

    animation: none !important;

    scale: 1 !important;

    box-shadow: none !important;
}


/* =========================================
   PREVENT TEMPLATE EFFECTS
========================================= */

.hjp-premium-arrow,
.hjp-premium-arrow:hover,
.hjp-premium-arrow:focus,
.hjp-premium-arrow:active {

    animation: none !important;
    scale: 1 !important;
    outline: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .hjp-premium-slider {
        max-width: 100%;
        margin-top: 40px;
    }

    .hjp-premium-image-wrapper {
        height: 480px;
    }

    .hjp-slide-content {
        width: 80%;
    }

    .hjp-slide-content h3 {
        font-size: 21px;
    }

}

@media(max-width:1199px) {
    .hjp-premium-wrap {
        width: 92%;
        grid-template-columns: 48% 52%;
        gap: 30px;
        padding: 110px 0 60px
    }

    .hjp-premium-content h1 {
        font-size: 50px
    }

    .hjp-premium-content>p {
        font-size: 15px
    }

    .hjp-premium-image-wrapper {
        height: 520px
    }

    .hjp-slide-content h3 {
        font-size: 22px
    }

    .hjp-slide-content p {
        font-size: 13px
    }
}

@media(max-width:991px) {
    .hjp-premium-wrap {
        width: 90%;
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 100px 0 60px
    }

    .hjp-premium-content {
        padding-right: 0;
        text-align: center
    }

    .hjp-premium-eyebrow {
        justify-content: center
    }

    .hjp-premium-content h1 {
        max-width: 750px;
        margin: 22px auto 20px;
        font-size: 48px;
        line-height: 1.08
    }

    .hjp-premium-content>p {
        max-width: 680px;
        margin: auto;
        font-size: 15px;
        line-height: 1.75
    }

    .hjp-premium-actions {
        justify-content: center;
        margin-top: 24px
    }

    .hjp-premium-trust {
        justify-content: center;
        margin-top: 25px
    }

    .hjp-premium-trust span {
        padding: 0 14px
    }

    .hjp-premium-slider {
        width: 100%;
        max-width: 700px;
        margin: 0 auto
    }

    .hjp-premium-image-wrapper {
        height: 500px
    }

    .hjp-premium-slide-content {
        padding: 25px 28px
    }

    .hjp-slide-content {
        width: 75%;
        padding-left: 13px
    }

    .hjp-slide-content h3 {
        font-size: 22px
    }

    .hjp-slide-content p {
        font-size: 13px
    }

    .hjp-premium-arrow {
        width: 44px;
        height: 44px;
        font-size: 19px
    }

    .hjp-premium-prev {
        left: 14px
    }

    .hjp-premium-next {
        right: 14px
    }
}

@media(max-width:767px) {
    .hjp-premium-hero {
        width: 100%;
        overflow: hidden
    }

    .hjp-premium-wrap {
        width: 92%;
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 80px 0 45px
    }

    .hjp-premium-content {
        width: 100%;
        padding: 0;
        text-align: center
    }

    .hjp-premium-eyebrow {
        max-width: 100%;
        padding: 8px 12px;
        gap: 7px;
        font-size: 10px;
        letter-spacing: 1px
    }

    .hjp-premium-eyebrow span {
        width: 5px;
        height: 5px
    }

    .hjp-premium-content h1 {
        width: 100%;
        max-width: 600px;
        margin: 20px auto 18px;
        font-size: 38px;
        line-height: 1.08
    }

    .hjp-premium-content>p {
        width: 100%;
        max-width: 600px;
        font-size: 14px;
        line-height: 1.7
    }

    .hjp-premium-actions {
        width: 100%;
        justify-content: center;
        gap: 10px;
        margin-top: 22px
    }

    .hjp-premium-primary,
    .hjp-premium-secondary {
        min-height: 48px;
        padding: 0 18px;
        font-size: 14px !important
    }

    .hjp-premium-trust {
        width: 100%;
        justify-content: center;
        margin-top: 22px;
        padding-top: 12px
    }

    .hjp-premium-trust span {
        padding: 0 10px;
        font-size: 9px;
        letter-spacing: .7px
    }

    .hjp-premium-slider {
        width: 100%;
        max-width: 100%;
        margin: 0
    }

    .hjp-premium-image-wrapper {
        width: 100%;
        height: 420px;
        border-radius: 15px
    }

    .hjp-premium-slide-content {
        width: 100%;
        padding: 20px 18px
    }

    .hjp-slide-content {
        width: 85%;
        padding-left: 10px;
        border-left-width: 2px
    }

    .hjp-slide-number {
        font-size: 10px;
        margin-bottom: 5px;
        letter-spacing: 1px
    }

    .hjp-slide-content h3 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 6px
    }

    .hjp-slide-content p {
        font-size: 12px;
        line-height: 1.5;
        max-width: 100%
    }

    .hjp-premium-arrow {
        width: 38px;
        height: 38px;
        font-size: 17px
    }

    .hjp-premium-prev {
        left: 9px
    }

    .hjp-premium-next {
        right: 9px
    }
}

@media(max-width:480px) {
    .hjp-premium-wrap {
        width: 94%;
        gap: 28px;
        padding: 65px 0 35px
    }

    .hjp-premium-eyebrow {
        padding: 7px 10px;
        font-size: 8px;
        letter-spacing: .8px;
        gap: 6px
    }

    .hjp-premium-eyebrow span {
        width: 4px;
        height: 4px
    }

    .hjp-premium-content h1 {
        margin: 17px auto 15px;
        font-size: 30px;
        line-height: 1.1
    }

    .hjp-premium-content>p {
        font-size: 13px;
        line-height: 1.65
    }

    .hjp-premium-actions {
        gap: 8px;
        margin-top: 19px
    }

    .hjp-premium-primary,
    .hjp-premium-secondary {
        min-height: 45px;
        padding: 0 14px;
        font-size: 13px !important;
        border-radius: 6px
    }

    .hjp-premium-trust {
        margin-top: 19px;
        padding-top: 11px
    }

    .hjp-premium-trust span {
        padding: 0 7px;
        font-size: 7px;
        letter-spacing: .4px
    }

    .hjp-premium-slider {
        width: 100%
    }

    .hjp-premium-image-wrapper {
        height: 350px;
        border-radius: 12px
    }

    .hjp-premium-slide-content {
        padding: 16px 14px
    }

    .hjp-slide-content {
        width: 88%;
        padding-left: 8px
    }

    .hjp-slide-number {
        font-size: 8px;
        margin-bottom: 4px
    }

    .hjp-slide-content h3 {
        font-size: 15px;
        line-height: 1.3;
        margin-bottom: 5px
    }

    .hjp-slide-content p {
        font-size: 10px;
        line-height: 1.45
    }

    .hjp-premium-arrow {
        width: 32px;
        height: 32px;
        font-size: 14px
    }

    .hjp-premium-prev {
        left: 6px
    }

    .hjp-premium-next {
        right: 6px
    }
}

@media(max-width:360px) {
    .hjp-premium-wrap {
        width: 94%;
        padding: 55px 0 30px
    }

    .hjp-premium-content h1 {
        font-size: 27px
    }

    .hjp-premium-content>p {
        font-size: 12px
    }

    .hjp-premium-primary,
    .hjp-premium-secondary {
        min-height: 42px;
        padding: 0 11px;
        font-size: 12px !important
    }

    .hjp-premium-trust span {
        padding: 0 5px;
        font-size: 6px
    }

    .hjp-premium-image-wrapper {
        height: 320px
    }

    .hjp-slide-content h3 {
        font-size: 14px
    }

    .hjp-slide-content p {
        font-size: 9px
    }

    .hjp-premium-arrow {
        width: 29px;
        height: 29px;
        font-size: 12px
    }
}

/* =====================================================
   HAJORAS LIGHT BLUE FOOTER
===================================================== */

.hja-light-footer {
    width: 100%;
    background: #F7FBFE;
    border-top: 1px solid #DCEAF4;
    font-family: 'DM Sans', sans-serif;
    color: #526B7E;
}


/* =========================
   MAIN FOOTER
========================= */

.hja-footer-main {
    width: 88%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 75px 0 60px;

    display: grid;
    grid-template-columns: 1.5fr 1fr 1.3fr 1.3fr;
    gap: 60px;
}


/* =========================
   BRAND
========================= */

.hja-footer-logo {
    display: inline-block;
    margin-bottom: 22px;
}

.hja-footer-logo img {
    width: 175px;
    height: auto;
    display: block;
}

.hja-footer-brand p {
    max-width: 380px;
    margin: 0;

    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;

    color: #61788A;
}


/* =========================
   SOCIAL
========================= */

.hja-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.hja-footer-social a {
    width: 38px;
    height: 38px;

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

    border: 1px solid #CFE2F1;
    border-radius: 50%;

    background: #FFFFFF;
    color: #1C79C8;

    font-size: 14px;

    text-decoration: none;

    transition: all .25s ease;
}

.hja-footer-social a:hover {
    background: #1C79C8;
    border-color: #1C79C8;
    color: #FFFFFF;

    transform: translateY(-2px);
}


/* =========================
   COLUMN
========================= */

.hja-footer-column h4 {
    margin: 0 0 22px;

    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;

    color: #103B5C;
}

.hja-footer-column h4::after {
    content: "";
    display: block;

    width: 28px;
    height: 2px;

    margin-top: 9px;

    background: #1C79C8;
    border-radius: 10px;
}


.hja-footer-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hja-footer-column ul li {
    margin-bottom: 12px;
}

.hja-footer-column ul li a {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;

    color: #526B7E;

    text-decoration: none;

    transition: all .25s ease;
}

.hja-footer-column ul li a:hover {
    color: #1C79C8;
    padding-left: 4px;
}


/* =========================
   CONTACT
========================= */

.hja-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 18px;
}

.hja-footer-contact-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

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

    border-radius: 9px;

    background: #EAF4FC;
    border: 1px solid #CFE4F4;

    color: #1C79C8;

    font-size: 13px;
}

.hja-footer-contact-item strong {
    display: block;

    margin-bottom: 2px;

    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: #103B5C;
}

.hja-footer-contact-item p {
    margin: 0;

    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;

    color: #61788A;
    line-height: 1.6;
}


/* =========================
   CTA
========================= */

.hja-footer-cta {
    width: 88%;
    max-width: 1450px;

    margin: 0 auto;

    padding: 28px 32px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    background: #EEF7FD;

    border: 1px solid #CFE4F4;
    border-radius: 18px;
}

.hja-footer-cta span {
    display: block;

    margin-bottom: 5px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #1C79C8;
}

.hja-footer-cta h3 {
    margin: 0;

    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;

    color: #103B5C;
}


.hja-footer-cta>a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 21px;

    border-radius: 30px;

    background: #1C79C8;
    color: #FFFFFF;

    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition: all .25s ease;
}

.hja-footer-cta>a:hover {
    background: #155F9F;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 121, 200, .18);
}


/* =========================
   BOTTOM
========================= */

.hja-footer-bottom {
    width: 88%;
    max-width: 1450px;

    margin: 45px auto 0;
    padding: 22px 0;

    border-top: 1px solid #DCE8F1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.hja-footer-bottom p {
    margin: 0;

    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;

    color: #71879A;
}

.hja-footer-bottom div {
    display: flex;
    gap: 24px;
}

.hja-footer-bottom a {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;

    color: #71879A;

    text-decoration: none;

    transition: color .25s ease;
}

.hja-footer-bottom a:hover {
    color: #1C79C8;
}


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

@media (max-width: 1000px) {

    .hja-footer-main {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 40px;
    }

    .hja-footer-brand {
        grid-column: span 3;
    }

}


@media (max-width: 700px) {

    .hja-footer-main {
        width: 90%;
        grid-template-columns: 1fr 1fr;
        gap: 40px 25px;
        padding: 55px 0 40px;
    }

    .hja-footer-brand {
        grid-column: span 2;
    }

    .hja-footer-cta {
        width: 90%;
        flex-direction: column;
        align-items: flex-start;
    }

    .hja-footer-bottom {
        width: 90%;
        flex-direction: column;
        align-items: flex-start;
    }

    .hja-footer-bottom div {
        flex-wrap: wrap;
        gap: 12px 20px;
    }

}


@media (max-width: 480px) {

    .hja-footer-main {
        grid-template-columns: 1fr;
    }

    .hja-footer-brand {
        grid-column: span 1;
    }

    .hja-footer-logo img {
        width: 155px;
    }

    .hja-footer-cta {
        padding: 24px;
    }

    .hja-footer-cta h3 {
        font-size: 19px;
    }

}

.ve-footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ve-footer-logo img {
    width: 175px;
    height: auto;
    display: block;
}

.ve-footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-office-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-bottom: 7px;

    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #526B7E;
}

.ve-office-item i {
    width: 15px;
    flex-shrink: 0;
    margin-top: 3px;

    color: #1C79C8;
    font-size: 12px;
}

.ve-office-item strong {
    display: block;
    margin-bottom: 2px;

    font-size: 13px;
    font-weight: 700;
    color: #103B5C;
}

.ve-office-item span {
    display: block;
}

.ve-office-divider {
    height: 1px;
    margin: 13px 0;

    background: #DCE8F1;
}

/* =========================================
   HAJORAS FULL WIDTH COPYRIGHT SECTION
========================================= */

.hj-copyright-section {
    position: relative;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 22px 20px;

    background: #F7FBFE;

    border-top: 1px solid rgba(0, 0, 0, 0.06);

    box-sizing: border-box;

    text-align: center;

    overflow: hidden;
}


/* Content */

.hj-copyright-content {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 0;
}


/* All text */

.hj-copyright-content p {
    margin: 2px 0;

    color: #526273;

    font-size: 12px;

    line-height: 1.6;

    font-weight: 400;
}


/* Main copyright */

.hj-copyright-content .hj-copyright-main {
    color: #263746;

    font-weight: 500;

    font-size: 14px;
}


.hj-copyright-main strong {
    color: #1678C5;

    font-weight: 700;
}


/* Website link */

.hj-copyright-content a {
    color: #1678C5;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}


.hj-copyright-content a:hover {
    color: #e3a900;

    text-decoration: underline;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .hj-copyright-section {
        padding: 18px 15px;
    }

    .hj-copyright-content p {
        font-size: 11px;
    }

    .hj-copyright-content .hj-copyright-main {
        font-size: 12px;
    }

}

.hz-cap-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 22px;

    border-radius: 12px;

    background: #EAF4FC;
    border: 1px solid #CFE4F4;

    color: #1C79C8;

    font-size: 19px;

    transition: all .25s ease;
}

.hz-cap-card:hover .hz-cap-icon {
    background: #1C79C8;
    border-color: #1C79C8;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.hz-benefit-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 22px;

    border-radius: 12px;

    background: #EAF4FC;
    border: 1px solid #CFE4F4;

    color: #1C79C8;

    font-size: 19px;

    transition: all .25s ease;
    margin-left: 0px;
}

.hz-career-benefit:hover .hz-benefit-icon {
    background: #1C79C8;
    border-color: #1C79C8;
    color: #FFFFFF;

    transform: translateY(-2px);
}

.ve-footer-row {
    display: flex;
    align-items: flex-start;
}

.ve-footer-row>div {
    display: block;
}

.ve-footer-brand {
    max-width: 100%;
}

.ve-footer-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.ve-footer-logo img {
    display: block;
    max-width: 180px;
    height: auto;
}

.ve-footer-title {
    margin-bottom: 20px;
}

.ve-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-footer-links li {
    margin-bottom: 10px;
}

.ve-footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ve-office-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.ve-office-item>i {
    flex: 0 0 18px;
    margin-top: 3px;
}

.ve-office-item strong {
    display: block;
    margin-bottom: 2px;
}

.ve-office-item span {
    display: block;
}

.ve-office-divider {
    width: 100%;
    height: 1px;
    margin: 16px 0;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767px) {

    .ve-footer-row {
        display: block;
    }

    .ve-footer-row>div {
        width: 100%;
        margin-bottom: 35px;
    }

    .ve-footer-logo {
        margin-bottom: 15px;
    }

    .ve-footer-title {
        margin-top: 10px;
        margin-bottom: 18px;
    }

}

/* =========================================
   HAJORAS ABOUT - RIGHT IMAGE ONLY
========================================= */

.hja-right-visual {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin-left: auto;
}

.hja-right-image {
    width: 100%;
    height: 620px;

    background-image: url("img/bg-img/why-hajoras-right.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    border-radius: 20px;
}




/* =========================================
   TABLET
========================================= */

@media(max-width:991px) {

    .hja-right-visual {
        width: 100%;
        max-width: 650px;
        margin: 30px auto 0;
    }

    .hja-right-image {
        height: 520px;
    }

    .hja-right-badge {
        right: 0;
        width: 250px;
        height: 135px;
    }

    .hja-right-badge strong {
        font-size: 42px;
    }

    .hja-right-badge span {
        font-size: 12px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767px) {

    .hja-right-visual {
        width: 100%;
        max-width: 100%;
    }

    .hja-right-image {
        height: 430px;
    }

    .hja-right-badge {
        right: 10px;
        bottom: 0;

        width: 215px;
        height: 110px;

        border-radius: 14px;
    }

    .hja-right-badge strong {
        font-size: 34px;
    }

    .hja-right-badge span {
        font-size: 10px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px) {

    .hja-right-image {
        height: 360px;
    }

    .hja-right-badge {
        right: 5px;

        width: 180px;
        height: 90px;

        border-radius: 12px;
    }

    .hja-right-badge strong {
        font-size: 28px;
        margin-bottom: 5px;
    }

    .hja-right-badge span {
        font-size: 8px;
    }

}

/* =========================================
   STICKY BUTTONS
========================================= */

.hja-sticky-buttons {
    position: fixed;

    right: 25px;
    bottom: 35px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    z-index: 99999;
}


/* =========================================
   COMMON BUTTON
========================================= */

.hja-sticky-btn {
    width: 50px !important;
    height: 50px !important;

    min-width: 50px !important;
    min-height: 50px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    border: 0 !important;
    border-radius: 50% !important;

    color: #FFFFFF !important;

    font-size: 23px !important;
    line-height: 1 !important;

    text-decoration: none !important;

    cursor: pointer;

    box-sizing: border-box !important;

    transform: none !important;
    animation: none !important;

    box-shadow: 0 5px 18px rgba(0, 0, 0, .15);

    transition:
        background-color .2s ease,
        color .2s ease !important;
}


/* =========================================
   INSTAGRAM
========================================= */

.hja-instagram {
    background: #E4405F !important;
}

.hja-instagram:hover {
    background: #D63352 !important;
    color: #FFFFFF !important;

    transform: none !important;
    scale: 1 !important;
    animation: none !important;
}


/* =========================================
   LINKEDIN
========================================= */

.hja-linkedin {
    background: #0A66C2 !important;
}

.hja-linkedin:hover {
    background: #0858A8 !important;
    color: #FFFFFF !important;

    transform: none !important;
    scale: 1 !important;
    animation: none !important;
}


/* =========================================
   WHATSAPP
========================================= */

.hja-whatsapp {
    background: #25D366 !important;
}

.hja-whatsapp:hover {
    background: #20BA5A !important;
    color: #FFFFFF !important;

    transform: none !important;
    scale: 1 !important;
    animation: none !important;
}


/* =========================================
   BACK TO TOP
========================================= */

.hja-backtop {
    background: #1C79C8 !important;
}

.hja-backtop:hover {
    background: #155F9F !important;
    color: #FFFFFF !important;

    transform: none !important;
    scale: 1 !important;
    animation: none !important;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:767px) {

    .hja-sticky-buttons {
        right: 12px;
        bottom: 25px;

        gap: 10px;
    }

    .hja-sticky-btn {
        width: 50px !important;
        height: 50px !important;

        min-width: 50px !important;
        min-height: 50px !important;

        font-size: 21px !important;
    }

}

.hjp-premium-button {
    background: #1C79C8 !important;
    color: #FFFFFF !important;

    padding: 18px !important;

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

    font-family: "DM Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

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

    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
    margin-top: 20px;

    transition: background-color .2s ease, color .2s ease !important;
}


/* Hover */

.hjp-premium-button:hover {
    background: #155F9F !important;
    color: #FFFFFF !important;

    padding: 18px !important;

    transform: none !important;
    scale: 1 !important;
    animation: none !important;
    box-shadow: none !important;
}


/* Focus / Active */

.hjp-premium-button:focus,
.hjp-premium-button:active,
.hjp-premium-button:focus-visible {
    background: #155F9F !important;
    color: #FFFFFF !important;

    padding: 20px !important;

    transform: none !important;
    scale: 1 !important;
    animation: none !important;
    box-shadow: none !important;

    outline: none !important;
}

/* REMOVE PRELOADER */
#preloader,
.preloader,
.ve-preloader,
.loader-wrapper,
.loading-screen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================================================
   HAJORAS TECHNOLOGY SOLUTIONS
   UNIQUE CLASS PREFIX: hjs-tech-
========================================================= */


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

.hjs-tech-section {
    width: 100%;
    padding: 10px 0 90px;

    background: #ffffff;

    font-family: "Inter", sans-serif;
}

.hjs-tech-section *,
.hjs-tech-section *::before,
.hjs-tech-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   80% CENTERED CONTAINER
========================================================= */

.hjs-tech-container {
    width: 80%;
    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.hjs-tech-header {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto 35px;

    text-align: center;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.hjs-tech-label {
    display: inline-flex;

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

    gap: 14px;

    margin-bottom: 14px;

    color: #ff6a0a;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .5px;

    text-transform: uppercase;
}

.hjs-tech-label span {
    display: block;

    width: 45px;
    height: 2px;

    background: #ff6a0a;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.hjs-tech-header h2 {
    margin: 0 0 18px;

    color: #092b63;

    font-family: "nunito", sans-serif;

    font-size: 40px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.8px;
}

.hjs-tech-header h2 strong {
    display: block;

    color: #ff6a0a;

    font-weight: 700;
}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.hjs-tech-header p {
    max-width: 1000px;

    margin: 0 auto;

    color: #43516a;

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

    font-size: 16px;

    line-height: 1.65;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.hjs-tech-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.hjs-tech-card {
    position: relative;

    width: 100%;
    height: 300px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    box-shadow:
        0 7px 25px rgba(20, 55, 100, .05);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.hjs-tech-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(20, 55, 100, .12);
}


/* =========================================================
   FULL CARD IMAGE
========================================================= */

.hjs-tech-card-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 1;
}


/* IMAGE ITSELF */

.hjs-tech-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    margin: 0;
    padding: 0;

    border: 0;

    transition:
        transform .5s ease;
}


/* IMAGE HOVER */

.hjs-tech-card:hover
.hjs-tech-card-image img {
    transform: scale(1.03);
}


/* =========================================================
   IMPORTANT:
   NO GRADIENT / NO OVERLAY
========================================================= */

.hjs-tech-card-image::before,
.hjs-tech-card-image::after {
    display: none !important;
}


/* =========================================================
   CONTENT
   CONTENT IS OVER THE IMAGE
========================================================= */

.hjs-tech-card-content {
    position: relative;

    width: 60%;
    height: 100%;

    padding: 20px 10px 18px 25px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    background: transparent;

    z-index: 5;
}


/* =========================================================
   ICON
========================================================= */

.hjs-tech-icon {
    position: relative;

    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 10px;

    border-radius: 8px;

    color: #ffffff;

    font-size: 20px;

    z-index: 6;
}


/* =========================================================
   ICON COLORS
========================================================= */

.hjs-tech-blue {
    background: #1479e8;
}

.hjs-tech-purple {
    background: #5939e5;
}

.hjs-tech-teal {
    background: #13aaa5;
}

.hjs-tech-orange {
    background: #ff7208;
}


/* =========================================================
   CARD TITLE
========================================================= */

.hjs-tech-card-content h3 {
    position: relative;

    max-width: 280px;

    margin: 0 0 8px;

    color: #092b63;

    font-family: "Poppins", sans-serif;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 700;

    z-index: 6;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.hjs-tech-card-content > p {
    position: relative;

    max-width: 270px;

    margin: 0 0 7px;

    color: #4f5d73;

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

    font-size: 13px;

    line-height: 1.45;

    z-index: 6;
}


/* =========================================================
   BULLET LIST
========================================================= */

.hjs-tech-card-content ul {
    position: relative;

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

    margin: 0 0 5px;

    padding: 0;

    list-style: none;

    z-index: 6;
}

.hjs-tech-card-content ul li {
    position: relative;

    padding-left: 19px;

    margin-bottom: 3px;

    color: #526078;

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

    font-size: 12px;

    line-height: 1.45;
}

.hjs-tech-card-content ul li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    width: 15px;
    height: 15px;

    display: flex;

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

    border-radius: 50%;

    background: #1479e8;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   BULLET COLORS
========================================================= */

.hjs-tech-card:nth-child(2)
.hjs-tech-card-content ul li::before {
    background: #5939e5;
}

.hjs-tech-card:nth-child(3)
.hjs-tech-card-content ul li::before {
    background: #13aaa5;
}

.hjs-tech-card:nth-child(4)
.hjs-tech-card-content ul li::before {
    background: #ff7208;
}

.hjs-tech-card:nth-child(6)
.hjs-tech-card-content ul li::before {
    background: #5939e5;
}


/* =========================================================
   LEARN MORE
========================================================= */

.hjs-tech-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;

    color: #1479e8;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    z-index: 6;

    transition:
        color .3s ease;
}

.hjs-tech-link i {
    font-size: 13px;

    transition:
        transform .3s ease;
}

.hjs-tech-link:hover {
    color: #ff6a0a;
}

.hjs-tech-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hjs-tech-container {
        width: 88%;
    }

    .hjs-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hjs-tech-header h2 {
        font-size: 38px;
    }

    .hjs-tech-card {
        height: 300px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hjs-tech-section {
        padding: 60px 0 70px;
    }

    .hjs-tech-container {
        width: 90%;
    }

    .hjs-tech-header {
        margin-bottom: 30px;
    }

    .hjs-tech-label {
        font-size: 11px;

        gap: 8px;
    }

    .hjs-tech-label span {
        width: 25px;
    }

    .hjs-tech-header h2 {
        font-size: 30px;
    }

    .hjs-tech-header p {
        font-size: 13px;
    }

    .hjs-tech-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .hjs-tech-card {
        height: 300px;
    }

    .hjs-tech-card-content {
        width: 60%;

        padding: 20px 8px 18px 20px;
    }

    .hjs-tech-card-content h3 {
        font-size: 18px;
    }

    .hjs-tech-card-content > p {
        font-size: 11px;
    }

    .hjs-tech-card-content ul li {
        font-size: 10px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hjs-tech-container {
        width: 92%;
    }

    .hjs-tech-header h2 {
        font-size: 27px;
    }

    .hjs-tech-card {
        height: 285px;
    }

    .hjs-tech-card-content {
        width: 62%;

        padding: 18px 6px 16px 16px;
    }

    .hjs-tech-icon {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }

    .hjs-tech-card-content h3 {
        font-size: 16px;
    }

    .hjs-tech-card-content > p {
        font-size: 10px;

        line-height: 1.4;
    }

    .hjs-tech-card-content ul li {
        font-size: 9px;
    }

    .hjs-tech-link {
        font-size: 10px;
    }
}
/* =========================================================
   HAJORAS - WHY HAJORAS
   UNIQUE PREFIX: hjw-
========================================================= */

.hjw-section {
    width: 100%;

    padding: 10px 0 90px;

    background: linear-gradient(135deg, #F8FBFF 0%, #FFF8F3 100%);

    font-family: "Inter", sans-serif;
}

.hjw-section *,
.hjw-section *::before,
.hjw-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   80% CENTERED CONTAINER
========================================================= */

.hjw-container {
    width: 80%;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
========================================================= */

.hjw-layout {
    width: 100%;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;

    gap: 20px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.hjw-content {
    width: 100%;

    padding-right: 15px;
}


/* =========================================================
   LABEL
========================================================= */

.hjw-label {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;

    color: #ff6a0a;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .4px;

    text-transform: uppercase;
}

.hjw-label span {
    display: block;

    width: 42px;

    height: 2px;

    background: #ff6a0a;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.hjw-heading {
    margin: 0 0 18px;

    color: #092b63;

    font-family: "nunito", sans-serif;

    font-size: 40px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -.8px;
}

.hjw-heading strong {
    display: block;

    color: #ff6a0a;

    font-weight: 700;
}


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

.hjw-description {
    max-width: 650px;

    margin: 0 0 26px;

    color: #4f5d73;

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

    font-size: 15px;

    line-height: 1.55;
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.hjw-feature {
    width: 100%;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 18px;
}


/* =========================================================
   FEATURE ICON
========================================================= */

.hjw-feature-icon {
    width: 60px;

    min-width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    font-size: 25px;

    background: #eef6ff;

    color: #1479e8;
}


/* COLORS */

.hjw-blue {
    background: #edf6ff;

    color: #1479e8;
}

.hjw-orange {
    background: #fff3e8;

    color: #ff7208;
}

.hjw-teal {
    background: #e9fbfa;

    color: #13aaa5;
}

.hjw-purple {
    background: #f1edff;

    color: #5939e5;
}


/* =========================================================
   FEATURE CONTENT
========================================================= */

.hjw-feature-content {
    padding-top: 3px;
}

.hjw-feature-content h3 {
    margin: 0 0 4px;

    color: #092b63;

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;
}

.hjw-feature-content p {
    max-width: 560px;

    margin: 0;

    color: #536178;

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

    font-size: 14px;

    line-height: 1.45;
}


/* =========================================================
   RIGHT IMAGE HOLDER
========================================================= */

.hjw-visual {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   IMAGE
========================================================= */

.hjw-image-holder {
    position: relative;

    width: 100%;

    max-width: 700px;

    overflow: hidden;
}

.hjw-image-holder img {
    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    object-fit: contain;
}


/* =========================================================
   STATS
========================================================= */

.hjw-stats {
    width: 100%;

    max-width: 800px;

    display: grid;

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

    margin-top: 24px;

    padding: 18px 15px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 5px 25px rgba(20, 55, 100, .07);
}


/* =========================================================
   STAT ITEM
========================================================= */

.hjw-stat {
    position: relative;

    text-align: center;

    padding: 0 15px;
}

.hjw-stat:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 1px;

    height: 100%;

    background: #dce5ef;
}


/* =========================================================
   STAT NUMBER
========================================================= */

.hjw-stat strong {
    display: block;

    margin-bottom: 3px;

    color: #1479e8;

    font-family: "Poppins", sans-serif;

    font-size: 28px;

    line-height: 1;

    font-weight: 700;
}

.hjw-stat:nth-child(even) strong {
    color: #ff6a0a;
}


/* =========================================================
   STAT LABEL
========================================================= */

.hjw-stat span {
    display: block;

    color: #536178;

    font-size: 12px;

    line-height: 1.3;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hjw-container {
        width: 88%;
    }

    .hjw-layout {
        grid-template-columns: 1fr 1fr;

        gap: 15px;
    }

    .hjw-heading {
        font-size: 38px;
    }

    .hjw-description {
        font-size: 14px;
    }

    .hjw-feature-icon {
        width: 52px;
        min-width: 52px;
        height: 52px;

        font-size: 21px;
    }

    .hjw-feature-content h3 {
        font-size: 16px;
    }

    .hjw-feature-content p {
        font-size: 12px;
    }

    .hjw-stat strong {
        font-size: 23px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hjw-section {
        padding: 60px 0 70px;
    }

    .hjw-container {
        width: 90%;
    }

    .hjw-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    /* IMAGE FIRST ON MOBILE */

    .hjw-visual {
        order: -1;
    }

    .hjw-content {
        padding-right: 0;
    }

    .hjw-heading {
        font-size: 32px;
    }

    .hjw-description {
        font-size: 14px;
    }

    .hjw-feature {
        gap: 12px;

        margin-bottom: 16px;
    }

    .hjw-feature-icon {
        width: 48px;
        min-width: 48px;
        height: 48px;

        border-radius: 14px;

        font-size: 20px;
    }

    .hjw-feature-content h3 {
        font-size: 16px;
    }

    .hjw-feature-content p {
        font-size: 12px;
    }

    .hjw-stats {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

        padding: 18px 10px;
    }

    .hjw-stat {
        padding: 0 8px;
    }

    .hjw-stat:nth-child(2)::after {
        display: none;
    }

    .hjw-stat strong {
        font-size: 23px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hjw-container {
        width: 92%;
    }

    .hjw-label {
        font-size: 11px;
    }

    .hjw-label span {
        width: 25px;
    }

    .hjw-heading {
        font-size: 27px;
    }

    .hjw-description {
        font-size: 13px;
    }

    .hjw-feature-icon {
        width: 44px;
        min-width: 44px;
        height: 44px;

        font-size: 18px;
    }

    .hjw-feature-content h3 {
        font-size: 15px;
    }

    .hjw-feature-content p {
        font-size: 11px;
    }

    .hjw-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hjw-stat strong {
        font-size: 21px;
    }

    .hjw-stat span {
        font-size: 10px;
    }
}
/* =========================================================
   HAJORAS CLIENT STORIES
   UNIQUE PREFIX: hjts-
========================================================= */

.hjts-section {
    width: 100%;
    padding: 20px 0 75px;
    background: #ffffff;

    font-family: "Inter", sans-serif;
}

.hjts-section *,
.hjts-section *::before,
.hjts-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   80% CENTERED CONTAINER
========================================================= */

.hjts-container {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.hjts-header {
    width: 100%;
    max-width: 900px;

    margin: 0 auto 35px;

    text-align: center;
}


/* =========================================================
   LABEL
========================================================= */

.hjts-label {
    display: inline-flex;

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

    gap: 12px;

    margin-bottom: 12px;

    color: #ff6a0a;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 600;

    text-transform: uppercase;
}

.hjts-label span {
    width: 40px;
    height: 2px;

    display: block;

    background: #ff6a0a;
}


/* =========================================================
   HEADING
========================================================= */

.hjts-header h2 {
    margin: 0 0 12px;

    color: #092b63;

    font-family: "nunito", sans-serif;

    font-size: 40px;

    line-height: 1.15;

    font-weight: 800;
}

.hjts-header h2 strong {
    color: #ff6a0a;

    font-weight: 700;
}


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

.hjts-header p {
    max-width: 850px;

    margin: 0 auto;

    color: #566278;

    font-size: 15px;

    line-height: 1.55;
}


/* =========================================================
   CAROUSEL
========================================================= */

.hjts-carousel {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;
}


/* =========================================================
   VIEWPORT
========================================================= */

.hjts-viewport {
    width: 100%;

    overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

.hjts-track {
    display: flex;

    width: 100%;

    transition:
        transform 1s cubic-bezier(.77, 0, .175, 1);
}


/* =========================================================
   SLIDE
========================================================= */

.hjts-slide {
    flex: 0 0 33.333333%;

    width: 33.333333%;

    padding: 0 9px;
}


/* =========================================================
   CARD
========================================================= */

.hjts-card {
    position: relative;

    width: 100%;
    min-height: 285px;

    padding: 24px 25px 20px;

    background: #ffffff;

    border: 1px solid #e3eaf3;

    border-radius: 8px;

    box-shadow:
        0 7px 25px rgba(20, 55, 100, .06);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

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

    box-shadow:
        0 14px 30px rgba(20, 55, 100, .10);
}


/* =========================================================
   QUOTE
========================================================= */

.hjts-quote {
    position: absolute;

    top: 12px;
    left: 18px;

    color: #1479e8;

    font-family: Georgia, serif;

    font-size: 52px;

    line-height: 1;

    font-weight: 700;
}

.hjts-quote-orange {
    color: #ff6a0a;
}


/* =========================================================
   CLIENT LOGO IMAGE HOLDER
========================================================= */

.hjts-client-logo {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 120px;
    height: 55px;

    display: flex;

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

    overflow: hidden;
}

.hjts-client-logo img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   TESTIMONIAL TEXT
========================================================= */

.hjts-text {
    width: 72%;

    margin: 28px 0 20px;

    color: #536178;

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

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   AUTHOR
========================================================= */

.hjts-author {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


/* =========================================================
   AVATAR IMAGE HOLDER
========================================================= */

.hjts-avatar {
    width: 48px;
    height: 48px;

    min-width: 48px;

    overflow: hidden;

    border-radius: 50%;

    background: #edf4fb;
}

.hjts-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   AUTHOR DETAILS
========================================================= */

.hjts-author-info {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.hjts-author-info strong {
    color: #092b63;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;
}

.hjts-author-info span {
    color: #7a8495;

    font-size: 13px;

    line-height: 1.3;
}


/* =========================================================
   TAGS
========================================================= */

.hjts-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.hjts-tags span {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 5px 12px;

    border-radius: 20px;

    background: #edf6ff;

    color: #1479e8;

    font-size: 12px;

    line-height: 1;

    white-space: nowrap;
}

.hjts-slide:nth-child(even)
.hjts-tags span {
    background: #fff3ea;

    color: #ff6a0a;
}


/* =========================================================
   ARROWS
========================================================= */

.hjts-arrow {
    position: absolute;

    top: 50%;

    width: 42px;
    height: 42px;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background: #ffffff;

    color: #1479e8;

    font-size: 22px;

    cursor: pointer;

    z-index: 10;

    box-shadow:
        0 5px 18px rgba(20, 55, 100, .12);

    transform: translateY(-50%);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.hjts-arrow:hover {
    background: #1479e8;

    color: #ffffff;

    transform:
        translateY(-50%)
        scale(1.05);
}

.hjts-prev {
    left: -55px;
}

.hjts-next {
    right: -55px;
}


/* =========================================================
   DOTS
========================================================= */

.hjts-dots {
    display: flex;

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

    gap: 7px;

    margin-top: 22px;
}

.hjts-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #d9e1ec;

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}

.hjts-dot-active {
    width: 11px;
    height: 11px;

    background: #1479e8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hjts-container {
        width: 88%;
    }

    .hjts-header h2 {
        font-size: 36px;
    }

    .hjts-slide {
        flex: 0 0 50%;

        width: 50%;
    }

    .hjts-prev {
        left: -48px;
    }

    .hjts-next {
        right: -48px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hjts-section {
        padding: 60px 0 65px;
    }

    .hjts-container {
        width: 90%;
    }

    .hjts-header {
        margin-bottom: 28px;
    }

    .hjts-label {
        font-size: 11px;

        gap: 8px;
    }

    .hjts-label span {
        width: 25px;
    }

    .hjts-header h2 {
        font-size: 29px;
    }

    .hjts-header p {
        font-size: 13px;
    }

    .hjts-slide {
        flex: 0 0 100%;

        width: 100%;

        padding: 0;
    }

    .hjts-card {
        min-height: 310px;

        padding: 22px 20px 18px;
    }

    .hjts-text {
        width: 78%;

        font-size: 12px;
    }

    .hjts-client-logo {
        width: 95px;
        height: 45px;

        right: 15px;
    }

    .hjts-arrow {
        width: 36px;
        height: 36px;

        font-size: 18px;
    }

    .hjts-prev {
        left: -18px;
    }

    .hjts-next {
        right: -18px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hjts-container {
        width: 92%;
    }

    .hjts-header h2 {
        font-size: 26px;
    }

    .hjts-card {
        min-height: 320px;
    }

    .hjts-text {
        width: 75%;

        font-size: 11px;
    }

    .hjts-author-info strong {
        font-size: 13px;
    }

    .hjts-author-info span {
        font-size: 10px;
    }

    .hjts-tags span {
        font-size: 9px;

        padding: 5px 9px;
    }

}
/* =========================================================
   HAJORAS - OUR CLIENTS
   UNIQUE PREFIX: hjx-
========================================================= */

.hjx-clients-section {
    width: 100%;

    padding: 75px 0 70px;

    background: #f4f9ff;

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

    overflow: hidden;
}

.hjx-clients-section *,
.hjx-clients-section *::before,
.hjx-clients-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   80% CENTERED WIDTH
========================================================= */

.hjx-clients-wrapper {
    width: 80%;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.hjx-clients-header {
    width: 100%;

    max-width: 1000px;

    margin: 0 auto 32px;

    text-align: center;
}


/* =========================================================
   LABEL
========================================================= */

.hjx-clients-label {
    display: inline-flex;

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

    gap: 12px;

    margin-bottom: 10px;

    color: #ff6a0a;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .4px;

    text-transform: uppercase;
}

.hjx-clients-label span {
    display: block;

    width: 38px;

    height: 2px;

    background: #ff6a0a;
}


/* =========================================================
   HEADING
========================================================= */

.hjx-clients-header h2 {
    margin: 0 0 10px;

    color: #092b63;

    font-family: "nunito", sans-serif;

    font-size: 40px;

    line-height: 1.15;

    font-weight: 800;
}

.hjx-clients-header h2 strong {
    color: #ff6a0a;

    font-weight: 700;
}


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

.hjx-clients-header p {
    max-width: 850px;

    margin: 0 auto;

    color: #657187;

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

    font-size: 15px;

    line-height: 1.55;
}


/* =========================================================
   CAROUSEL
========================================================= */

.hjx-clients-carousel {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

    margin-top: 28px;
}


/* =========================================================
   VIEWPORT
========================================================= */

.hjx-clients-viewport {
    width: 100%;

    overflow: hidden;

    padding: 5px 0;
}


/* =========================================================
   TRACK
========================================================= */

.hjx-clients-track {
    display: flex;

    width: max-content;

    gap: 12px;

    transition:
        transform 1s cubic-bezier(.77, 0, .175, 1);
}


/* =========================================================
   LOGO BOX
========================================================= */

.hjx-client-logo {
    width: 150px;

    height: 70px;

    flex: 0 0 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 15px;

    background: #ffffff;

    border: 1px solid #e1eaf4;

    border-radius: 5px;

    box-shadow:
        0 3px 12px rgba(30, 70, 110, .04);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* =========================================================
   LOGO HOVER
========================================================= */

.hjx-client-logo:hover {
    transform: translateY(-3px);

    border-color: #bcd9f5;

    box-shadow:
        0 8px 20px rgba(30, 90, 150, .10);
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.hjx-client-logo img {
    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 48px;

    object-fit: contain;
}


/* =========================================================
   ARROWS
========================================================= */

.hjx-clients-arrow {
    position: absolute;

    top: 50%;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: #ffffff;

    color: #1479e8;

    font-size: 19px;

    cursor: pointer;

    z-index: 10;

    box-shadow:
        0 4px 15px rgba(20, 60, 100, .12);

    transform: translateY(-50%);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.hjx-clients-arrow:hover {
    background: #1479e8;

    color: #ffffff;

    transform:
        translateY(-50%)
        scale(1.05);
}


/* LEFT */

.hjx-clients-prev {
    left: -52px;
}


/* RIGHT */

.hjx-clients-next {
    right: -52px;
}


/* =========================================================
   DOTS
========================================================= */

.hjx-clients-dots {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 18px;
}

.hjx-client-dot {
    width: 7px;

    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #ccd8e6;

    cursor: pointer;

    transition:
        width .3s ease,
        height .3s ease,
        background .3s ease;
}

.hjx-client-dot-active {
    width: 9px;

    height: 9px;

    background: #1479e8;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.hjx-clients-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 25px;
}

.hjx-clients-bottom span {
    width: 35px;

    height: 1px;

    background: #d7e2ee;
}

.hjx-clients-bottom p {
    margin: 0;

    color: #6c7789;

    font-size: 13px;

    line-height: 1.4;

    text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hjx-clients-wrapper {
        width: 88%;
    }

    .hjx-client-logo {
        width: 140px;

        flex-basis: 140px;
    }

    .hjx-clients-prev {
        left: -45px;
    }

    .hjx-clients-next {
        right: -45px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hjx-clients-section {
        padding: 60px 0;
    }

    .hjx-clients-wrapper {
        width: 90%;
    }

    .hjx-clients-header {
        margin-bottom: 25px;
    }

    .hjx-clients-label {
        font-size: 11px;

        gap: 8px;
    }

    .hjx-clients-label span {
        width: 25px;
    }

    .hjx-clients-header h2 {
        font-size: 28px;
    }

    .hjx-clients-header p {
        font-size: 12px;
    }

    .hjx-client-logo {
        width: 135px;

        height: 68px;

        flex-basis: 135px;

        padding: 8px 12px;
    }

    .hjx-client-logo img {
        max-height: 45px;
    }

    .hjx-clients-arrow {
        width: 32px;

        height: 32px;

        font-size: 16px;
    }

    .hjx-clients-prev {
        left: -16px;
    }

    .hjx-clients-next {
        right: -16px;
    }

    .hjx-clients-bottom {
        gap: 8px;
    }

    .hjx-clients-bottom span {
        width: 20px;
    }

    .hjx-clients-bottom p {
        font-size: 9px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hjx-clients-wrapper {
        width: 92%;
    }

    .hjx-clients-header h2 {
        font-size: 25px;
    }

    .hjx-client-logo {
        width: 125px;

        flex-basis: 125px;

        height: 65px;
    }

}
/* =========================================================
   HAJORAS FOOTER
   LARGE VERSION - REFERENCE MATCH
   UNIQUE PREFIX: hjnf-
========================================================= */

.hjnf-footer {
    width: 100%;
    margin: 0;
    padding: 0;

    background: #06285f;
    color: #ffffff;

    font-family: "Inter", sans-serif;
}

.hjnf-footer *,
.hjnf-footer *::before,
.hjnf-footer *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.hjnf-main {
    width: 100%;
    padding: 25px 0 18px;

    background:
        linear-gradient(
            90deg,
            #06285f 0%,
            #082f6e 50%,
            #06285f 100%
        );
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.hjnf-container {
    width: 86%;
    max-width: 1500px;

    margin: 0 auto;
}


/* =========================================================
   FOUR COLUMN GRID
========================================================= */

.hjnf-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        1.35fr
        .75fr
        1fr
        1fr;

    column-gap: 40px;

    align-items: start;
}


/* =========================================================
   BRAND COLUMN
========================================================= */

.hjnf-brand {
    padding-right: 35px;
}


/* =========================================================
   LOGO
========================================================= */

.hjnf-logo {
    display: inline-flex;

    align-items: center;

    margin-bottom: 8px;

    text-decoration: none;
}

.hjnf-logo img {
    display: block;

    width: auto;

    height: 52px;

    max-width: 230px;

    object-fit: contain;
}


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

.hjnf-description {
    max-width: 310px;

    margin: 0 0 14px;

    color: #e4ebf7;

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.hjnf-social {
    display: flex;

    align-items: center;

    gap: 10px;
}

.hjnf-social a {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    background: #ff6a0a;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.hjnf-social a:hover {
    background: #ffffff;

    color: #ff6a0a;

    transform: translateY(-2px);
}


/* =========================================================
   COLUMNS
========================================================= */

.hjnf-column {
    min-width: 0;

    padding-left: 28px;

    border-left: 1px solid rgba(255,255,255,.12);
}


/* =========================================================
   COLUMN TITLE
========================================================= */

.hjnf-title {
    margin: 0 0 8px;

    color: #ffffff;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 700;
}


/* =========================================================
   ORANGE LINE
========================================================= */

.hjnf-title-line {
    display: block;

    width: 26px;

    height: 2px;

    margin-bottom: 10px;

    background: #ff6a0a;
}


/* =========================================================
   QUICK LINKS
========================================================= */

.hjnf-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.hjnf-links li {
    margin: 0;
    padding: 0;
}

.hjnf-links a {
    display: block;

    width: fit-content;

    padding: 2px 0;

    color: #e5ebf6;

    text-decoration: none;

    font-size: 13px;

    line-height: 1.3;

    transition:
        color .25s ease,
        transform .25s ease;
}

.hjnf-links a:hover {
    color: #ff6a0a;

    transform: translateX(3px);
}


/* =========================================================
   CONTACT ITEMS
========================================================= */

.hjnf-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 11px;

    color: #e5ebf6;

    font-size: 13px;

    line-height: 1.4;
}

.hjnf-contact-item i {
    width: 16px;
    min-width: 16px;

    padding-top: 2px;

    color: #ff6a0a;

    font-size: 15px;

    text-align: center;
}

.hjnf-contact-item span {
    display: block;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.hjnf-bottom {
    width: 100%;

    border-top: 1px solid rgba(255,255,255,.32);

    background: #06285f;
}


/* =========================================================
   BOTTOM CONTAINER
========================================================= */

.hjnf-bottom-container {
    width: 86%;
    max-width: 1500px;

    min-height: 48px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.hjnf-copyright {
    color: #e1e8f3;

    font-size: 12px;

    line-height: 1.4;

    white-space: nowrap;
}


/* =========================================================
   LEGAL LINKS
========================================================= */

.hjnf-legal {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 16px;

    white-space: nowrap;
}

.hjnf-legal a {
    color: #e1e8f3;

    text-decoration: none;

    font-size: 12px;

    line-height: 1.4;

    transition: color .25s ease;
}

.hjnf-legal a:hover {
    color: #ff6a0a;
}


/* =========================================================
   DIVIDERS
========================================================= */

.hjnf-divider {
    width: 1px;

    height: 15px;

    background: rgba(255,255,255,.45);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hjnf-container,
    .hjnf-bottom-container {
        width: 90%;
    }

    .hjnf-grid {
        grid-template-columns:
            1.2fr
            .8fr
            1fr
            1fr;

        column-gap: 25px;
    }

    .hjnf-brand {
        padding-right: 15px;
    }

    .hjnf-column {
        padding-left: 20px;
    }

    .hjnf-logo img {
        height: 47px;
    }

    .hjnf-description {
        font-size: 12px;
    }

    .hjnf-links a,
    .hjnf-contact-item {
        font-size: 12px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hjnf-main {
        padding: 40px 0 30px;
    }

    .hjnf-container,
    .hjnf-bottom-container {
        width: 90%;
    }


    /* STACK */

    .hjnf-grid {
        grid-template-columns: 1fr;

        row-gap: 25px;
    }


    /* BRAND */

    .hjnf-brand {
        padding-right: 0;
    }

    .hjnf-logo img {
        height: 50px;
    }

    .hjnf-description {
        max-width: 450px;

        font-size: 13px;

        line-height: 1.5;
    }


    /* COLUMNS */

    .hjnf-column {
        padding-left: 0;

        padding-top: 20px;

        border-left: none;

        border-top: 1px solid rgba(255,255,255,.12);
    }

    .hjnf-title {
        font-size: 14px;
    }

    .hjnf-links a,
    .hjnf-contact-item {
        font-size: 13px;
    }


    /* BOTTOM */

    .hjnf-bottom-container {
        min-height: auto;

        padding: 18px 0;

        flex-direction: column;

        gap: 12px;

        text-align: center;
    }

    .hjnf-copyright {
        white-space: normal;

        font-size: 11px;
    }

    .hjnf-legal {
        flex-wrap: wrap;

        justify-content: center;

        gap: 8px 12px;

        white-space: normal;
    }

    .hjnf-legal a {
        font-size: 11px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hjnf-main {
        padding: 35px 0 25px;
    }

    .hjnf-container,
    .hjnf-bottom-container {
        width: 92%;
    }

    .hjnf-logo img {
        height: 45px;
    }

    .hjnf-description {
        font-size: 12px;
    }

    .hjnf-social a {
        width: 33px;
        height: 33px;

        font-size: 14px;
    }

    .hjnf-column {
        padding-top: 18px;
    }
}

.haj-hero-btn,
.haj-hero-btn:hover,
.haj-hero-btn:focus {
    font-size: 15px !important;
    font-weight: 600 !important;
    transform: none !important;
}

.hero-subtitle-white {
    color: #fff;
}
#scrollUp {
    display: none !important;
}
.hjs-tech-link,
.hjs-tech-link:hover,
.hjs-tech-link:focus {
    transform: none !important;
    scale: 1 !important;
    font-size: inherit !important;
    transition: none !important;
}

/* =========================================
   HAJORAS STICKY BUTTONS
========================================= */

.hjs-sticky-buttons {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 99999;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}


/* =========================================
   COMMON BUTTON
========================================= */

.hjs-sticky-btn {
    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

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

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 20px !important;
    line-height: 1 !important;

    box-sizing: border-box !important;

    transform: translateX(0);
    transition: transform 0.3s ease !important;
}


/* =========================================
   ICON
========================================= */

.hjs-sticky-btn i {
    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 20px !important;
    line-height: 1 !important;

    transform: none !important;

    transition: none !important;
}


/* =========================================
   HOVER
   ONLY SMALL SLIDE
   NO ZOOM / NO SHRINK
========================================= */

.hjs-sticky-btn:hover {
    width: 48px !important;
    height: 48px !important;

    transform: translateX(-5px) !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 20px !important;
}


/* Keep icon unchanged on hover */

.hjs-sticky-btn:hover i {
    font-size: 20px !important;

    transform: none !important;
}


/* =========================================
   WHATSAPP
========================================= */

.hjs-whatsapp {
    background: #25D366 !important;
}


/* =========================================
   INSTAGRAM
========================================= */

.hjs-instagram {
    background: linear-gradient(
        45deg,
        #F58529 0%,
        #DD2A7B 45%,
        #8134AF 75%,
        #515BD4 100%
    ) !important;
}


/* =========================================
   LINKEDIN
========================================= */

.hjs-linkedin {
    background: #0A66C2 !important;
}


/* =========================================
   BACK TO TOP
========================================= */

.hjs-back-top {
    background: #1B3A6B !important;
}


/* =========================================
   REMOVE OLD BACK-TO-TOP BUTTON
========================================= */

#scrollUp {
    display: none !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .hjs-sticky-buttons {
        right: 12px;
        bottom: 20px;

        gap: 8px;
    }

    .hjs-sticky-btn {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        font-size: 17px !important;
    }

    .hjs-sticky-btn i {
        font-size: 17px !important;
    }

    .hjs-sticky-btn:hover {
        width: 42px !important;
        height: 42px !important;

        transform: translateX(-3px) !important;
    }

    .hjs-sticky-btn:hover i {
        font-size: 17px !important;
    }
}