/* ============================================================
   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: #092b63;
    --ve-dark2: #123F63;
    --ve-navy: #155A86;
    --ve-gold: #ff6a0a;
    --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;
    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;
}

/* =========================================
   LEFT ALIGNED SECTION TAG
   ───── WHO WE ARE
========================================= */

.ve-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 14px;

    color: #FF6A0A;

    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.ve-section-tag::before {
    content: "";

    width: 50px;
    height: 2px;

    background: #FF6A0A;

    display: block;
    flex-shrink: 0;
}


/* =========================================
   CENTER ALIGNED SECTION TAG
   ───── OUR FOUNDATION ─────
========================================= */

.ve-section-tag-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 14px;

    color: #FF6A0A;

    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.ve-section-tag-center::before,
.ve-section-tag-center::after {
    content: "";

    width: 50px;
    height: 2px;

    background: #FF6A0A;

    display: block;
    flex-shrink: 0;
}

.ve-section-header h2 {
    font-size: 40px;
    font-weight: 800;
    color: #17212b;
    margin-bottom: 14px;
    line-height: 1.2;
    letter-spacing: -.8px;
}

.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: 52px;
    font-weight: 800;
    color: #fff;
    margin: 10px 0 18px;
    line-height: 1.12;
    letter-spacing: -1px;
}

.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: 40px;
    font-weight: 800;
    margin-bottom: 16px;
    font-family: "nunito", sans-serif;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.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: 20px;
}

.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;
    background: #FFF8F3;
}


/* =========================================
   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: #FFF8F3;

    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: #FFF8F3;

    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 15px;

    height: 45px;

    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: 767px) {
    .hj-pill-header {
        margin-top: -12px;
    }
}

@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: 5px 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: #F3F8FD;
    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;
}


/* =========================================================
   SECTION LABELS
========================================================= */

.hz-career-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;

    color: #FF6A0A;

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

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

.hz-career-pill::before {
    content: "";

    width: 48px;
    height: 2px;

    display: block;
    flex-shrink: 0;

    background: #FF6A0A;
}

/* Modal label remains independent from the section label */
.hz-modal-label {
    display: inline-flex;
    align-items: center;

    padding: 8px 18px;

    border: 1px solid rgba(28, 121, 200, 0.25);
    border-radius: 30px;

    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: #102957;

    font-family: "Nunito", sans-serif;
    font-size: 40px;
    font-weight: 800;

    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: #FF6A0A;
}

.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: #123B73;

    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: 11px;
    font-weight: 600;

    letter-spacing: .7px;
}

.hz-job-title {
    margin: 0 0 8px;

    color: #123B73;

    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 {

    background: #1C79C8;

    color: #FFFFFF;
}

.hz-apply-job:hover {
    background: #FF6A0A;

}


/* =========================================================
   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: #123B73;

    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 {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 0;

    background: transparent;

    color: #FF6A0A;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;

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

.hz-dark-pill::before {
    content: "";

    width: 48px;
    height: 2px;

    display: block;

    background: #FF6A0A;
}


.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: #FF6A0A;
}

.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: #FF6A0A;

    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: #123B73;

    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: #123B73;

    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: #FF6A0A;

    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-pill,
    .hz-dark-pill {
        gap: 10px;
        font-size: 12px;
        letter-spacing: 1.2px;
    }

    .hz-career-pill::before,
    .hz-dark-pill::before {
        width: 32px;
        height: 2px;
    }


    .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 BRAND FINISH
   Section labels use the orange-line style.
   Main headings use Hajoras navy with orange highlights.
   Primary buttons use Hajoras blue with orange hover.
   No section layout, spacing, animation, or responsive
   structure has been changed.
========================================================= */


/* =========================================================
   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;
    }

}


/* =====================================
   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 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;
}

/* =====================================================
   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;
}

/* =========================================
   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: 50px 0 90px;

    background: #FFF4EC;

    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;
    padding : 5px;
}

.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: 50px 0 90px;

    background: #F1F8F6;

    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: 50px 0 75px;
    background: #F6F3FA;

    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: 50px 0 70px;

    background: #F7F7F5;

    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;
    }
}

.hjx-about-card:nth-child(2) .hjx-about-card-icon,
.hjx-about-card:nth-child(4) .hjx-about-card-icon {
    background: #FFF0E8;
    color: #FF6A0A;
}

.hjx-about-card:nth-child(2) .hjx-about-card-icon i,
.hjx-about-card:nth-child(4) .hjx-about-card-icon i {
    color: #FF6A0A;
}


/* =========================================================
   HOW WE DELIVER
========================================================= */

.hjs-delivery-section {
    position: relative;
    padding: 100px 20px;

    background:
        linear-gradient(
            135deg,
            #F3F8FD 0%,
            #FFFFFF 50%,
            #FFF7F0 100%
        );

    overflow: hidden;
}




/* Container */

.hjs-delivery-container {
    position: relative;
    z-index: 2;

    max-width: 1250px;
    margin: 0 auto;
}


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

.hjs-delivery-heading {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 65px;
}


.hjs-delivery-tag {
    display: inline-flex;

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

    gap: 12px;

    color: #FF6A0A;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    margin-bottom: 15px;
}


.hjs-delivery-tag span {
    width: 42px;
    height: 2px;

    background: #FF6A0A;
}


.hjs-delivery-heading h2 {
    margin: 0;

    color: #092b63;

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

    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
}


.hjs-delivery-heading h2 strong {
    color: #1C79C8;
}


.hjs-delivery-heading h2 em {
    color: #FF6A0A;
    font-style: normal;
}


.hjs-delivery-heading p {
    max-width: 720px;

    margin: 18px auto 0;

    color: #5C6B7F;

    font-family: "DM Sans", sans-serif;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   PROCESS
========================================================= */

.hjs-delivery-process {
    position: relative;

    display: grid;

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

    gap: 24px;
}


/* Connecting line */

.hjs-delivery-process::before {
    content: "";

    position: absolute;

    top: 55px;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(28,121,200,.15),
            #1C79C8,
            rgba(255,106,10,.35)
        );

    z-index: 0;
}


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

.hjs-delivery-card {
    position: relative;

    z-index: 1;

    padding: 30px 28px 32px;

    min-height: 270px;

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

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

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(18,59,115,.06);

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


.hjs-delivery-card:hover {
    transform: translateY(-7px);

    border-color: rgba(28,121,200,.30);

    box-shadow:
        0 18px 45px rgba(18,59,115,.10);
}


/* Number */

.hjs-delivery-number {
    position: absolute;

    top: 18px;
    right: 22px;

    color: rgba(28,121,200,.15);

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

    font-size: 34px;
    font-weight: 800;
}


/* Icon */

.hjs-delivery-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    background: #EAF4FF;

    color: #1C79C8;

    font-size: 21px;

    margin-bottom: 24px;

    transition:
        background .3s ease,
        color .3s ease;
}


.hjs-delivery-card:nth-child(2) .hjs-delivery-icon {
    background: #FFF0E8;
    color: #FF6A0A;
}


.hjs-delivery-card:nth-child(3) .hjs-delivery-icon {
    background: #EAF4FF;
    color: #1C79C8;
}


.hjs-delivery-card:nth-child(4) .hjs-delivery-icon {
    background: #FFF0E8;
    color: #FF6A0A;
}


.hjs-delivery-card:hover .hjs-delivery-icon {
    background: #1C79C8;
    color: #FFFFFF;
}


.hjs-delivery-card:nth-child(2):hover .hjs-delivery-icon,
.hjs-delivery-card:nth-child(4):hover .hjs-delivery-icon {
    background: #FF6A0A;
    color: #FFFFFF;
}


/* Title */

.hjs-delivery-card h3 {
    margin: 0 0 10px;

    color: #123B73;

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

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


/* Description */

.hjs-delivery-card p {
    margin: 0;

    color: #66758A;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.65;
}


/* Bottom accent */

.hjs-delivery-line {
    position: absolute;

    left: 28px;
    bottom: 22px;

    width: 35px;
    height: 2px;

    background: #1C79C8;

    transition: width .35s ease;
}


.hjs-delivery-card:nth-child(even)
.hjs-delivery-line {
    background: #FF6A0A;
}


.hjs-delivery-card:hover
.hjs-delivery-line {
    width: 65px;
}


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

.hjs-delivery-cta {
    margin-top: 55px;

    padding: 30px 38px;

    display: flex;

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

    gap: 30px;

    border-radius: 18px;

    background:
        linear-gradient(
            100deg,
            #123B73,
            #1C79C8
        );

    box-shadow:
        0 15px 40px rgba(18,59,115,.15);
}


.hjs-delivery-cta span {
    display: block;

    margin-bottom: 6px;

    color: #FFB27F;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.hjs-delivery-cta h3 {
    margin: 0;

    color: #FFFFFF;

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

    font-size: 25px;
    font-weight: 700;
}


.hjs-delivery-cta h3 strong {
    color: #FF6A0A;
}


.hjs-delivery-cta a {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    padding: 14px 24px;

    background: #FF6A0A;

    color: #FFFFFF;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform .3s ease,
        background .3s ease;
}


.hjs-delivery-cta a:hover {
    background: #E85C00;
    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .hjs-delivery-process {
        grid-template-columns: repeat(2, 1fr);
    }

    .hjs-delivery-process::before {
        display: none;
    }
}


@media (max-width: 600px) {

    .hjs-delivery-section {
        padding: 70px 18px;
    }

    .hjs-delivery-heading h2 {
        font-size: 32px;
    }

    .hjs-delivery-heading p {
        font-size: 15px;
    }

    .hjs-delivery-process {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hjs-delivery-card {
        min-height: auto;
        padding: 25px;
    }

    .hjs-delivery-cta {
        flex-direction: column;
        align-items: flex-start;

        padding: 28px 24px;
    }

    .hjs-delivery-cta h3 {
        font-size: 22px;
    }

    .hjs-delivery-cta a {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   PREMIUM SERVICE CARD ENTRANCE
   ========================================= */

.hjs-tech-card {
    position: relative;
    overflow: hidden;

    opacity: 0;

    transform:
        translateY(45px)
        scale(0.94);

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.7s ease;
}


/* LEFT SIDE CARDS */
.hjs-tech-card:nth-child(1),
.hjs-tech-card:nth-child(4) {
    transform:
        translateX(-80px)
        translateY(35px)
        scale(0.94);
}


/* CENTER CARDS */
.hjs-tech-card:nth-child(2),
.hjs-tech-card:nth-child(5) {
    transform:
        translateY(70px)
        scale(0.94);
}


/* RIGHT SIDE CARDS */
.hjs-tech-card:nth-child(3),
.hjs-tech-card:nth-child(6) {
    transform:
        translateX(80px)
        translateY(35px)
        scale(0.94);
}


/* =========================================
   FINAL POSITION
   ========================================= */

.hjs-tech-card.hjs-card-show {
    opacity: 1;

    transform:
        translateX(0)
        translateY(0)
        scale(1);
}


/* =========================================
   PREMIUM STAGGER
   ========================================= */

.hjs-tech-card:nth-child(1) {
    transition-delay: 0s;
}

.hjs-tech-card:nth-child(2) {
    transition-delay: 0.08s;
}

.hjs-tech-card:nth-child(3) {
    transition-delay: 0.16s;
}

.hjs-tech-card:nth-child(4) {
    transition-delay: 0.24s;
}

.hjs-tech-card:nth-child(5) {
    transition-delay: 0.32s;
}

.hjs-tech-card:nth-child(6) {
    transition-delay: 0.40s;
}


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

@media (max-width: 767px) {

    .hjs-tech-card {
        transform:
            translateY(40px)
            scale(0.95);
    }

    .hjs-tech-card.hjs-card-show {
        transform:
            translateY(0)
            scale(1);
    }

}

/* ==========================================
   PREMIUM IMAGE ENTRANCE EFFECT
   ========================================== */

.hjw-image-holder,
.hjx-about-image-holder {
    opacity: 0;
    will-change: transform, opacity;
}


/* Image on the RIGHT side */
.hjw-image-holder {
    transform: translateX(70px) scale(0.96);
    animation: hjwImageEntrance 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}


/* Image on the LEFT side */
.hjx-about-image-holder {
    transform: translateX(-70px) scale(0.96);
    animation: hjxImageEntrance 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}


/* Right → Center */
@keyframes hjwImageEntrance {

    0% {
        opacity: 0;
        transform: translateX(70px) scale(0.96);
    }

    70% {
        opacity: 1;
        transform: translateX(-5px) scale(1.005);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}


/* Left → Center */
@keyframes hjxImageEntrance {

    0% {
        opacity: 0;
        transform: translateX(-70px) scale(0.96);
    }

    70% {
        opacity: 1;
        transform: translateX(5px) scale(1.005);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

}


/* Mobile */
@media (max-width: 767px) {

    .hjw-image-holder {
        transform: translateY(35px) scale(0.97);
        animation-name: hjwImageMobileEntrance;
    }

    .hjx-about-image-holder {
        transform: translateY(35px) scale(0.97);
        animation-name: hjxImageMobileEntrance;
    }

    @keyframes hjwImageMobileEntrance {

        0% {
            opacity: 0;
            transform: translateY(35px) scale(0.97);
        }

        70% {
            opacity: 1;
            transform: translateY(-3px) scale(1.005);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

    }

    @keyframes hjxImageMobileEntrance {

        0% {
            opacity: 0;
            transform: translateY(35px) scale(0.97);
        }

        70% {
            opacity: 1;
            transform: translateY(-3px) scale(1.005);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

    }

}


/* ========================================
   HAJORAS STATS COUNTER SECTION
======================================== */

.hj-counter-section {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;

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

    padding: 22px 20px;
    margin: 0;

    background: #ffffff;
    border: 1px solid rgba(220, 230, 240, 0.4);
    border-radius: 10px;

    box-shadow: 0 10px 35px rgba(20, 40, 60, 0.07);

    box-sizing: border-box;
}

/* ========================================
   INDIVIDUAL COUNTER ITEMS
======================================== */

.hj-counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 78px;

    padding: 0 10px;

    text-align: center;
    box-sizing: border-box;
}

/* ========================================
   VERTICAL DIVIDERS
======================================== */

.hj-counter-item:not(:last-child) {
    border-right: 1px solid #d9e2ef;
}

/* ========================================
   COUNTER NUMBERS
======================================== */

.hj-counter-number {
    display: block;

    margin: 0;
    padding: 0;

    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;

    color: #1877ed;

    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Alternate Blue and Orange Numbers */

.hj-counter-item:nth-child(odd) .hj-counter-number {
    color: #1877ed;
}

.hj-counter-item:nth-child(even) .hj-counter-number {
    color: #ff6a0a;
}

/* ========================================
   COUNTER LABELS
======================================== */

.hj-counter-item span {
    display: block;

    margin: 5px 0 0;
    padding: 0;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;

    color: #52627d;

    text-align: center;
    overflow-wrap: break-word;
}

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

@media (max-width: 768px) {
    .hj-counter-section {
        max-width: 100%;
        padding: 18px 12px;
        border-radius: 16px;
    }

    .hj-counter-item {
        min-height: 72px;
        padding: 0 7px;
    }

    .hj-counter-number {
        font-size: 29px;
    }

    .hj-counter-item span {
        font-size: 12px;
    }
}

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

@media (max-width: 480px) {
    .hj-counter-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;

        padding: 14px 10px;
        border-radius: 15px;
    }

    .hj-counter-item {
        min-height: 76px;
        padding: 10px 5px;
    }

    /* Remove default dividers */
    .hj-counter-item:not(:last-child) {
        border-right: none;
    }

    /* Vertical divider between columns */
    .hj-counter-item:nth-child(odd) {
        border-right: 1px solid #d9e2ef;
    }

    /* Horizontal divider between rows */
    .hj-counter-item:nth-child(1),
    .hj-counter-item:nth-child(2) {
        border-bottom: 1px solid #d9e2ef;
    }

    .hj-counter-number {
        font-size: 28px;
    }

    .hj-counter-item span {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.4;
    }
}

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

@media (max-width: 360px) {
    .hj-counter-section {
        padding: 10px 6px;
    }

    .hj-counter-item {
        padding: 8px 3px;
        min-height: 68px;
    }

    .hj-counter-number {
        font-size: 24px;
    }

    .hj-counter-item span {
        font-size: 11px;
    }
}

/* =========================================
   WHY HAJORAS / PARTNER SECTION
   ========================================= */

.hjw-partner-section {
    width: 100%;
    padding: 90px 20px;
    background: #f7fbff;
    overflow: hidden;
}

.hjw-partner-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}


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

.hjw-partner-content {
    max-width: 570px;
}


/* Section label */
.hjw-partner-label {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 12px;

    color: #ff6a0a;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;

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

.hjw-partner-label i {
    order: -1;

    width: 28px;
    height: 2px;

    background: #ff6a0a;

    display: block;
    flex-shrink: 0;
}


/* Heading */

.hjw-partner-content h2 {
    margin: 0 0 14px;

    color: #123b73;

    font-family: "Nunito", sans-serif;
    font-size: 38px;
    line-height: 1.12;
    font-weight: 800;
}

.hjw-partner-content h2 span {
    color: #ff6a0a;
    font-weight: 700;
}


/* Intro */

.hjw-partner-intro {
    max-width: 500px;

    margin: 0 0 24px;

    color: #526b85;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.45;
}


/* =========================================
   FEATURE ROWS
   ========================================= */

.hjw-partner-feature {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 13px;
}


/* Icon */

.hjw-feature-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    border-radius: 11px;

    font-size: 20px;
}


/* Individual icon backgrounds */

.hjw-feature-icon.hjw-blue {
    background: #e8f3ff;
    color: #1c79c8;
}

.hjw-feature-icon.hjw-purple {
    background: #eeeeff;
    color: #6555d8;
}

.hjw-feature-icon.hjw-orange {
    background: #fff0e5;
    color: #ff6a0a;
}

.hjw-feature-icon.hjw-cyan {
    background: #e3f8fb;
    color: #159ab1;
}


/* Feature text */

.hjw-feature-text h4 {
    margin: 0 0 2px;

    color: #123b73;

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

.hjw-feature-text p {
    margin: 0;

    color: #60758d;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.35;
}


/* =========================================
   RIGHT VISUAL
   ========================================= */

.hjw-partner-visual {
    position: relative;

    min-height: 500px;

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


/* =========================================
   MAIN IMAGE
   ========================================= */

.hjw-partner-image {
    position: relative;
    z-index: 2;

    width: 88%;
    max-width: 500px;

    overflow: hidden;

    border-radius: 24px 75px 24px 18px;

}


/* Image */

.hjw-partner-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


/* =========================================
   IMAGE DECORATIVE BORDER
   ========================================= */

.hjw-partner-image::before {
    content: "";

    position: absolute;

    inset: -10px;

    border: 1.5px dashed rgba(28, 121, 200, 0.32);

    border-radius: 30px 85px 30px 25px;

    pointer-events: none;
}


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

.hjw-floating-card {
    position: absolute;

    top: 18px;
    right: 0;

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 18px;

    border-radius: 13px;

    box-shadow:
        0 10px 30px rgba(18, 59, 115, 0.12);
}


/* Floating icon */

.hjw-floating-icon {
    width: 48px;
    height: 48px;

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

    background: #ff6a0a;

    border-radius: 4px;

    color: #ffffff;

    font-size: 22px;
}


/* Floating text */

.hjw-floating-text {
    display: flex;
    flex-direction: column;

    color: #123b73;

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


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

@media (max-width: 900px) {

    .hjw-partner-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .hjw-partner-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .hjw-partner-visual {
        min-height: 450px;
    }

}


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

@media (max-width: 600px) {

    .hjw-partner-section {
        padding: 65px 18px;
    }

    .hjw-partner-container {
        gap: 35px;
    }

    .hjw-partner-content h2 {
        font-size: 30px;
    }

    .hjw-partner-intro {
        font-size: 14px;
    }

    .hjw-partner-feature {
        gap: 13px;
    }

    .hjw-feature-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 18px;
    }

    .hjw-feature-text h4 {
        font-size: 14px;
    }

    .hjw-feature-text p {
        font-size: 12px;
    }

    .hjw-partner-visual {
        min-height: 350px;
    }

    .hjw-partner-image {
        width: 92%;
        border-radius: 18px 50px 18px 14px;
    }

    .hjw-floating-card {
        top: 0;
        right: -2px;

        padding: 9px 12px;
    }

    .hjw-floating-icon {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .hjw-floating-text {
        font-size: 9px;
    }

    .hjw-dots {
        display: none;
    }

}

/* =========================================
   OUR STORY SECTION
   ========================================= */

.hjs-story-section {
    width: 100%;
    padding: 80px 20px;

    background: #f4f9fd;

    overflow: hidden;
}

.hjs-story-container {
    max-width: 1120px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;

    gap: 70px;
}


/* =========================================
   LEFT VISUAL
   ========================================= */

.hjs-story-visual {
    position: relative;

    min-height: 390px;

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


/* IMAGE */

.hjs-story-image {
    position: relative;
    z-index: 2;

    width: 88%;
    max-width: 430px;

    overflow: hidden;

    border-radius: 12px;

    box-shadow:
        0 18px 35px rgba(18, 59, 115, 0.12);
}

.hjs-story-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


/* =========================================
   ORANGE DOT PATTERN
   ========================================= */

.hjs-story-dots {
    position: absolute;

    left: -15px;
    top: 125px;

    width: 100px;
    height: 65px;

    background-image: radial-gradient(
        #ff6a0a 1.3px,
        transparent 1.3px
    );

    background-size: 8px 8px;

    opacity: 0.85;

    z-index: 1;
}


/* =========================================
   EXPERIENCE BADGE
   ========================================= */

.hjs-story-badge {
    position: absolute;

    left: 20px;
    bottom: 25px;

    z-index: 5;

    min-width: 150px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 16px;

    background: #ffffff;

    border-radius: 9px;

    box-shadow:
        0 10px 28px rgba(18, 59, 115, 0.15);
}


/* Badge icon */

.hjs-story-badge-icon {
    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    background: #fff0e6;

    color: #ff6a0a;

    font-size: 18px;
}


/* Badge text */

.hjs-story-badge-content {
    display: flex;
    flex-direction: column;
}

.hjs-story-badge-content strong {
    color: #123b73;

    font-family: "Nunito", sans-serif;
    font-size: 19px;
    font-weight: 800;

    line-height: 1;
}

.hjs-story-badge-content span {
    margin-top: 4px;

    color: #60758d;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
}


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

.hjs-story-content {
    max-width: 570px;
}


/* STORY LABEL */

.hjs-story-label {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: #ff6a0a;

    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;

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

.hjs-story-label i {
    display: block;

    width: 24px;
    height: 2px;

    background: #ff6a0a;

    flex-shrink: 0;
}


/* HEADING */

.hjs-story-content h2 {
    margin: 0 0 16px;

    color: #092b63;

    font-family: "Nunito", sans-serif;
    font-size: 40px;
    line-height: 1.12;
    font-weight: 800;
}

.hjs-story-content h2 span {
    color: #ff6a0a;
    font-weight: 700;
}


/* PARAGRAPHS */

.hjs-story-content p {
    margin: 0 0 13px;

    color: #526b85;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.55;
}


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

@media (max-width: 900px) {

    .hjs-story-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .hjs-story-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .hjs-story-visual {
        max-width: 550px;
        width: 100%;
        margin: 0 auto;
    }

}


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

@media (max-width: 600px) {

    .hjs-story-section {
        padding: 60px 18px;
    }

    .hjs-story-container {
        gap: 35px;
    }

    .hjs-story-visual {
        min-height: 320px;
    }

    .hjs-story-image {
        width: 90%;
    }

    .hjs-story-badge {
        left: 5px;
        bottom: 15px;

        min-width: 135px;

        padding: 10px 12px;
    }

    .hjs-story-badge-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .hjs-story-content h2 {
        font-size: 30px;
    }

    .hjs-story-content p {
        font-size: 13px;
        line-height: 1.55;
    }

    .hjs-story-dots {
        left: -20px;
    }

}

/* =========================================================
   HAJORAS — MISSION & VISION SECTION
   Premium Dark Corporate WordPress Style
   ========================================================= */


/* =========================================================
   MAIN SECTION
   ========================================================= */

.hjmvv-dark-section {
    position: relative;

    width: 100%;

    padding: 105px 30px;

    background:
        linear-gradient(
            135deg,
            #071d35 0%,
            #0a2948 50%,
            #09213b 100%
        );

    overflow: hidden;
}


/* =========================================================
   BACKGROUND BLUE LIGHT
   ========================================================= */

.hjmvv-dark-section::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: -350px;
    top: -330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(28, 121, 200, 0.15) 0%,
            rgba(28, 121, 200, 0.05) 40%,
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   BACKGROUND ORANGE LIGHT
   ========================================================= */

.hjmvv-dark-section::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -320px;
    bottom: -340px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 106, 10, 0.11) 0%,
            rgba(255, 106, 10, 0.04) 40%,
            transparent 70%
        );

    pointer-events: none;
}


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

.hjmvv-dark-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;
}


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

.hjmvv-dark-header {
    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;
}


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

.hjmvv-dark-tag {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-bottom: 15px;

    color: #FF6A0A;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* Label lines */

.hjmvv-dark-tag span {
    width: 32px;

    height: 2px;

    display: block;

    background: #FF6A0A;
}


/* =========================================================
   MAIN H2
   ========================================================= */

.hjmvv-dark-header h2 {
    margin: 0 0 16px;

    color: #FFFFFF;

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

    font-size: 42px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.5px;
}


/* Mission = White
   Vision = Orange */

.hjmvv-dark-header h2 span {
    color: #FF6A0A;
}


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

.hjmvv-dark-header p {
    max-width: 650px;

    margin: 0 auto;

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

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   CARDS GRID
   ========================================================= */

.hjmvv-dark-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 28px;
}


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

.hjmvv-dark-card {
    position: relative;

    min-height: 390px;

    padding: 45px 48px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 59, 115, 0.95),
            rgba(7, 34, 60, 0.98)
        );

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

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.18);

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


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

.hjmvv-dark-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(255, 255, 255, 0.15);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.26);
}


/* =========================================================
   MISSION TOP BORDER
   ========================================================= */

.hjmvv-dark-mission {
    border-top: 3px solid #1C79C8;
}


/* =========================================================
   VISION TOP BORDER
   ========================================================= */

.hjmvv-dark-vision {
    border-top: 3px solid #FF6A0A;
}


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

.hjmvv-dark-card-glow {
    position: absolute;

    width: 230px;

    height: 230px;

    top: -130px;

    right: -110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(28, 121, 200, 0.15),
            transparent 70%
        );

    pointer-events: none;
}


/* Vision glow */

.hjmvv-dark-vision
.hjmvv-dark-card-glow {
    background:
        radial-gradient(
            circle,
            rgba(255, 106, 10, 0.13),
            transparent 70%
        );
}


/* =========================================================
   ICON BOX
   ========================================================= */

.hjmvv-dark-icon {
    position: relative;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    border-radius: 16px;

    background:
        rgba(28, 121, 200, 0.12);

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

    color: #55A9ED;

    font-size: 25px;
}


/* =========================================================
   VISION ICON
   ========================================================= */

.hjmvv-dark-vision
.hjmvv-dark-icon {
    background:
        rgba(255, 106, 10, 0.10);

    border-color:
        rgba(255, 106, 10, 0.25);

    color: #FF8A42;
}


/* =========================================================
   MISSION TITLE
   ========================================================= */

.hjmvv-dark-mission h3 {
    position: relative;

    margin: 0 0 17px;

    color: #FFFFFF;

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

    font-size: 30px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   VISION TITLE
   ========================================================= */

.hjmvv-dark-vision h3 {
    position: relative;

    margin: 0 0 17px;

    color: #FF6A0A;

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

    font-size: 30px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   CARD ACCENT LINE
   ========================================================= */

.hjmvv-dark-line {
    width: 48px;

    height: 2px;

    margin-bottom: 22px;

    background: #1C79C8;
}


/* Vision line */

.hjmvv-dark-vision
.hjmvv-dark-line {
    background: #FF6A0A;
}


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

.hjmvv-dark-card p {
    position: relative;

    max-width: 650px;

    margin: 0;

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

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   BOTTOM TAGS
   ========================================================= */

.hjmvv-dark-bottom {
    position: absolute;

    left: 48px;

    bottom: 32px;

    display: flex;

    align-items: center;

    gap: 25px;
}


/* Individual tag */

.hjmvv-dark-bottom span {
    position: relative;

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

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   TAG SEPARATORS
   ========================================================= */

.hjmvv-dark-bottom span:not(:last-child)::after {
    content: "";

    position: absolute;

    width: 3px;

    height: 3px;

    right: -14px;

    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background: #1C79C8;
}


/* Vision separators */

.hjmvv-dark-vision
.hjmvv-dark-bottom
span:not(:last-child)::after {
    background: #FF6A0A;
}


/* Correct specific selector */

.hjmvv-dark-vision .hjmvv-dark-bottom span:not(:last-child)::after {
    background: #FF6A0A;
}


/* =========================================================
   BOTTOM CARD DETAIL
   ========================================================= */

.hjmvv-dark-card::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.10),
            transparent
        );

    pointer-events: none;
}


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

@media (max-width: 850px) {

    .hjmvv-dark-section {
        padding: 85px 22px;
    }

    .hjmvv-dark-grid {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .hjmvv-dark-card {
        min-height: 350px;
    }

}


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

@media (max-width: 600px) {

    .hjmvv-dark-section {
        padding: 70px 18px;
    }


    .hjmvv-dark-header {
        margin-bottom: 40px;
    }


    .hjmvv-dark-tag {
        font-size: 11px;

        letter-spacing: 1.2px;
    }


    .hjmvv-dark-tag span {
        width: 24px;
    }


    .hjmvv-dark-header h2 {
        font-size: 32px;

        line-height: 1.2;
    }


    .hjmvv-dark-header p {
        font-size: 14px;

        line-height: 1.65;
    }


    .hjmvv-dark-card {
        min-height: 350px;

        padding: 32px 25px;

        border-radius: 18px;
    }


    .hjmvv-dark-icon {
        width: 54px;

        height: 54px;

        font-size: 22px;
    }


    .hjmvv-dark-mission h3,
    .hjmvv-dark-vision h3 {
        font-size: 27px;
    }


    .hjmvv-dark-card p {
        font-size: 13px;

        line-height: 1.7;
    }


    .hjmvv-dark-bottom {
        left: 25px;

        bottom: 25px;

        gap: 18px;
    }


    .hjmvv-dark-bottom span {
        font-size: 10px;
    }

}

@media (max-width: 767px) {

    /* ==========================================
       MOBILE ONLY — OVERFLOW FIX
       ========================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }


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

    .hjs-header,
    .hjs-header-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    .hjs-header-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


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

    .hjs-hero,
    .hjs-hero-section,
    .hjs-hero-slider,
    .hjs-hero-container,
    .hjs-hero-slide {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }


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

    .hjs-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    .hjs-hero-content h1 {
        max-width: 100% !important;

        font-size: 34px !important;
        line-height: 1.15 !important;

        overflow-wrap: break-word !important;
    }


    .hjs-hero-content p {
        max-width: 100% !important;

        font-size: 14px !important;
        line-height: 1.6 !important;
    }


    /* ==========================================
       HERO IMAGE
       ========================================== */

    .hjs-hero-image,
    .hjs-hero-image img {
        max-width: 100% !important;
    }


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

    .hjs-mobile-toggle {
        flex-shrink: 0 !important;
    }


    /* ==========================================
       GENERAL MOBILE CONTAINERS
       ========================================== */

    .hjs-container,
    .hjs-container-fluid,
    .hjs-section-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* Prevent sections from creating horizontal scroll */

    section {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

}

/* =========================================================
   HAJORAS — WHY HAJORAS / CAREER BENEFITS
   Premium Corporate Design
   ========================================================= */

.hz-why-career-section {
    position: relative;

    width: 100%;

    padding: 90px 30px;

    background:
        linear-gradient(
            135deg,
            #f7fbff 0%,
            #ffffff 55%,
            #fff8f3 100%
        );

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND DETAILS
   ========================================================= */

.hz-why-career-section::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    left: -220px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(28, 121, 200, 0.07),
            transparent 70%
        );

    pointer-events: none;
}


.hz-why-career-section::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -180px;
    bottom: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 106, 10, 0.06),
            transparent 70%
        );

    pointer-events: none;
}


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

.hz-why-career-container {
    position: relative;

    z-index: 2;

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

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.95fr 1.35fr;

    align-items: center;

    gap: 65px;
}


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

.hz-why-career-content {
    max-width: 440px;
}


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

.hz-why-career-label {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

    color: #FF6A0A;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.hz-why-career-label span {
    display: block;

    width: 42px;
    height: 2px;

    background: #FF6A0A;

    flex-shrink: 0;
}


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

.hz-why-career-content h2 {
    margin: 0 0 18px;

    color: #092b63;

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

    font-size: 40px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.5px;
}


/* Orange highlight */

.hz-why-career-content h2 span {
    color: #FF6A0A;
}


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

.hz-why-career-content > p {
    max-width: 410px;

    margin: 0;

    color: #60758A;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   BENEFIT GRID
   ========================================================= */

.hz-why-career-grid {
    display: grid;

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

    gap: 12px;
}


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

.hz-why-career-card {
    position: relative;

    min-height: 145px;

    padding: 17px 14px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

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

    border: 1px solid #E5ECF3;

    border-radius: 11px;

    box-shadow:
        0 5px 18px rgba(18, 59, 115, 0.045);

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


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

.hz-why-career-card:hover {
    transform: translateY(-5px);

    border-color: #C9DDEC;

    box-shadow:
        0 12px 28px rgba(18, 59, 115, 0.09);
}


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

.hz-why-career-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 9px;

    display: flex;

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

    color: #1C79C8;

    font-size: 24px;

    background: transparent;
}


/* Alternate orange icons */

.hz-why-career-card:nth-child(3n + 1)
.hz-why-career-icon {
    color: #FF6A0A;
}

.hz-why-career-card:nth-child(3n)
.hz-why-career-icon {
    color: #FF6A0A;
}


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

.hz-why-career-card h3 {
    margin: 0 0 5px;

    color: #123B73;

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

    font-size: 15px;

    line-height: 1.15;

    font-weight: 600;
}


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

.hz-why-career-card p {
    max-width: 150px;

    margin: 0;

    color: #718397;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    line-height: 1.35;
}


/* =========================================================
   DESKTOP CARD ACCENT
   ========================================================= */

.hz-why-career-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background: #FF6A0A;

    transition: width 0.3s ease;
}


.hz-why-career-card:hover::before {
    width: 35px;
}


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

@media (max-width: 950px) {

    .hz-why-career-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .hz-why-career-content {
        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }

    .hz-why-career-content > p {
        margin-left: auto;
        margin-right: auto;
    }

}


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

@media (max-width: 650px) {

    .hz-why-career-section {
        padding: 65px 18px;
    }


    .hz-why-career-container {
        gap: 35px;
    }


    .hz-why-career-label {
        font-size: 11px;

        gap: 9px;
    }


    .hz-why-career-label span {
        width: 30px;
    }


    .hz-why-career-content h2 {
        font-size: 31px;

        line-height: 1.2;
    }


    .hz-why-career-content > p {
        font-size: 13px;

        line-height: 1.65;
    }


    .hz-why-career-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }


    .hz-why-career-card {
        min-height: 140px;

        padding: 16px 10px;
    }


    .hz-why-career-icon {
        width: 38px;
        height: 38px;

        font-size: 21px;

        margin-bottom: 7px;
    }


    .hz-why-career-card h3 {
        font-size: 14px;
    }


    .hz-why-career-card p {
        font-size: 13px;
    }

}

.hz-orange-heading {
    color: #FF6A0A !important;
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   HAJORAS - JOIN OUR TEAM CTA
========================================= */

.hz-join-section {
    width: 100%;
    padding: 0 20px;
    background: #F5F9FD;
    overflow: hidden;
}

.hz-join-container {
    position: relative;

    width: 100%;
    max-width: 1400px;
    min-height: 350px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    background: #FFFFFF;

    overflow: hidden;
}


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

.hz-join-content {
    position: relative;
    z-index: 5;

    width: 65%;

    padding: 55px 30px 55px 70px;
}


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

.hz-join-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 17px;

    color: #FF6A0A;

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

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

.hz-join-label span {
    width: 52px;
    height: 2px;

    display: block;

    background: #FF6A0A;
}


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

.hz-join-content h2 {
    max-width: 850px;

    margin: 0 0 12px;

    color: #092B63;

    font-family: "Nunito", sans-serif;
    font-size: 40px;
    font-weight: 800;

    line-height: 1.2;
}

.hz-join-content h2 span {
    color: #FF6A0A;
}


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

.hz-join-content p {
    max-width: 700px;

    margin: 0 0 25px;

    color: #64748B;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.65;
}


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

.hz-join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-width: 255px;
    padding: 16px 28px;

    background: #1C79C8;
    color: #FFFFFF;

    border-radius: 7px;

    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;



}

.hz-join-btn i {
    font-size: 16px;

    transition: transform 0.3s ease;
}

.hz-join-btn:hover {
    background: #FF6A0A;
    color: #FFFFFF;

    transform: translateY(-2px);

}

.hz-join-btn:hover i {
    transform: translateX(5px);
}


/* =========================================
   RIGHT IMAGE AREA
========================================= */

.hz-join-image {
    position: absolute;

    top: 0;
    right: 0;

    width: 39%;
    height: 100%;

    z-index: 2;
}


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

.hz-join-image-holder {
    position: absolute;

    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    clip-path: ellipse(76% 100% at 78% 50%);
}

.hz-join-image-holder img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.6s ease;
}

.hz-join-container:hover .hz-join-image-holder img {
    transform: scale(1.02);
}


/* =========================================
   ORANGE SHAPE
========================================= */

.hz-join-orange-shape {
    position: absolute;

    width: 150px;
    height: 150px;

    left: -20px;
    bottom: -70px;

    border-radius: 50%;

    background: #FF6A0A;

    z-index: 3;
}


/* =========================================
   DOT PATTERN
========================================= */

.hz-join-dots {
    position: absolute;

    top: 105px;
    left: -90px;

    width: 100px;
    height: 75px;

    z-index: 4;

    background-image: radial-gradient(
        #FF6A0A 2px,
        transparent 2px
    );

    background-size: 20px 20px;

    opacity: 0.9;
}


/* =========================================
   LEFT DECORATIVE CIRCLE
========================================= */

.hz-join-circle-left {
    position: absolute;

    width: 150px;
    height: 150px;

    left: -75px;
    top: -65px;

    border-radius: 50%;

    background: #EDF5FC;

    z-index: 1;
}


/* =========================================
   BOTTOM DECORATIVE CIRCLE
========================================= */

.hz-join-circle-bottom {
    position: absolute;

    width: 260px;
    height: 260px;

    right: 36%;
    bottom: -180px;

    border-radius: 50%;

    background: #EDF5FC;

    z-index: 1;
}


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

@media (max-width: 1000px) {

    .hz-join-content {
        width: 65%;
        padding: 45px 25px 45px 45px;
    }

    .hz-join-content h2 {
        font-size: 34px;
    }

    .hz-join-content p {
        font-size: 15px;
    }

    .hz-join-image {
        width: 42%;
    }

    .hz-join-dots {
        left: -60px;
    }
}


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

@media (max-width: 767px) {

    .hz-join-section {
        padding: 0;
    }

    .hz-join-container {
        min-height: auto;

        display: block;

        border-radius: 0;
    }


    /* Content */

    .hz-join-content {
        width: 100%;

        padding: 55px 22px 40px;

        text-align: left;
    }


    .hz-join-label {
        font-size: 12px;
        gap: 10px;
    }

    .hz-join-label span {
        width: 35px;
    }


    .hz-join-content h2 {
        font-size: 30px;
        line-height: 1.25;
    }


    .hz-join-content p {
        font-size: 14px;
        line-height: 1.65;

        margin-bottom: 22px;
    }


    /* Button */

    .hz-join-btn {
        width: 100%;
        min-width: 0;

        padding: 15px 20px;

        font-size: 15px;
    }


    /* Image */

    .hz-join-image {
        position: relative;

        width: 100%;
        height: 280px;

        margin-top: 0;
    }


    .hz-join-image-holder {
        position: absolute;

        width: 100%;
        height: 100%;

        clip-path: none;
    }


    .hz-join-image-holder img {
        object-position: center;
    }


    /* Hide desktop decorations */

    .hz-join-dots {
        display: none;
    }

    .hz-join-circle-left {
        display: none;
    }

    .hz-join-circle-bottom {
        display: none;
    }


    .hz-join-orange-shape {
        width: 100px;
        height: 100px;

        left: -35px;
        bottom: -45px;
    }
}


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

@media (max-width: 480px) {

    .hz-join-content {
        padding: 45px 18px 35px;
    }

    .hz-join-content h2 {
        font-size: 27px;
    }

    .hz-join-image {
        height: 240px;
    }

}

/* =========================================================
   HAJORAS - AI & AGENTIC AUTOMATION
   BODY SECTIONS ONLY
========================================================= */


/* =========================================================
   COMMON
========================================================= */

.hja-ai-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.hja-ai-section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #FF6A0A;

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

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

.hja-ai-section-label span {
    width: 48px;
    height: 2px;

    display: block;
    flex-shrink: 0;

    background: #FF6A0A;
}

.hja-ai-label-center {
    justify-content: center;
}


/* =========================================================
   SECTION 01
   AI CAPABILITIES
========================================================= */

.hja-ai-capabilities {
    width: 100%;
    padding: 100px 0;
    background: #F3F8FD;
    overflow: hidden;
}

.hja-ai-capabilities-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 75px;
    align-items: center;
}


/* IMAGE */

.hja-ai-capabilities-visual {
    width: 100%;
}

.hja-ai-image-frame {
    position: relative;

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

    margin: 0 auto;

    overflow: hidden;

}

.hja-ai-image-frame img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


/* CONTENT */

.hja-ai-capabilities-content {
    width: 100%;
}

.hja-ai-capabilities-content h2 {
    margin: 14px 0 0;

    color: #092B63;

    font-family: "Nunito", sans-serif;
    font-size: 40px;
    font-weight: 800;

    line-height: 1.12;
}

.hja-ai-capabilities-content h2 strong {
    display: block;
    color: #FF6A0A;
    font-weight: 700;
}

.hja-ai-intro {
    max-width: 650px;

    margin: 17px 0 28px;

    color: #526B87;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.75;
}


/* CAPABILITY LIST */

.hja-ai-capability-list {
    display: flex;
    flex-direction: column;
}

.hja-ai-capability {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 16px 0;

    border-bottom: 1px solid #DCE7F1;

    transition: transform 0.3s ease;
}

.hja-ai-capability:last-child {
    border-bottom: none;
}

.hja-ai-capability:hover {
    transform: translateX(5px);
}


/* ICON */

.hja-ai-capability-icon {
    position: relative;

    width: 48px;
    min-width: 48px;
    height: 48px;

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

    border-radius: 12px;

    background: #E7F2FC;
    color: #1C79C8;

    font-size: 19px;
}

.hja-ai-capability:nth-child(even) .hja-ai-capability-icon {
    background: #FFF0E6;
    color: #FF6A0A;
}

.hja-ai-capability-icon span {
    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 22px;
    height: 22px;

    padding: 0 4px;

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

    border-radius: 50%;

    background: #FFFFFF;

    border: 1px solid #DCE7F1;

    color: #1C79C8;

    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
}


/* TEXT */

.hja-ai-capability-text h3 {
    margin: 0 0 4px;

    color: #092B63;

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

    line-height: 1.4;
}

.hja-ai-capability-text p {
    margin: 0;

    color: #60758D;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.55;
}


/* =========================================================
   SECTION 02
   HOW AI AGENTS WORK
========================================================= */

.hja-ai-workflow {
    width: 100%;

    padding: 95px 0 105px;

    background: #FFFFFF;
}

.hja-ai-workflow-header {
    max-width: 820px;

    margin: 0 auto 65px;

    text-align: center;
}

.hja-ai-workflow-header h2 {
    margin: 14px 0 0;

    color: #092B63;

    font-family: "Nunito", sans-serif;
    font-size: 40px;
    font-weight: 800;

    line-height: 1.2;
}

.hja-ai-workflow-header h2 strong {
    color: #FF6A0A;
    font-weight: 700;
}

.hja-ai-workflow-header p {
    max-width: 760px;

    margin: 16px auto 0;

    color: #60758D;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;

    line-height: 1.7;
}


/* WORKFLOW */

.hja-ai-workflow-grid {
    position: relative;

    display: grid;

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

    gap: 28px;
}


/* CONNECTING LINE */

.hja-ai-workflow-line {
    position: absolute;

    top: 38px;
    left: 12%;
    right: 12%;

    height: 2px;

    background: repeating-linear-gradient(
        to right,
        #B9D5EC 0,
        #B9D5EC 7px,
        transparent 7px,
        transparent 13px
    );

    z-index: 0;
}


/* STEP */

.hja-ai-workflow-step {
    position: relative;

    z-index: 1;

    padding: 0 15px;

    text-align: center;
}


/* ICON */

.hja-ai-step-icon {
    width: 76px;
    height: 76px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    color: #FFFFFF;

    font-size: 25px;

    border: 5px solid #FFFFFF;

    box-shadow: 0 8px 25px rgba(9, 43, 99, 0.12);

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

.hja-ai-step-icon.blue {
    background: #1C79C8;
}

.hja-ai-step-icon.orange {
    background: #FF6A0A;
}

.hja-ai-workflow-step:hover .hja-ai-step-icon {
    transform: translateY(-4px);

    box-shadow: 0 13px 28px rgba(9, 43, 99, 0.16);
}


/* NUMBER */

.hja-ai-step-number {
    margin-bottom: 4px;

    color: #1C79C8;

    font-family: "Nunito", sans-serif;
    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1px;
}

.hja-ai-step-number.orange-number {
    color: #FF6A0A;
}


/* TITLE */

.hja-ai-workflow-step h3 {
    margin: 0 0 8px;

    color: #092B63;

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


/* DESCRIPTION */

.hja-ai-workflow-step p {
    max-width: 235px;

    margin: 0 auto;

    color: #657A91;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   SECTION 03
   BUSINESS BENEFITS
========================================================= */

.hja-ai-benefits {
    width: 100%;

    padding: 95px 0 105px;

    background: #FFF8F2;
}

.hja-ai-benefits-header {
    max-width: 850px;

    margin: 0 auto 55px;

    text-align: center;
}

.hja-ai-benefits-header h2 {
    margin: 14px 0 0;

    color: #092B63;

    font-family: "Nunito", sans-serif;
    font-size: 40px;
    font-weight: 800;

    line-height: 1.2;
}

.hja-ai-benefits-header h2 strong {
    color: #FF6A0A;
    font-weight: 700;
}

.hja-ai-benefits-header p {
    max-width: 800px;

    margin: 16px auto 0;

    color: #60758D;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;

    line-height: 1.7;
}


/* BENEFIT GRID */

.hja-ai-benefits-grid {
    display: grid;

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

    gap: 20px;
}


/* CARD */

.hja-ai-benefit-card {
    position: relative;

    padding: 27px 24px 25px;

    background: #FFFFFF;

    border: 1px solid #E9E5E1;

    border-radius: 15px;

    box-shadow: 0 8px 25px rgba(9, 43, 99, 0.05);

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

.hja-ai-benefit-card:hover {
    transform: translateY(-5px);

    border-color: #D6E5F3;

    box-shadow: 0 14px 35px rgba(9, 43, 99, 0.09);
}


/* CARD TOP */

.hja-ai-benefit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.hja-ai-benefit-top > span {
    color: #A1B2C2;

    font-family: "Nunito", sans-serif;
    font-size: 13px;
    font-weight: 800;
}


/* ICON */

.hja-ai-benefit-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 12px;

    font-size: 19px;
}

.blue-icon {
    background: #EAF4FD;
    color: #1C79C8;
}

.orange-icon {
    background: #FFF0E7;
    color: #FF6A0A;
}


/* TITLE */

.hja-ai-benefit-card h3 {
    margin: 0 0 10px;

    color: #092B63;

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

    line-height: 1.35;
}


/* DESCRIPTION */

.hja-ai-benefit-card > p {
    min-height: 105px;

    margin: 0;

    color: #63788F;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;

    line-height: 1.65;
}


/* EXAMPLE */

.hja-ai-example {
    margin-top: 20px;

    padding-top: 16px;

    border-top: 1px solid #E7EDF2;
}

.hja-ai-example small {
    display: block;

    margin-bottom: 5px;

    color: #FF6A0A;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.hja-ai-example strong {
    display: block;

    color: #526B82;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;

    line-height: 1.5;
}


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

@media (max-width: 1000px) {

    .hja-ai-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hja-ai-capabilities-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .hja-ai-capabilities-content h2,
    .hja-ai-workflow-header h2,
    .hja-ai-benefits-header h2 {
        font-size: 34px;
    }

    .hja-ai-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 767px) {

    .hja-ai-container {
        padding-left: 18px;
        padding-right: 18px;
    }


    /* SECTION 01 */

    .hja-ai-capabilities {
        padding: 65px 0;
    }

    .hja-ai-capabilities-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hja-ai-capabilities-visual {
        order: 1;
    }

    .hja-ai-capabilities-content {
        order: 2;
    }

    .hja-ai-capabilities-content h2 {
        font-size: 30px;
    }

    .hja-ai-intro {
        font-size: 14px;
    }


    /* SECTION 02 */

    .hja-ai-workflow {
        padding: 65px 0 75px;
    }

    .hja-ai-workflow-header {
        margin-bottom: 45px;
    }

    .hja-ai-workflow-header h2 {
        font-size: 30px;
    }

    .hja-ai-workflow-header p {
        font-size: 14px;
    }

    .hja-ai-workflow-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }


    /* VERTICAL LINE */

    .hja-ai-workflow-line {
        top: 38px;
        bottom: 38px;

        left: 39px;
        right: auto;

        width: 2px;
        height: auto;

        background: repeating-linear-gradient(
            to bottom,
            #B9D5EC 0,
            #B9D5EC 7px,
            transparent 7px,
            transparent 13px
        );
    }


    .hja-ai-workflow-step {
        display: grid;

        grid-template-columns: 78px 1fr;

        column-gap: 18px;

        padding: 0;

        text-align: left;
    }

    .hja-ai-step-icon {
        grid-row: span 3;

        width: 78px;
        height: 78px;

        margin: 0;

        font-size: 22px;
    }

    .hja-ai-step-number {
        margin-top: 3px;
    }

    .hja-ai-workflow-step h3 {
        margin-bottom: 5px;

        font-size: 18px;
    }

    .hja-ai-workflow-step p {
        max-width: none;

        margin: 0;

        font-size: 13px;
    }


    /* SECTION 03 */

    .hja-ai-benefits {
        padding: 65px 0 75px;
    }

    .hja-ai-benefits-header {
        margin-bottom: 40px;
    }

    .hja-ai-benefits-header h2 {
        font-size: 30px;
    }

    .hja-ai-benefits-header p {
        font-size: 14px;
    }

    .hja-ai-benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hja-ai-benefit-card {
        padding: 24px 21px;
    }

    .hja-ai-benefit-card > p {
        min-height: auto;
    }

}


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

@media (max-width: 480px) {

    .hja-ai-section-label {
        font-size: 11px;
        letter-spacing: 1.1px;
        gap: 9px;
    }

    .hja-ai-section-label span {
        width: 32px;
    }

    .hja-ai-capabilities-content h2,
    .hja-ai-workflow-header h2,
    .hja-ai-benefits-header h2 {
        font-size: 27px;
    }

    .hja-ai-capability {
        gap: 14px;
    }

    .hja-ai-capability-icon {
        width: 43px;
        min-width: 43px;
        height: 43px;

        font-size: 16px;
    }

}

/* =========================================
   TOOLS & TECHNOLOGIES SECTION
========================================= */

.hja-tools-section {
    width: 100%;
    padding: 90px 20px;
    background: #F7FAFD;
}

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

/* Header */

.hja-tools-header {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.hja-tools-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;

    color: #FF6A0A;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.hja-tools-label span {
    width: 45px;
    height: 2px;
    background: #FF6A0A;
    display: block;
}

.hja-tools-header h2 {
    margin: 0 0 16px;

    color: #092B63;
    font-family: "Nunito", sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.12;
}

.hja-tools-header h2 span {
    color: #FF6A0A;
    font-weight: 700;
}

.hja-tools-header p {
    max-width: 650px;
    margin: 0 auto;

    color: #5D6B7A;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


/* Tools Grid */

.hja-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* Tool Card */

.hja-tool-card {
    position: relative;
    padding: 30px 26px;

    background: #FFFFFF;
    border: 1px solid #E4ECF4;
    border-radius: 14px;

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

.hja-tool-card:hover {
    transform: translateY(-5px);
    border-color: #BFD9F0;
    box-shadow: 0 14px 35px rgba(9, 43, 99, 0.08);
}


/* Icon */

.hja-tool-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 20px;

    background: #EAF4FF;
    border-radius: 12px;

    color: #1C79C8;
    font-size: 21px;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.hja-tool-card:hover .hja-tool-icon {
    background: #FF6A0A;
    color: #FFFFFF;
}


/* Card Content */

.hja-tool-card h3 {
    margin: 0 0 10px;

    color: #092B63;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.hja-tool-card p {
    margin: 0;

    color: #657383;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.65;
}


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

@media (max-width: 991px) {

    .hja-tools-section {
        padding: 75px 20px;
    }

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

    .hja-tools-header h2 {
        font-size: 34px;
    }
}


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

@media (max-width: 767px) {

    .hja-tools-section {
        padding: 60px 18px;
    }

    .hja-tools-header {
        margin-bottom: 38px;
    }

    .hja-tools-label {
        font-size: 13px;
        letter-spacing: 1.2px;
    }

    .hja-tools-header h2 {
        font-size: 30px;
    }

    .hja-tools-header p {
        font-size: 14px;
        line-height: 1.6;
    }

    .hja-tools-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hja-tool-card {
        padding: 24px 22px;
    }

    .hja-tool-card h3 {
        font-size: 19px;
    }
}

/* HAJORAS TECHNOLOGIES BODY */
.hz-tech-page {
  --orange: #FF6A0A;
  --blue: #1C79C8;
  --navy: #092B63;
  --text: #24364B;
  --muted: #5D6B7A;
  --border: #DFE8F1;
  --light-blue: #F5F9FD;
  --light-orange: #FFF7F0;
  --light-green: #F1F8F6;
  --light-purple: #F6F3FA;

  color: var(--text);
  background: #fff;
  font: 400 15px/1.75 "DM Sans", sans-serif;
  overflow: clip;
}

.hz-tech-page *,
.hz-tech-page *::before,
.hz-tech-page *::after {
  box-sizing: border-box;
}

.hz-tech-page img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.hz-tech-page h2,
.hz-tech-page h3,
.hz-tech-page p {
  margin-top: 0;
}

.hz-tech-page h2 {
  color: var(--navy);
  font: 800 40px/1.3 "Nunito", sans-serif;
  margin-bottom: 16px;
}

.hz-tech-page h2 em {
  color: var(--orange);
  font-style: normal;
  font-weight: 700;
}

.hz-tech-page h3 {
  color: var(--navy);
  font: 600 23px/1.4 "Poppins", sans-serif;
  margin-bottom: 10px;
}

.hz-tech-page p {
  margin-bottom: 0;
}

.hz-tech-page .hz-container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.hz-tech-page .hz-section {
  padding: 76px 0;
}

.hz-tech-page .hz-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--orange);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.hz-tech-page .hz-label::before {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--orange);
}

/* SECTION 1: CAPABILITIES */

.hz-tech-page .hz-capabilities {
  background: var(--light-blue);
}

.hz-tech-page .hz-section-heading {
  max-width: 820px;
  margin: 0 auto 38px;
  text-align: center;
}

.hz-tech-page .hz-section-heading .hz-label,
.hz-tech-page .hz-approach-heading .hz-label {
  justify-content: center;
}

.hz-tech-page .hz-section-heading > p,
.hz-tech-page .hz-approach-heading > p {
  max-width: 760px;
  margin-inline: auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

.hz-tech-page .hz-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.hz-tech-page .hz-tech-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform .25s ease, box-shadow .25s ease,
              border-color .25s ease;
}

.hz-tech-page .hz-tech-card:hover {
  transform: translateY(-3px);
  border-color: #B9D6EC;
  box-shadow: 0 10px 26px rgba(9, 43, 99, .06);
}

.hz-tech-page .hz-tech-image {
  position: relative;
  flex: 0 0 238px;
  height: 238px;
  overflow: hidden;
  background: var(--light-blue);
}

.hz-tech-page .hz-tech-image img {
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.hz-tech-page .hz-tech-card:hover .hz-tech-image img {
  transform: scale(1.025);
}

.hz-tech-page .hz-image-tag {
  position: absolute;
  left: 18px;
  bottom: 16px;
  max-width: calc(100% - 36px);
  padding: 7px 10px;
  color: #fff;
  background: rgba(9, 43, 99, .9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 1.4;
}

.hz-tech-page .hz-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 26px 28px;
}

.hz-tech-page .hz-category {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.5;
  text-transform: uppercase;
}

.hz-tech-page .hz-card-content p {
  color: var(--muted);
  line-height: 1.8;
}

/* SECTION 2: BUSINESS-FIRST APPROACH */

.hz-tech-page .hz-approach {
  background: #fff;
}

.hz-tech-page .hz-approach-heading {
  max-width: 850px;
  margin: 0 auto 42px;
  text-align: center;
}

.hz-tech-page .hz-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.hz-tech-page .hz-principle {
  padding: 28px 22px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 7px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.hz-tech-page .hz-principle:nth-child(2) {
  border-top-color: var(--orange);
}

.hz-tech-page .hz-principle:nth-child(3) {
  border-top-color: #287E6C;
}

.hz-tech-page .hz-principle:nth-child(4) {
  border-top-color: #7853A5;
}

.hz-tech-page .hz-principle:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(9, 43, 99, .06);
}

.hz-tech-page .hz-principle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  color: var(--blue);
  background: var(--light-blue);
  border-radius: 6px;
}

.hz-tech-page .hz-principle:nth-child(2) .hz-principle-icon {
  color: var(--orange);
  background: var(--light-orange);
}

.hz-tech-page .hz-principle:nth-child(3) .hz-principle-icon {
  color: #287E6C;
  background: var(--light-green);
}

.hz-tech-page .hz-principle:nth-child(4) .hz-principle-icon {
  color: #7853A5;
  background: var(--light-purple);
}

.hz-tech-page .hz-principle-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hz-tech-page .hz-principle h3 {
  font-size: 18px;
  line-height: 1.45;
}

.hz-tech-page .hz-principle p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

/* RESPONSIVE TABLET */

@media (max-width: 1024px) {
  .hz-tech-page .hz-section {
    padding: 64px 0;
  }

  .hz-tech-page .hz-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* RESPONSIVE MOBILE */

@media (max-width: 700px) {
  .hz-tech-page .hz-container {
    width: calc(100% - 36px);
  }

  .hz-tech-page .hz-section {
    padding: 52px 0;
  }

  .hz-tech-page h2 {
    font-size: clamp(26px, 7vw, 32px);
  }

  .hz-tech-page h3 {
    font-size: 21px;
  }

  .hz-tech-page .hz-label {
    font-size: 12px;
    letter-spacing: 1.2px;
    gap: 9px;
  }

  .hz-tech-page .hz-label::before {
    width: 35px;
  }

  .hz-tech-page .hz-section-heading > p,
  .hz-tech-page .hz-approach-heading > p {
    font-size: 15px;
  }

  .hz-tech-page .hz-tech-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .hz-tech-page .hz-tech-image {
    height: 210px;
    flex-basis: 210px;
  }

  .hz-tech-page .hz-card-content {
    padding: 22px 21px 24px;
  }

  .hz-tech-page .hz-principles {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .hz-tech-page .hz-principle {
    padding: 24px 22px;
  }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .hz-tech-page *,
  .hz-tech-page *::before,
  .hz-tech-page *::after {
    transition: none !important;
  }
}

/* =========================================================
   HAJORAS CONTACT PAGE
========================================================= */

.hz-contact-section {
    padding: 90px 20px;
    background: #F3F8FD;
}

.hz-contact-container,
.hz-map-container,
.hz-quick-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


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

.hz-contact-heading,
.hz-map-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 55px;
}

.hz-contact-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 14px;

    color: #FF6A0A;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.hz-contact-tag::before,
.hz-contact-tag::after {
    content: "";
    width: 45px;
    height: 2px;
    background: #FF6A0A;
}

.hz-contact-heading h2,
.hz-map-heading h2 {
    margin: 0 0 15px;

    color: #092B63;

    font-family: "Nunito", sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
}

.hz-contact-heading h2 span,
.hz-map-heading h2 span {
    color: #FF6A0A;
}

.hz-contact-heading p {
    max-width: 650px;
    margin: auto;

    color: #4D5B6B;

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


/* =========================
   CONTACT GRID
========================= */

.hz-contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 55px;
    align-items: start;
}


/* =========================
   CONTACT INFO
========================= */

.hz-contact-info h3 {
    margin-bottom: 12px;

    color: #092B63;

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

.hz-contact-info > p {
    max-width: 500px;
    margin-bottom: 28px;

    color: #4D5B6B;

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


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

.hz-office-card {
    display: flex;
    gap: 16px;

    padding: 20px;
    margin-bottom: 15px;

    background: #FFFFFF;

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

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

.hz-office-card:hover {
    transform: translateY(-3px);

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

    box-shadow: 0 12px 30px rgba(9,43,99,0.07);
}

.hz-office-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;

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

    border-radius: 9px;

    background: #EAF4FF;
    color: #1C79C8;

    font-size: 18px;
}

.hz-office-icon.hz-orange-icon {
    background: #FFF0E8;
    color: #FF6A0A;
}

.hz-office-card h4 {
    margin-bottom: 4px;

    color: #092B63;

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

.hz-office-card p {
    margin: 0;

    color: #5B6978;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================
   CONTACT DETAILS
========================= */

.hz-contact-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-top: 20px;
}

.hz-contact-detail {
    display: flex;
    gap: 10px;

    padding: 15px;

    background: #FFFFFF;

    border: 1px solid #E3EBF3;
    border-radius: 10px;
}

.hz-contact-detail > i {
    margin-top: 3px;

    color: #FF6A0A;
    font-size: 16px;
}

.hz-contact-detail strong {
    display: block;

    margin-bottom: 3px;

    color: #092B63;

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

.hz-contact-detail a,
.hz-contact-detail span {
    color: #5B6978;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.hz-contact-detail a:hover {
    color: #FF6A0A;
}


/* =========================
   FORM BOX
========================= */

.hz-contact-form-box {
    padding: 38px;

    background: #FFFFFF;

    border: 1px solid #E1E9F1;
    border-radius: 16px;

    box-shadow: 0 18px 45px rgba(9,43,99,0.06);
}

.hz-form-heading {
    margin-bottom: 25px;
}

.hz-form-heading h3 {
    margin-bottom: 5px;

    color: #092B63;

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

.hz-form-heading p {
    margin: 0;

    color: #687687;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;
}


/* =========================
   FORM
========================= */

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

.hz-form-group {
    margin-bottom: 18px;
}

.hz-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #092B63;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.hz-form-group input,
.hz-form-group select,
.hz-form-group textarea {
    width: 100%;

    border: 1px solid #DCE5EE;
    border-radius: 8px;

    outline: none;

    background: #FFFFFF;

    color: #25364A;

    font-family: "DM Sans", sans-serif;
    font-size: 14px;

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

.hz-form-group input,
.hz-form-group select {
    height: 48px;
    padding: 0 14px;
}

.hz-form-group textarea {
    min-height: 130px;
    padding: 13px 14px;
    resize: vertical;
}

.hz-form-group input::placeholder,
.hz-form-group textarea::placeholder {
    color: #9AA7B4;
}

.hz-form-group input:focus,
.hz-form-group select:focus,
.hz-form-group textarea:focus {
    border-color: #FF6A0A;

    box-shadow:
        0 0 0 3px rgba(255,106,10,0.08);
}


/* =========================
   SUBMIT BUTTON
========================= */

.hz-submit-btn {
    width: 100%;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 14px 25px;

    border: 0;
    border-radius: 8px;

    background: #FF6A0A;
    color: #FFFFFF;

    cursor: pointer;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.hz-submit-btn:hover {
    background: #1C79C8;
    color: #FFFFFF;

    transform: none !important;
}


/* =========================
   MAP SECTION
========================= */

.hz-map-section {
    padding: 90px 20px;

    background: #FFF7F0;
}

.hz-map-heading {
    margin-bottom: 45px;
}

.hz-maps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.hz-map-box {
    padding: 22px;

    background: #FFFFFF;

    border: 1px solid #E8E1DA;
    border-radius: 14px;

    box-shadow: 0 10px 30px rgba(9,43,99,0.05);
}

.hz-map-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 16px;
}

.hz-map-title i {
    color: #FF6A0A;
    font-size: 18px;
}

.hz-map-title h3 {
    margin: 0;

    color: #092B63;

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

.hz-map-frame {
    width: 100%;
    height: 300px;

    overflow: hidden;

    border-radius: 10px;

    background: #EEF3F7;
}

.hz-map-frame iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* =========================
   QUICK CONTACT
========================= */

.hz-quick-contact {
    padding: 55px 20px;

    background: #FFFFFF;
}

.hz-quick-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border: 1px solid #E3EBF3;
    border-radius: 14px;

    overflow: hidden;
}

.hz-quick-item {
    min-height: 120px;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 24px;

    border-right: 1px solid #E3EBF3;
}

.hz-quick-item:last-child {
    border-right: 0;
}

.hz-quick-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;

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

    border-radius: 9px;

    background: #EAF4FF;
    color: #1C79C8;

    font-size: 17px;
}

.hz-quick-item:nth-child(2) .hz-quick-icon {
    background: #FFF0E8;
    color: #FF6A0A;
}

.hz-quick-item strong {
    display: block;

    margin-bottom: 3px;

    color: #092B63;

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

.hz-quick-item span,
.hz-quick-item a {
    color: #5B6978;

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

.hz-quick-item a:hover {
    color: #FF6A0A;
}


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

@media (max-width: 991px) {

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

    .hz-contact-info {
        max-width: 760px;
    }

    .hz-quick-container {
        grid-template-columns: 1fr;
    }

    .hz-quick-item {
        border-right: 0;
        border-bottom: 1px solid #E3EBF3;
    }

    .hz-quick-item:last-child {
        border-bottom: 0;
    }

}


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

@media (max-width: 767px) {

    .hz-contact-section,
    .hz-map-section {
        padding: 65px 16px;
    }

    .hz-contact-heading,
    .hz-map-heading {
        margin-bottom: 38px;
    }

    .hz-contact-heading h2,
    .hz-map-heading h2 {
        font-size: 32px;
    }

    .hz-contact-grid {
        gap: 30px;
    }

    .hz-contact-details {
        grid-template-columns: 1fr;
    }

    .hz-contact-form-box {
        padding: 25px 20px;
    }

    .hz-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

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

    .hz-map-box {
        padding: 16px;
    }

    .hz-map-frame {
        height: 260px;
    }

    .hz-quick-contact {
        padding: 45px 16px;
    }

}


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

@media (max-width: 480px) {

    .hz-contact-heading h2,
    .hz-map-heading h2 {
        font-size: 28px;
    }

    .hz-contact-info h3 {
        font-size: 24px;
    }

    .hz-form-heading h3 {
        font-size: 22px;
    }

    .hz-office-card {
        padding: 16px;
    }

    .hz-map-frame {
        height: 240px;
    }

}

/* =========================================================
   HAJORAS THANK YOU PAGE
========================================================= */

.hzt-thankyou-section {

    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 90px 20px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #F3F8FD 0%,
            #FFFFFF 52%,
            #FFF7F0 100%
        );

}


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

.hzt-thankyou-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}


/* =========================================================
   SUCCESS ICON
========================================================= */

.hzt-success-icon {

    display: flex;

    justify-content: center;

    margin-bottom: 25px;

    animation:
        hzt-icon-enter
        0.8s
        cubic-bezier(.22,1,.36,1)
        both;

}


.hzt-check-circle {

    width: 92px;

    height: 92px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FFFFFF;

    border: 1px solid #DCEAF5;

    box-shadow:
        0 15px 40px rgba(9,43,99,0.10);

}


.hzt-check-svg {

    width: 62px;

    height: 62px;

    overflow: visible;

}


.hzt-check-circle-path {

    fill: #EAF4FF;

    stroke: #1C79C8;

    stroke-width: 2;

}


.hzt-check-path {

    fill: none;

    stroke: #FF6A0A;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 35;

    stroke-dashoffset: 35;

    animation:
        hzt-check-draw
        0.8s
        0.4s
        ease
        forwards;

}


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

.hzt-thankyou-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 15px;

    color: #FF6A0A;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    animation:
        hzt-content-enter
        0.8s
        0.15s
        ease
        both;

}


.hzt-thankyou-label span {

    width: 42px;

    height: 2px;

    display: block;

    background: #FF6A0A;

}


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

.hzt-thankyou-container h1 {

    margin: 0 0 18px;

    color: #092B63;

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

    font-size: 44px;

    font-weight: 800;

    line-height: 1.2;

    animation:
        hzt-content-enter
        0.8s
        0.25s
        ease
        both;

}


.hzt-thankyou-container h1 span {

    color: #FF6A0A;

}


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

.hzt-thankyou-text {

    max-width: 620px;

    margin: 0 auto 10px;

    color: #4D5B6B;

    font-family: "DM Sans", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.8;

    animation:
        hzt-content-enter
        0.8s
        0.35s
        ease
        both;

}


/* =========================================================
   SUB TEXT
========================================================= */

.hzt-thankyou-subtext {

    max-width: 560px;

    margin: 0 auto;

    color: #718091;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    line-height: 1.7;

    animation:
        hzt-content-enter
        0.8s
        0.45s
        ease
        both;

}


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

.hzt-thankyou-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 32px;

    animation:
        hzt-content-enter
        0.8s
        0.55s
        ease
        both;

}


.hzt-thankyou-primary,
.hzt-thankyou-secondary {

    min-width: 145px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 13px 22px;

    border-radius: 7px;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


/* Primary */

.hzt-thankyou-primary {

    background: #1C79C8;

    color: #FFFFFF;

    border: 1px solid #1C79C8;

}


.hzt-thankyou-primary:hover {

    background: #FF6A0A;

    border-color: #FF6A0A;

    color: #FFFFFF;

    transform: translateY(-2px);

}


/* Secondary */

.hzt-thankyou-secondary {

    background: #FFFFFF;

    color: #092B63;

    border: 1px solid #D8E3EC;

}


.hzt-thankyou-secondary:hover {

    background: #FFF7F0;

    border-color: #FF6A0A;

    color: #FF6A0A;

    transform: translateY(-2px);

}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.hzt-thankyou-note {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 32px;

    padding: 9px 15px;

    border-radius: 20px;

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

    border: 1px solid #E4ECF3;

    color: #647384;

    font-family: "DM Sans", sans-serif;

    font-size: 12px;

    animation:
        hzt-content-enter
        0.8s
        0.65s
        ease
        both;

}


.hzt-thankyou-note i {

    color: #1C79C8;

    font-size: 13px;

}


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

.hzt-floating-dots {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.hzt-dot {

    position: absolute;

    display: block;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    opacity: 0.45;

    animation:
        hzt-dot-float
        5s
        ease-in-out
        infinite;

}


/* Blue dots */

.hzt-dot-1,
.hzt-dot-4,
.hzt-dot-7 {

    background: #1C79C8;

}


/* Orange dots */

.hzt-dot-2,
.hzt-dot-5,
.hzt-dot-8 {

    background: #FF6A0A;

}


/* Light blue dots */

.hzt-dot-3,
.hzt-dot-6 {

    background: #6DAFE0;

}


/* Individual positions */

.hzt-dot-1 {

    top: 18%;

    left: 12%;

    animation-delay: 0s;

}


.hzt-dot-2 {

    top: 28%;

    right: 15%;

    animation-delay: 1s;

}


.hzt-dot-3 {

    top: 68%;

    left: 17%;

    width: 5px;

    height: 5px;

    animation-delay: 2s;

}


.hzt-dot-4 {

    top: 76%;

    right: 12%;

    animation-delay: 0.8s;

}


.hzt-dot-5 {

    top: 45%;

    left: 7%;

    width: 5px;

    height: 5px;

    animation-delay: 1.8s;

}


.hzt-dot-6 {

    top: 20%;

    right: 30%;

    width: 5px;

    height: 5px;

    animation-delay: 2.5s;

}


.hzt-dot-7 {

    bottom: 14%;

    left: 35%;

    width: 6px;

    height: 6px;

    animation-delay: 1.2s;

}


.hzt-dot-8 {

    bottom: 25%;

    right: 35%;

    width: 5px;

    height: 5px;

    animation-delay: 3s;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes hzt-dot-float {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0);

        opacity: 0.25;

    }

    50% {

        transform:
            translate3d(0, -18px, 0);

        opacity: 0.7;

    }

}


@keyframes hzt-icon-enter {

    0% {

        opacity: 0;

        transform:
            translateY(18px)
            scale(0.9);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes hzt-check-draw {

    to {

        stroke-dashoffset: 0;

    }

}


@keyframes hzt-content-enter {

    0% {

        opacity: 0;

        transform:
            translateY(18px);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 767px) {

    .hzt-thankyou-section {

        min-height: 560px;

        padding: 70px 18px;

    }


    .hzt-check-circle {

        width: 82px;

        height: 82px;

    }


    .hzt-check-svg {

        width: 55px;

        height: 55px;

    }


    .hzt-thankyou-container h1 {

        font-size: 34px;

    }


    .hzt-thankyou-text {

        font-size: 15px;

        line-height: 1.7;

    }


    .hzt-thankyou-actions {

        flex-direction: column;

        width: 100%;

    }


    .hzt-thankyou-primary,
    .hzt-thankyou-secondary {

        width: 100%;

        max-width: 260px;

    }


    .hzt-dot-1 {

        left: 5%;

    }


    .hzt-dot-2 {

        right: 6%;

    }


    .hzt-dot-5 {

        left: 3%;

    }


    .hzt-dot-4 {

        right: 5%;

    }

}


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

@media (max-width: 480px) {

    .hzt-thankyou-section {

        padding: 60px 16px;

    }


    .hzt-thankyou-container h1 {

        font-size: 30px;

    }


    .hzt-thankyou-label {

        font-size: 12px;

        letter-spacing: 1.2px;

    }


    .hzt-thankyou-label span {

        width: 30px;

    }


    .hzt-thankyou-text {

        font-size: 14px;

    }


    .hzt-thankyou-subtext {

        font-size: 13px;

    }


    .hzt-thankyou-note {

        font-size: 11px;

    }

}

.hzt-thankyou-primary:hover,
.hzt-thankyou-secondary:hover {
    transform: translateY(-2px) !important;
    font-size: 14px !important;
    padding: 13px 22px !important;
    min-height: auto !important;
    height: auto !important;
}