/* HR Tech & Workplace Expo Qatar: site styles shared by every page (moved from index.html). */

    .hr-logo { display: inline-block; line-height: 0; }
    .main-header .header-lower .hr-logo img { width: 170px; height: auto; }
    @media (max-height: 800px) and (min-width: 992px) { .main-header .header-lower .hr-logo img { width: 140px; } }
    .main-header .header-lower .logo-box { padding: 18px 0; }
    .mobile-menu .hr-logo img { width: 110px; height: auto; }
    @media (max-width: 767px) { .main-header .header-lower .hr-logo img { width: 96px; } }
    .hr-logo-pill { display: inline-block; background: #fff; border-radius: 14px; padding: 6px 12px; line-height: 0; }
    .hr-logo-pill img { width: 120px; height: auto; }
    .sticky-header .hr-logo-pill img, .mobile-menu .hr-logo-pill img { width: 96px; }
    @media (max-width: 767px) { .main-header .hr-logo-pill img { width: 84px; } }
    .banner-section .bg-banner-img { background-image: url(../images/hrexpo/hero-hr-business.webp); }
    .banner-section .hr-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px; }
    .banner-section .hr-eyebrow:before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--theme-color1); }
    .banner-section .hr-hero-text { color: rgba(255,255,255,.8); max-width: 560px; margin: 24px 0 30px; }
    .banner-section .button-box { display: flex; flex-wrap: wrap; gap: 12px; }
    .banner-section .hr-organizer img { background: #fff; border-radius: 8px; padding: 6px 10px; height: 52px; width: auto; }
    .hr-countdown { margin-top: 30px; }
    .hr-countdown .head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--theme-color-lighter); margin-bottom: 12px; }
    .hr-countdown .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .hr-countdown .grid div { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 12px 6px; text-align: center; }
    .hr-countdown strong { display: block; font-size: 30px; line-height: 1.1; color: #fff; font-family: var(--heading-font-family2); }
    .hr-countdown small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
    #visit .project-block .content { padding: 80px 24px 24px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 45%); }
    .project-block .content .text { margin-top: 10px; color: rgba(255,255,255,.85); }
    .project-block .content .theme-btn-one { margin-top: 20px; }
    .hr-note { font-size: 14px; opacity: .8; margin-top: 30px; }
    .pricing-block .price.hr-price { font-size: 34px; }
    .pricing-block .list li { align-items: flex-start; }
    .hr-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
    .hr-zone-text { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.5; margin-top: 10px; max-width: 420px; }
    .project-block-three .hr-zone-text { background: rgba(14,36,58,.85); padding: 14px 18px; border-radius: 0 0 12px 12px; opacity: 0; transform: translateY(20px); transition: all 300ms ease; }
    .project-block-three .inner-block.active .hr-zone-text, .project-block-three .inner-block:hover .hr-zone-text { opacity: 1; transform: translateY(0); }
    .about-section-four .hr-why-title { color: #fff; margin: 10px 0 12px; }
    .about-section-four .hr-countdown { margin: 20px 0 30px; }
    .about-section-four .sec-title .sub-title { margin-bottom: 20px; }
    .hr-sponsor-section { padding-bottom: var(--hr-section-y); }
    .hr-sponsor { margin-top: 0; padding: 36px; border-radius: 24px; background: var(--theme-color2); border: 1px solid rgba(255,255,255,.08); }
    .hr-sponsor .sub-title { color: var(--hr-accent); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; margin-bottom: 10px; }
    .hr-sponsor .title { color: #fff; margin-bottom: 14px; }
    .hr-sponsor .text { margin-bottom: 24px; }
    .services-section11 .hr-note { margin-top: 40px; }
    .footer-section .footer-ctas a small { display: block; font-size: 13px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
  

    :root {
      --hr-section-y: 110px;
      --hr-h2: 52px;
      --hr-h3: 32px;
      --hr-h4: 24px;
      --hr-body: 16px;
      --hr-num-xl: 120px;
      --hr-num: 64px;
    }
    @media (max-width: 1199.98px) { :root { --hr-section-y: 90px; --hr-h2: 44px; --hr-h3: 28px; --hr-num-xl: 96px; } }
    @media (max-width: 767.98px)  { :root { --hr-section-y: 64px; --hr-h2: 32px; --hr-h3: 24px; --hr-h4: 20px; --hr-num-xl: 72px; --hr-num: 44px; } }

    /* Hero entrance (runs on load, independent of scroll position) */
    @keyframes hrIntro { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
    .hr-intro { animation: hrIntro .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
    @media (prefers-reduced-motion: reduce) { .hr-intro { animation: none; } }

    /* Hero: always fits one desktop screen; sizes scale with viewport height */
    @media (min-width: 992px) {
      .banner-section { height: 100vh; min-height: 600px; padding: clamp(200px, 26vh, 290px) 0 32px !important; display: flex; flex-direction: column; }
      .banner-section .inner-container { flex: 1; width: 100%; display: flex; flex-direction: column; min-height: 0; }
      .banner-section .banner-slide { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
      .banner-section .hr-eyebrow { margin-bottom: 1.8vh; }
      .banner-section .content-box .title { font-size: clamp(52px, 10vh, 110px) !important; line-height: 1.05 !important; margin-bottom: 2.2vh; }
      .banner-section .content-box .banner-service-list { margin-bottom: 0; }
      .banner-section .hr-hero-text { margin: 2.4vh 0 3vh; }
      .banner-section .bottom-box { margin-top: 0; align-items: flex-end; justify-content: space-between; }
      .banner-section .clients-logo-box .client-title { margin-bottom: 1.4vh; }
      .banner-section .style-text { font-size: clamp(56px, 11vh, 120px); }
    }
    @media (min-width: 992px) and (max-height: 720px) {
      .banner-section { padding-top: 175px !important; }
      .banner-section .hr-hero-text { display: none; }
    }

    /* Section rhythm */
    .about-section-four, .projects-section-three, .features-section-two, .projects-section,
    .services-section11, .why-choose-us, .faqs-section-two { padding-top: var(--hr-section-y) !important; padding-bottom: var(--hr-section-y) !important; }
    .features-section-two { padding-top: 0 !important; }

    /* Section headings: one size, one font, sentence case */
    #smooth-content .sec-title { margin-bottom: 56px; }
    #smooth-content .sec-title .h2.title {
      font-family: var(--heading-font-family); font-size: var(--hr-h2) !important; line-height: 1.15 !important;
      font-weight: 700; text-transform: none !important; letter-spacing: -0.01em; margin-bottom: 0;
    }
    #smooth-content .sec-title .sub-title { margin-bottom: 18px; font-size: 14px; letter-spacing: .08em; }
    #smooth-content .projects-section .sec-title .h2.title { margin-left: 0; }
    .sub-title.denge-words > div:not(:last-child) { margin-right: .3em; }
    .features-section-two .sec-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
    .about-section-four .sec-title .h2.title { font-size: 40px !important; }
    @media (max-width: 767.98px) { .about-section-four .sec-title .h2.title { font-size: 28px !important; } }

    /* Card / row titles */
    .features-block .title, .project-block .content .title, .hr-why-title {
      font-family: var(--heading-font-family); font-size: var(--hr-h4) !important; line-height: 1.3 !important; font-weight: 600;
    }
    .features-block-three .title-box .title { font-family: var(--heading-font-family); font-size: var(--hr-h4); line-height: 1.3; font-weight: 600; color: #fff; }
    .features-block-three .text { margin-top: 16px; }
    .project-block-three .content .title { font-size: 26px !important; line-height: 1.4 !important; }
    .project-block-three .content .category { font-size: 15px !important; text-transform: uppercase; letter-spacing: .06em; }
    .service-block11 .title-box .title { font-family: var(--heading-font-family); font-size: var(--hr-h3) !important; line-height: 1.3 !important; font-weight: 600; }
    .service-block11 .title-box .number { font-size: 18px !important; color: var(--hr-accent); font-family: var(--heading-font-family2); }
    .service-block11 .content-column .title, .hr-sponsor .title { font-size: var(--hr-h3) !important; line-height: 1.25 !important; }

    /* Programme rows (service-block11) re-laid for the smaller title size */
    .service-block11 .inner-block { border-bottom: 1px solid rgba(255,255,255,.1); }
    .services-section11 .sec-title + .service-block11 .inner-block { border-top: 1px solid rgba(255,255,255,.1); }
    .service-block11 .inner-block.active { border-color: rgba(255,255,255,.1); }
    .service-block11 .inner-block .title-box { margin-bottom: 0 !important; padding: 26px 0 !important; align-items: center; gap: 24px; }
    .service-block11 .inner-block .title-box .left { gap: 32px; align-items: center; min-width: 0; }
    .service-block11 .inner-block .title-box .number { width: 36px; flex-shrink: 0; line-height: 1; }
    .service-block11 .inner-block .title-box .title { line-height: 1.25 !important; margin: 0; transition: color 300ms ease; }
    .service-block11 .inner-block .title-box .icon { top: 0 !important; width: 52px; height: 52px; line-height: 52px; flex-shrink: 0; font-size: 16px; }
    .service-block11 .inner-block .title-box:hover .title,
    .service-block11 .inner-block.active .title-box .title { color: var(--hr-accent); }
    .service-block11 .inner-block .title-box:hover .icon,
    .service-block11 .inner-block.active .title-box .icon { background: var(--theme-color1); border-color: var(--theme-color1); transform: rotate(0deg); }
    .service-block11 .inner-block .content-box { margin-top: 0 !important; padding: 0 0 40px 68px; }
    .service-block11 .inner-block .content-box .image-column .image { border-radius: 16px; aspect-ratio: 16 / 9; height: auto; }
    .service-block11 .inner-block .content-box .content-column .inner-column { margin-left: 48px; }
    .service-block11 .inner-block .content-box .content-column .title { text-transform: none !important; margin-bottom: 14px !important; }
    .service-block11 .inner-block .content-box .content-column .text { margin-bottom: 28px !important; }
    @media (max-width: 991.98px) {
      .service-block11 .inner-block .content-box { padding-left: 0; }
      .service-block11 .inner-block .content-box .content-column .inner-column { margin-left: 0; }
    }
    @media (max-width: 767.98px) {
      .service-block11 .inner-block .title-box { padding: 20px 0 !important; }
      .service-block11 .inner-block .title-box .left { gap: 14px; }
      .service-block11 .inner-block .title-box .icon { width: 42px; height: 42px; line-height: 42px; }
    }

    /* Body copy */
    #smooth-content .text, .features-block .text, .project-block .content .text, .hr-zone-text { font-size: var(--hr-body); line-height: 1.65; }
    .hr-note { font-size: 15px; line-height: 1.6; }

    /* Big numbers: one display font */
    .about-section-four .funfact-box .count-box { font-family: var(--heading-font-family2); font-size: var(--hr-num-xl) !important; line-height: 1 !important; }
    .features-block-four .count-box { font-family: var(--heading-font-family2) !important; font-size: var(--hr-num) !important; line-height: 1 !important; font-weight: 600; }

    /* Brand card instead of the stray white box */
    .features-block-four .inner-block { background: var(--theme-color1) !important; }
    .features-block-four .title, .features-block-four .count-box { color: #fff !important; }
    .features-block-four .shape1 { opacity: .25; }

    /* Top-level nav labels (main + sticky) */
    .main-header .main-menu .navigation > li > a { font-weight: 600 !important; }

    /* Footer on brand maroon */
    .footer-section { background-color: #831B3D !important; margin-bottom: 0 !important; }
    #smooth-content { padding-bottom: 0; }
    .footer-section .footer-logo.hr-logo { background: #0E243A; padding: 16px 20px; border-radius: 18px; }
    /* Header "Book a Stand" button, colours reversed */
    .theme-btn-two.hr-btn-reverse { background-color: #0E243A; color: #fff; margin-top: 28px; font-weight: 600; }
    .footer-section .footer-top-wrapper { padding-bottom: 50px; }
    .footer-section .footer-widget-wrapper { padding-bottom: 36px !important; }
    .footer-section .footer-bottom { padding: 18px 0 !important; }
    .theme-btn-two.hr-btn-reverse i { background-color: #fff; color: #0E243A; }
    .theme-btn-two.hr-btn-reverse::before { background-color: #fff; }
    .theme-btn-two.hr-btn-reverse:hover { color: #0E243A; }
    .theme-btn-two.hr-btn-reverse:hover i { background-color: #0E243A; color: #fff; }

    /* FAQ */
    .hr-faq .hr-faq-visual { position: relative; height: 100%; min-height: 520px; border-radius: 24px; overflow: hidden; }
    .hr-faq .hr-faq-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .hr-faq .hr-faq-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,36,58,0) 45%, rgba(14,36,58,.85) 100%); }
    .hr-faq-card { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; padding: 22px 24px; border-radius: 18px;
      background: rgba(14,36,58,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); }
    .hr-faq-card-label { display: inline-block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hr-accent); margin-bottom: 6px; }
    .hr-faq-card-title { color: #fff; margin: 0 0 4px; font-size: 26px; }
    .hr-faq-card p { margin: 0 0 14px; font-size: 15px; color: rgba(255,255,255,.75); }
    .hr-faq-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
    .hr-faq-card-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); }
    .hr-faq-card-meta i { color: var(--hr-accent); }

    .hr-faq .accordion-box2 .block { margin: 0 0 12px !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; background: rgba(255,255,255,.03); transition: background 250ms ease, border-color 250ms ease; }
    .hr-faq .accordion-box2 .block:hover { border-color: rgba(255,255,255,.2) !important; }
    .hr-faq .accordion-box2 .block.active-block { background: rgba(3,154,147,.06); border-color: rgba(3,154,147,.4) !important; }
    .hr-faq .accordion-box2 .block .acc-btn { padding: 22px 24px; gap: 18px; justify-content: flex-start; color: #fff !important; font-family: var(--heading-font-family); font-size: 18px !important; line-height: 1.4; font-weight: 600; }
    .hr-faq .hr-faq-num { font-family: var(--heading-font-family2); color: var(--hr-accent); font-size: 14px; letter-spacing: .04em; min-width: 26px; }
    .hr-faq .hr-faq-q { flex: 1; }
    .hr-faq .accordion-box2 .block .acc-btn .icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 250ms ease; }
    .hr-faq .accordion-box2 .block .acc-btn.active .icon { background: var(--theme-color1); border-color: var(--theme-color1); }
    .hr-faq .accordion-box2 .acc-content .content { padding: 0 24px 22px 68px; }
    .hr-faq .accordion-box2 .acc-content .content .text { margin-top: 0; color: rgba(255,255,255,.72); }
    .hr-faq-more { margin-top: 24px; font-size: 15px; color: rgba(255,255,255,.65); }
    .hr-faq-more a { color: var(--hr-accent); font-weight: 600; margin-left: 6px; }
    .hr-faq-more a i { margin-left: 4px; transition: transform 200ms ease; }
    .hr-faq-more a:hover i { transform: translateX(4px); }
    @media (max-width: 1199.98px) { .hr-faq .hr-faq-visual { min-height: 380px; } }
    @media (max-width: 767.98px) {
      .hr-faq .accordion-box2 .block .acc-btn { padding: 18px; gap: 12px; font-size: 16px !important; }
      .hr-faq .accordion-box2 .acc-content .content { padding: 0 18px 18px; }
      .hr-faq-card { left: 14px; right: 14px; bottom: 14px; padding: 18px; }
    }

    /* Header dropdowns (main + sticky) */
    @media (min-width: 768px) {
      .main-header .main-menu .navigation > li.dropdown > a { padding-right: 18px; position: relative; }
      .main-header .main-menu .navigation > li.dropdown > a::after {
        content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -5px;
        display: block !important; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 250ms ease; opacity: .7;
      }
      .main-header .main-menu .navigation > li.dropdown:hover > a::after { transform: rotate(-135deg); margin-top: -1px; }
      .main-header .main-menu .navigation > li > ul {
        width: auto !important; min-width: 240px; padding: 8px !important; margin-top: 0 !important; left: -14px;
        top: calc(100% - 20px) !important;
        background: #15304A !important;
        border: 1px solid rgba(255,255,255,.08); border-radius: 16px !important;
        box-shadow: 0 24px 50px rgba(0,0,0,.35) !important;
        transform: translateY(10px); transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease !important;
      }
      .main-header .main-menu .navigation > li > ul::before {
        content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 32px; /* hover bridge */
      }
      .main-header .main-menu .navigation > li:hover > ul { transform: translateY(0); }
      .main-header .main-menu .navigation > li > ul > li { border: 0 !important; padding: 0 !important; margin: 0 !important; width: 100%; background: transparent !important; }
      .main-header .main-menu .navigation > li > ul > li::before { display: none !important; }
      .main-header .main-menu .navigation > li > ul > li + li { margin-top: 2px !important; }
      .main-header .main-menu .navigation > li > ul > li > a {
        display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
        padding: 11px 14px !important; margin: 0 !important; width: 100% !important; border-radius: 10px; border: 0 !important;
        color: rgba(255,255,255,.82) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important;
        text-transform: none !important; white-space: nowrap; transition: background 200ms ease, color 200ms ease, padding 200ms ease;
      }
      .main-header .main-menu .navigation > li > ul > li > a::after {
        content: "\2192"; font-size: 14px; opacity: 0; transform: translateX(-6px); transition: all 200ms ease; color: var(--hr-accent);
      }
      .main-header .main-menu .navigation > li > ul > li > a:hover {
        background: rgba(3, 154, 147, .12) !important; color: #fff !important;
      }
      .main-header .main-menu .navigation > li > ul > li > a:hover::after { opacity: 1; transform: translateX(0); }
      .main-header .main-menu .navigation > li > ul > li > a::before { display: none !important; }
    }

    /* Sticky header */
    .main-header .sticky-header.hr-sticky {
      background: #0E243A; -webkit-backdrop-filter: none; backdrop-filter: none;
      border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    .hr-sticky .inner-container { padding: 16px 0 !important; gap: 24px; min-height: 104px; }
    .hr-sticky .logo img { max-height: none !important; width: 90px !important; height: auto; }
    .hr-sticky .nav-outer { flex: 1; display: flex; justify-content: center; }
    .hr-sticky .main-menu .navigation > li { margin: 0 0 0 30px !important; padding: 18px 0 !important; }
    .hr-sticky .main-menu .navigation > li:first-child { margin-left: 0 !important; }
    .hr-sticky .main-menu .navigation > li > ul { top: calc(100% + 26px) !important; }
    .hr-sticky .main-menu .navigation > li > ul::before { top: -30px !important; height: 30px !important; }
    .hr-sticky .main-menu .navigation > li > a { color: rgba(255,255,255,.85) !important; font-size: 15px !important; font-weight: 600 !important; }
    .hr-sticky .main-menu .navigation > li:hover > a, .hr-sticky .main-menu .navigation > li.current > a { color: var(--hr-accent) !important; }
    .hr-sticky-actions { display: flex; align-items: center; gap: 18px; }
    .hr-sticky-date { font-size: 13px; color: rgba(255,255,255,.65); white-space: nowrap; }
    .hr-sticky-actions .theme-btn-one { padding-top: 10px; padding-bottom: 10px; white-space: nowrap; }
    .hr-sticky .mobile-nav-toggler { color: #fff !important; font-size: 22px; cursor: pointer; }
    @media (max-width: 1399.98px) { .hr-sticky-date { display: none; } }
    @media (max-width: 1199.98px) { .hr-sticky .nav-outer { display: none; } .hr-sticky .mobile-nav-toggler { display: inline-block !important; } }
    @media (max-width: 575.98px) { .hr-sticky-actions .theme-btn-one { display: none; } }
  

    /* ---------- Scale: smaller titles, tighter spacing ---------- */
    :root { --hr-section-y: 88px; --hr-h2: 44px; --hr-h3: 28px; --hr-h4: 22px; --hr-navy: #0E243A; --hr-ink: #15304A; --hr-line-light: #dbe5ea; }
    @media (max-width: 1199.98px) { :root { --hr-section-y: 72px; --hr-h2: 38px; --hr-h3: 26px; } }
    @media (max-width: 767.98px)  { :root { --hr-section-y: 56px; --hr-h2: 30px; --hr-h3: 22px; --hr-h4: 19px; } }
    #smooth-content .sec-title { margin-bottom: 40px; }
    .hr-balance, #smooth-content .sec-title .h2.title { text-wrap: balance; }
    #smooth-content .text, .hr-lead { color: rgba(255,255,255,.78); }
    .hr-about, .hr-routes { padding: var(--hr-section-y) 0; }

    /* ---------- Buttons: filled primary, outlined secondary ---------- */
    .theme-btn-one { font-weight: 600; }
    .theme-btn-one i { color: var(--theme-color1) !important; }
    .hr-btn-outline, .hr-btn-light {
      display: inline-flex; align-items: center; gap: 10px; padding: 0 24px; height: 48px; border-radius: 100px;
      font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; transition: all 250ms ease;
    }
    .hr-btn-outline { border: 1.5px solid rgba(255,255,255,.45); color: #fff; background: transparent; }
    .hr-btn-outline i, .hr-btn-light i { font-size: 15px; transition: transform 250ms ease; }
    .hr-btn-outline:hover { background: #fff; border-color: #fff; color: var(--hr-navy); }
    .hr-btn-outline:hover i, .hr-btn-light:hover i { transform: translate(2px, -2px); }
    .hr-btn-light { background: #fff; color: var(--hr-navy); height: 44px; padding: 0 20px; font-size: 15px; }
    .hr-btn-light:hover { background: var(--hr-navy); color: #fff; }
    .hr-btn-row { align-items: center; }

    /* ---------- Header: solid bar for contrast ---------- */
    .main-header.header-style-one { background: var(--hr-navy) !important; border-bottom: 1px solid rgba(255,255,255,.08); }
    .main-header > .outer-box { background: transparent; }
    .main-header .header-lower .logo-box { padding: 14px 0; }
    .main-header .header-lower .hr-logo img { width: 150px; }
    @media (max-height: 800px) and (min-width: 992px) { .main-header .header-lower .hr-logo img { width: 124px; } }
    @media (max-width: 767px) { .main-header .header-lower .hr-logo img { width: 92px; } }

    /* ---------- Hero ---------- */
    @media (min-width: 992px) {
      .banner-section { padding-top: clamp(190px, 25vh, 260px) !important; }
      .banner-section .content-box .title { font-size: clamp(48px, 9vh, 96px) !important; }
    }
    .hr-hero-links { display: flex; flex-wrap: wrap; gap: 10px; }
    .hr-hero-links a {
      display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px; font-size: 15px; font-weight: 600;
      color: #fff; background: rgba(14,36,58,.55); border: 1px solid rgba(255,255,255,.3); transition: all 220ms ease;
    }
    .hr-hero-links a i { font-size: 13px; color: var(--hr-accent); transition: transform 220ms ease, color 220ms ease; }
    .hr-hero-links a:hover { background: var(--hr-accent); border-color: var(--hr-accent); color: var(--hr-navy); }
    .hr-hero-links a:hover i { color: var(--hr-navy); transform: translateX(3px); }
    .banner-section .hr-hero-text { color: rgba(255,255,255,.88); }

    /* ---------- Pattern system (logo arcs): backgrounds, frames, dividers ---------- */
    .hr-pattern-bg { position: relative; overflow: hidden; isolation: isolate; }
    .hr-pattern-bg::before {
      content: ""; position: absolute; inset: 0; z-index: -1; background: url(../images/hrexpo/motif.svg) repeat; background-size: 120px;
      -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); mask-image: linear-gradient(90deg, transparent 35%, #000 100%); opacity: .7;
    }
    .hr-frame { position: relative; }
    .hr-frame::after {
      content: ""; position: absolute; right: 14px; bottom: 14px; width: 64px; height: 64px; z-index: 3; pointer-events: none;
      border-top: 2px solid var(--hr-accent); border-left: 2px solid var(--hr-accent); border-top-left-radius: 100%; opacity: .9;
    }
    .hr-divider { display: flex; align-items: center; gap: 18px; }
    .hr-divider::before, .hr-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18)); }
    .hr-divider::after { background: linear-gradient(90deg, rgba(255,255,255,.18), transparent); }
    .hr-divider span { width: 56px; height: 28px; background: url(../images/hrexpo/motif-mark.svg) no-repeat center / contain; }

    /* ---------- About (Option 1 layout) ---------- */
    .hr-about-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
    #smooth-content .hr-about-head-row .h2.title { max-width: 900px; font-size: 36px !important; line-height: 1.22 !important; }
    .hr-about-head-row .theme-btn-one { flex-shrink: 0; }
    .hr-why { height: 100%; padding: 32px; border-radius: 20px; background: var(--hr-ink); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; }
    .hr-why-heading { font-size: 28px; line-height: 1.2; color: #fff; margin-bottom: 16px; font-family: var(--heading-font-family); }
    .hr-why-heading span { color: var(--hr-accent); }
    .hr-why p { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.65; margin-bottom: 12px; }
    .hr-why .hr-countdown { margin-top: auto; padding-top: 18px; }
    .hr-why .hr-countdown .head { color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
    .hr-why .hr-countdown .grid div:first-child strong { color: var(--hr-accent); }
    .hr-platform-card { display: block; height: 100%; color: inherit; }
    .hr-platform-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 20px; }
    .hr-platform-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
    .hr-platform-card:hover .hr-platform-img img { transform: scale(1.04); }
    .hr-platform-card h4 { color: #fff; font-size: var(--hr-h4); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
    .hr-platform-card h4 i { font-size: 16px; color: var(--hr-accent); transition: transform 250ms ease; }
    .hr-platform-card:hover h4 i { transform: translateX(4px); }
    .hr-platform-card p { color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.6; margin: 0; }
    @media (max-width: 991.98px) { .hr-about-head-row { flex-direction: column; align-items: flex-start; } #smooth-content .hr-about-head-row .h2.title { font-size: 28px !important; } }

    /* ---------- Zones: names always visible ---------- */
    .project-block-three .content .title, .project-block-three .content .category { opacity: 1 !important; visibility: visible !important; transform: none !important; }
    .project-block-three .inner-block::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(180deg, rgba(14,36,58,0), rgba(14,36,58,.85)); pointer-events: none; z-index: 1; }
    .project-block-three .content { z-index: 2; }
    .project-block-three .content .title { font-size: 22px !important; }
    .project-block-three .image { height: clamp(420px, 62vh, 580px); }
    .project-block-three .image img { height: 100%; object-position: center 35%; }
    .project-block-three .hr-zone-text { max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; }
    .project-block-three .inner-block:hover .hr-zone-text, .project-block-three .inner-block.active .hr-zone-text { max-height: 160px; padding-top: 14px; padding-bottom: 14px; }
    #zones + .container .hr-divider, .hr-routes { }
    #zones { padding-bottom: 64px !important; }

    /* ---------- Visitor routes (compact Option 1 cards) ---------- */
    .hr-routes { padding-top: 64px; }
    .hr-lead { font-size: 15px; line-height: 1.65; margin: 0; }
    .hr-route { position: relative; height: 100%; min-height: 360px; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; }
    .hr-route > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms ease; }
    .hr-route:hover > img { transform: scale(1.04); }
    .hr-route::before { content: ""; position: absolute; inset: 0; z-index: -1; }
    .hr-route--navy::before { background: linear-gradient(180deg, rgba(14,36,58,.15) 0%, rgba(14,36,58,.92) 62%); }
    .hr-route--maroon::before { background: linear-gradient(180deg, rgba(131,27,61,.15) 0%, rgba(131,27,61,.94) 62%); }
    .hr-route-body { padding: 28px 30px; }
    .hr-route-kicker { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 10px; font-weight: 600; }
    .hr-route h3 { color: #fff; font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
    .hr-route p { color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.6; margin-bottom: 20px; max-width: 520px; }

    /* ---------- Programme: tighter rows, readable body text ---------- */
    .service-block11 .inner-block .title-box { padding: 20px 0 !important; }
    .service-block11 .title-box .title { font-size: 24px !important; }
    .service-block11 .inner-block .content-box { padding-bottom: 28px; }
    .service-block11 .inner-block .content-box .content-column .title { font-size: 24px !important; color: #fff; }
    .service-block11 .inner-block .content-box .content-column .text { color: rgba(255,255,255,.85) !important; font-size: 16px; }
    .services-section11 .hr-note { color: rgba(255,255,255,.7); opacity: 1; margin-top: 28px; }

    /* ---------- Exhibitor benefits: meaningful icons (style A default, style B via ?icons=b) ---------- */
    .why-choose-us .features-block .icon.hr-ico-wrap { width: auto; height: auto; margin-bottom: 18px; display: inline-flex; align-items: center; justify-content: center; }
    .hr-ico { font-size: 30px; color: var(--hr-accent); line-height: 1; }
    .hr-icons-b .why-choose-us .features-block .icon.hr-ico-wrap { width: 56px; height: 56px; border-radius: 16px; background: var(--theme-color1); }
    .hr-icons-b .hr-ico { font-size: 22px; color: #fff; }
    .why-choose-us .features-block .text { color: rgba(255,255,255,.78) !important; }
    .hr-exhibit-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; height: auto !important; }
    .why-choose-us .hr-note { position: relative; }
    .hr-exhibit-img img { width: 100%; height: 100%; object-fit: cover; }

    /* ---------- Sponsorship: full width, higher contrast ---------- */
    .hr-sponsor { padding: 44px 48px; background: var(--hr-ink); border-color: rgba(255,255,255,.12); }
    .hr-sponsor .text { color: rgba(255,255,255,.88) !important; max-width: 820px; font-size: 16px; }
    .hr-sponsor .title { font-size: 30px !important; }

    /* ---------- FAQ on light background ---------- */
    .hr-light { background: #E1E8E4; }
    .hr-light .sec-title .title, .hr-light .h2.title { color: var(--hr-navy) !important; }
    .hr-light .sec-title .sub-title { background: #fff; color: var(--hr-navy); border: 1px solid var(--hr-line-light); }
    .hr-faq.hr-light .accordion-box2 .block { background: #fff; border-color: var(--hr-line-light) !important; }
    .hr-faq.hr-light .accordion-box2 .block:hover { border-color: #b9c9d1 !important; }
    .hr-faq.hr-light .accordion-box2 .block.active-block { background: #fff; border-color: rgba(131,27,61,.45) !important; box-shadow: 0 10px 30px rgba(14,36,58,.06); }
    .hr-faq.hr-light .accordion-box2 .block .acc-btn { color: var(--hr-navy) !important; }
    .hr-faq.hr-light .hr-faq-num { color: var(--theme-color1); }
    .hr-faq.hr-light .accordion-box2 .block .acc-btn .icon { border-color: #b7c7cf; color: var(--hr-navy) !important; }
    .hr-faq.hr-light .accordion-box2 .block .acc-btn .icon::before { color: inherit; }
    .hr-faq.hr-light .accordion-box2 .block .acc-btn.active .icon { color: #fff !important; }
    .hr-faq.hr-light .accordion-box2 .acc-content .content .text { color: #3e5566 !important; }
    .hr-faq.hr-light .hr-faq-more { color: #4b6272; }
    .hr-faq.hr-light .hr-faq-more a { color: var(--theme-color1); }

    /* ---------- Footer: Option 1 structure + burgundy accent ---------- */
    .hr-footer { margin: 0; border-radius: 0; background: #fff; color: var(--hr-navy); padding: 40px 0 0; overflow: hidden; border-top: 1px solid var(--hr-line-light); }
    .hr-footer-cta { background: var(--theme-color1); border-radius: 24px; padding: 34px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .hr-footer-cta.hr-pattern-bg::before, .hr-footer-cta::before { opacity: .55; }
    .hr-footer-cta-title { color: #fff; font-size: 34px; line-height: 1.15; margin: 0; }
    .hr-footer-cta-title span { color: #E1E8E4; }
    .hr-footer-cta .theme-btn-two.hr-btn-reverse { margin-top: 0; }
    .hr-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 44px 0 32px; }
    .hr-footer h5 { font-size: 16px; font-weight: 700; color: var(--hr-navy); margin-bottom: 14px; }
    .hr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .hr-chips a { display: inline-flex; align-items: center; padding: 6px 13px; border: 1px solid var(--hr-line-light); border-radius: 100px; font-size: 14px; color: #33495a; transition: all 200ms ease; }
    .hr-chips a:hover { border-color: var(--theme-color1); color: var(--theme-color1); }
    .hr-footer-when { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--hr-navy); margin: 0; }
    .hr-footer-org img { width: 120px; height: auto; }
    .hr-footer-brand { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--hr-line-light); padding: 24px 0; }
    .hr-footer-logo img { width: 120px; height: auto; }
    .hr-footer-date { font-family: var(--heading-font-family2); font-size: 64px; line-height: 1; font-weight: 600; text-transform: uppercase; color: var(--hr-navy); letter-spacing: -0.02em; }
    .hr-footer-date span { color: var(--theme-color1); }
    .hr-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--hr-line-light); padding: 16px 0 22px; }
    .hr-footer-bottom p { margin: 0; font-size: 14px; color: #4b6272; }
    @media (max-width: 991.98px) { .hr-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hr-footer-date { font-size: 48px; } }
    @media (max-width: 767.98px) {
      .hr-footer { padding-top: 24px; }
      .hr-footer-cta { padding: 26px 22px; } .hr-footer-cta-title { font-size: 26px; }
      .hr-footer-cols { grid-template-columns: 1fr; gap: 24px; }
      .hr-footer-date { font-size: 36px; }
    }

    /* Zones: three equal cards inside the content width, names always visible */
    .hr-zones { padding: var(--hr-section-y) 0 64px; }
    .hr-zone { position: relative; display: flex; align-items: flex-end; height: 100%; min-height: 480px; border-radius: 20px; overflow: hidden; isolation: isolate; color: #fff; }
    .hr-zone > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms ease; }
    .hr-zone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,36,58,0) 25%, rgba(14,36,58,.94) 78%); transition: background 300ms ease; }
    .hr-zone::after { content: ""; position: absolute; right: 18px; top: 18px; width: 54px; height: 54px; border-bottom: 2px solid var(--hr-accent); border-right: 2px solid var(--hr-accent); border-bottom-right-radius: 100%; opacity: .85; pointer-events: none; }
    .hr-zone:hover > img { transform: scale(1.05); }
    .hr-zone-body { padding: 26px 26px 24px; }
    .hr-zone-num { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hr-navy); background: var(--hr-accent); padding: 5px 10px; border-radius: 100px; margin-bottom: 14px; }
    .hr-zone h3 { color: #fff; font-size: 24px; line-height: 1.25; margin-bottom: 10px; }
    .hr-zone p { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
    .hr-zone-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--hr-accent); }
    .hr-zone-link i { transition: transform 250ms ease; }
    .hr-zone:hover .hr-zone-link i { transform: translateX(4px); }
    @media (max-width: 767.98px) { .hr-zone { min-height: 420px; } }
    @media (prefers-reduced-motion: reduce) { .hr-zone > img { transition: none; } }

    /* ---------- Hero aligned to the page grid and type scale ---------- */
    .main-header.header-style-one > .outer-box { margin: 0 auto; padding: 0 15px !important; max-width: 1140px; }
    @media (min-width: 1400px) { .main-header.header-style-one > .outer-box { max-width: var(--container-width, 1320px); } }
    @media (max-width: 1199.98px) { .main-header.header-style-one > .outer-box { max-width: 960px; } }
    @media (max-width: 991.98px) { .main-header.header-style-one > .outer-box { max-width: none; } }

    .banner-section.hr-hero { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 150px 0 40px !important; }
    .hr-hero .banner-overlay { mix-blend-mode: normal; background:
      linear-gradient(90deg, rgba(14,36,58,.92) 0%, rgba(14,36,58,.72) 38%, rgba(14,36,58,.15) 75%, rgba(14,36,58,0) 100%),
      linear-gradient(0deg, rgba(14,36,58,.85) 0%, rgba(14,36,58,0) 38%); }
    .hr-hero-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; width: 100%; }
    .hr-hero-main { max-width: 860px; }
    .hr-hero-label { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 6px; background: rgba(14,36,58,.75); border: 1px solid rgba(255,255,255,.12);
      font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #fff; font-family: var(--heading-font-family); }
    .hr-hero-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hr-accent); }
    .hr-hero-title { font-family: "Poppins", sans-serif; font-weight: 800; color: #fff; font-size: clamp(52px, 8.6vh, 88px); line-height: 1.04;
      letter-spacing: -0.02em; text-transform: none; margin: 20px 0 24px; max-width: 860px; text-wrap: balance; }
    .hr-hero .hr-hero-links { margin-bottom: 0; }
    .hr-hero-text { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 540px; margin: 22px 0 28px; }
    .hr-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; }
    .hr-hero-org { display: flex; align-items: center; gap: 14px; }
    .hr-hero-org span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
    .hr-hero-org img { height: 40px; width: auto; background: #fff; border-radius: 8px; padding: 5px 9px; }
    .hr-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
    .hr-hero-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; padding: 7px 12px; border-radius: 100px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }
    .hr-hero-meta i { color: var(--hr-accent); }
    @media (min-width: 992px) {
      .banner-section.hr-hero { height: 100vh; min-height: 640px; padding: clamp(180px, 22vh, 230px) 0 36px !important; }
    }
    @media (min-width: 992px) and (max-height: 760px) { .hr-hero-text { display: none; } .hr-hero-title { margin-bottom: 18px; } .hr-hero .hr-btn-row { margin-top: 24px; } }
    @media (max-width: 991.98px) { .banner-section.hr-hero { padding: 140px 0 32px !important; } .hr-hero-meta span:last-child { display: none; } }
    @media (max-width: 575.98px) { .hr-hero-title { font-size: 42px; } .hr-hero-text { font-size: 16px; } }

    /* ================= Brand guideline + last edits (Oct 2026) ================= */
    :root { --hr-navy: #0E243A; --hr-ink: #15304A; --hr-mist: #E1E8E4; --hr-teal-deep: #07524B; --hr-line-light: #cfdad5; }
    body, .text, p { font-family: "Poppins", sans-serif; }
    [lang="ar"], a[href*="lang=ar"] { font-family: "Tajawal", "Poppins", sans-serif !important; }

    /* Header: photo stays behind; contrast comes from the text, not a dark bar */
    .main-header.header-style-one { background: transparent !important; border-bottom: 0 !important; }
    .main-header .header-lower .main-menu .navigation > li > a { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45); }
    .main-header .header-lower .hr-logo img { filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
    .main-header .header-lower .theme-btn-two { box-shadow: 0 6px 20px rgba(0,0,0,.25); }

    /* Secondary buttons: same circle + sweep effect as "Book a Stand" */
    .theme-btn-one.hr-btn-ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); color: #fff; }
    .theme-btn-one.hr-btn-ghost i { background: #fff; color: var(--hr-navy) !important; }
    .theme-btn-one.hr-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--theme-color3); color: var(--hr-navy); }

    /* Sponsorship buttons as in Option 1: filled primary + outlined secondary, inline arrows */
    .hr-btn-solid { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 100px; background: var(--theme-color1); color: #fff; font-size: 16px; font-weight: 600; line-height: 1; transition: all 250ms ease; }
    .hr-btn-solid i { font-size: 15px; transition: transform 250ms ease; }
    .hr-btn-solid:hover { background: #fff; color: var(--theme-color1); }
    .hr-btn-solid:hover i, .hr-btn-outline:hover i { transform: translate(2px, -2px); }

    /* Brand pattern (guideline section 01) on selected backgrounds */
    .hr-brand-pattern { position: relative; overflow: hidden; isolation: isolate; }
    .hr-brand-pattern::before { content: ""; position: absolute; top: 0; right: -40px; bottom: 0; width: 62%; z-index: -1; pointer-events: none;
      background: url(../images/hrexpo/brand/pattern-stroke-white.webp) no-repeat right center / auto 135%; opacity: .16;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
    .hr-footer-cta.hr-brand-pattern::before { opacity: .2; }
    .hr-pattern-bg::before { display: none; }
    /* Pattern as a divider band at the top of a light section */
    .hr-pattern-top { position: relative; }
    .hr-pattern-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 110px; pointer-events: none; opacity: .5;
      background: url(../images/hrexpo/brand/pattern-stroke.webp) repeat-x center top / auto 110px;
      -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
    .hr-pattern-top > .container { position: relative; padding-top: 50px; }
    .hr-zone::after { display: none; }

    /* Zones: labels and titles line up across the three cards */
    .hr-zone-body { width: 100%; }
    .hr-zone h3 { min-height: calc(1.25em * 2); display: flex; align-items: flex-end; }
    .hr-zone p { min-height: calc(1.6em * 3); }

    /* Brand icons */
    .hr-brand-ico, .why-choose-us .features-block .icon img.hr-brand-ico { width: 64px !important; height: 64px !important; max-width: none !important; object-fit: contain; display: block; }
    .why-choose-us .features-block .icon.hr-ico-wrap { margin-bottom: 16px; background: none !important; width: auto !important; height: auto !important; }

    /* ---------- Light sections (balanced with the dark ones) ---------- */
    .hr-light { background: var(--hr-mist) !important; }
    .hr-light .sec-title .sub-title { background: #fff !important; color: var(--hr-navy) !important; border: 1px solid var(--hr-line-light); }
    .hr-light .sec-title .h2.title, .hr-light h2, .hr-light h3, .hr-light h4 { color: var(--hr-navy); }
    .hr-light .hr-lead, .hr-light .text, .hr-light .hr-note { color: #3e5566 !important; }
    .hr-light .theme-btn-one.hr-btn-ghost { box-shadow: inset 0 0 0 1.5px rgba(14,36,58,.45); color: var(--hr-navy); }
    .hr-light .theme-btn-one.hr-btn-ghost i { background: var(--hr-navy); color: #fff !important; }
    /* About */
    .hr-about.hr-light .hr-platform-card h4 { color: var(--hr-navy); }
    .hr-about.hr-light .hr-platform-card h4 i { color: var(--theme-color1); }
    .hr-about.hr-light .hr-platform-card p { color: #3e5566; }
    .hr-about.hr-light .hr-why { background: var(--hr-navy); }
    .hr-about.hr-light .hr-why .hr-why-heading { color: #fff; }
    .hr-about.hr-light .hr-why-heading span { color: #2fc4bc; }
    /* Visitor routes: card text stays white on the photos */
    .hr-routes.hr-light .hr-route h3 { color: #fff; }
    /* Why exhibit */
    .why-choose-us.hr-light .features-block .title { color: var(--hr-navy) !important; }
    .why-choose-us.hr-light .features-block .text { color: #3e5566 !important; }
    .why-choose-us.hr-light .features-outer { border-color: rgba(14,36,58,.12) !important; }
    .why-choose-us.hr-light .features-outer .line { background: rgba(14,36,58,.12) !important; }
    .why-choose-us.hr-light .sec-title .title .color1 { color: var(--theme-color1); }
    /* FAQ keeps its light treatment; numbers in burgundy */
    .hr-faq.hr-light .hr-faq-num { color: var(--theme-color1); }

    /* ---------- Subtle motion ---------- */
    @media (prefers-reduced-motion: reduce) { .hr-platform-img img, .hr-route > img { transition: none; } }
  
    /* Header contrast over the photo: a soft navy fade at the top, not a solid bar */
    .hr-hero .banner-overlay { background:
      linear-gradient(180deg, rgba(14,36,58,.72) 0%, rgba(14,36,58,.4) 110px, rgba(14,36,58,0) 230px),
      linear-gradient(90deg, rgba(14,36,58,.92) 0%, rgba(14,36,58,.72) 38%, rgba(14,36,58,.15) 75%, rgba(14,36,58,0) 100%),
      linear-gradient(0deg, rgba(14,36,58,.85) 0%, rgba(14,36,58,0) 38%); }

    /* Zones: title and text heights are matched per row by the script in includes/footer.php */
    .hr-zone h3, .hr-zone p { min-height: 0; transition: none; }

    /* ---------- Sponsorship (homepage): even spacing, copy left, brand pattern framed on the right ---------- */
    .hr-sponsor-section { padding: var(--hr-section-y) 0; background: #007269; }
    .hr-sponsor.hr-sponsor--wide { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
      padding: 0; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(120deg, var(--hr-ink) 0%, #11283f 100%); }
    .hr-sponsor--wide::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--theme-color1); }
    .hr-sponsor-copy { padding: 52px 0 52px 56px; position: relative; z-index: 1; }
    .hr-sponsor--wide .sub-title { color: #2fc4bc; font-weight: 600; font-size: 13px; letter-spacing: .14em; margin-bottom: 14px; }
    .hr-sponsor--wide .title { font-size: 34px !important; line-height: 1.2 !important; margin-bottom: 16px; }
    .hr-sponsor--wide .text { max-width: 560px; margin-bottom: 30px; color: rgba(255,255,255,.82) !important; }
    .hr-sponsor--wide .hr-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
    .hr-sponsor-art { align-self: stretch; min-height: 100%; position: relative;
      background: url(../images/hrexpo/brand/pattern-stroke-white.webp) no-repeat 0% 50% / auto 78%; opacity: .2;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
    @media (max-width: 991.98px) {
      .hr-sponsor.hr-sponsor--wide { grid-template-columns: 1fr; }
      .hr-sponsor-copy { padding: 40px 32px 0 36px; }
      .hr-sponsor-art { min-height: 150px; background-size: auto 120px; background-position: 0 50%; -webkit-mask-image: none; mask-image: none; }
      .hr-sponsor--wide .title { font-size: 28px !important; }
    }
    @media (max-width: 575.98px) { .hr-sponsor-copy { padding: 32px 22px 0 26px; } .hr-sponsor--wide .title br { display: none; } }

    /* ================= Preloader: animated brand logo ================= */
    .preloader.hr-preloader { background: none; display: flex; align-items: center; justify-content: center; pointer-events: auto;
      animation: hrPlFailsafe .01s linear 10s forwards; }
    .preloader.hr-preloader::before, .preloader.hr-preloader::after { display: none !important; content: none !important; }
    .hr-pl-layer { position: absolute; inset: 0; clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(.76, 0, .24, 1); }
    .hr-pl-layer--base { background: radial-gradient(circle at 50% 46%, #ffffff 0%, #f1f5f3 46%, var(--hr-mist, #E1E8E4) 100%); }
    .hr-pl-layer--accent { background: linear-gradient(90deg, var(--theme-color1, #831B3D), var(--hr-accent, #039A93)); }
    .hr-pl-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 34px; width: min(300px, 64vw);
      transition: opacity 380ms ease, transform 520ms cubic-bezier(.4, 0, .2, 1); }
    .hr-pl-logo { width: 100%; height: auto; display: block; overflow: visible; }
    .hr-pl-logo g { transform-box: fill-box; }

    /* 1. The HR symbol: pieces fly in from around the mark and lock together */
    .hr-pl-logo .pl-piece { transform-origin: center; animation: hrPlPiece 820ms cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(120ms + var(--i) * 70ms); }
    .hr-pl-logo .pl-hair { animation: hrPlFade 400ms ease both 900ms; }
    @keyframes hrPlPiece { from { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.45) rotate(-10deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }

    /* 2. Wordmark rows sweep in, QATAR letters pop, the teal rule draws */
    .hr-pl-logo .pl-row { animation: hrPlSweep 700ms cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(780ms + var(--i) * 140ms); }
    .hr-pl-logo .pl-q { transform-origin: 50% 100%; animation: hrPlPop 520ms cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(1120ms + var(--i) * 60ms); }
    .hr-pl-logo .pl-line { transform-origin: left center; animation: hrPlDraw 700ms cubic-bezier(.65, 0, .35, 1) both 1300ms; }
    .hr-pl-logo .pl-tag { animation: hrPlRise 600ms ease both; animation-delay: calc(1480ms + var(--i) * 120ms); }
    @keyframes hrPlSweep { from { clip-path: inset(0 100% 0 0); transform: translateY(6px); } to { clip-path: inset(0 0 0 0); transform: none; } }
    @keyframes hrPlPop { from { opacity: 0; transform: translateY(10px) scale(.4); } to { opacity: 1; transform: none; } }
    @keyframes hrPlDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes hrPlRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes hrPlFade { from { opacity: 0; } to { opacity: 1; } }

    /* 3. Progress bar in the brand gradient, with a soft shimmer while the page is still loading */
    .hr-pl-bar { position: relative; width: 62%; height: 3px; border-radius: 3px; background: rgba(14, 36, 58, .1); overflow: hidden; }
    .hr-pl-bar span { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(0);
      background: linear-gradient(90deg, var(--theme-color1, #831B3D), var(--hr-accent, #039A93));
      animation: hrPlProgress 2000ms cubic-bezier(.45, .05, .25, 1) forwards 100ms; }
    .hr-pl-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
      animation: hrPlShimmer 1.2s ease-in-out infinite 2.1s; }
    @keyframes hrPlProgress { from { transform: scaleX(0); } 70% { transform: scaleX(.86); } to { transform: scaleX(1); } }
    @keyframes hrPlShimmer { from { left: -40%; } to { left: 100%; } }

    /* 4. Exit: the logo lifts away, then the white panel and a brand-colour band wipe up to reveal the page */
    .hr-preloader.is-done { pointer-events: none; }
    .hr-preloader.is-done .hr-pl-stage { opacity: 0; transform: translateY(-24px) scale(.97); }
    .hr-preloader.is-done .hr-pl-layer--base { clip-path: inset(0 0 100% 0); transition-delay: 220ms; }
    .hr-preloader.is-done .hr-pl-layer--accent { clip-path: inset(0 0 100% 0); transition-delay: 340ms; }

    /* Later pages of the same visit: the logo is already assembled, only a short reveal */
    .hr-pl-quick .hr-pl-logo *, .hr-pl-quick .hr-pl-bar::after { animation: none !important; }
    .hr-pl-quick .hr-pl-bar span { animation-duration: 450ms; animation-delay: 0s; }

    /* Hero entrance waits until the preloader leaves */
    .hr-is-loading .hr-intro { animation-play-state: paused; }

    @keyframes hrPlFailsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
    @media (prefers-reduced-motion: reduce) {
      .hr-pl-logo *, .hr-pl-bar span, .hr-pl-bar::after { animation: none !important; }
      .hr-pl-bar span { transform: scaleX(1); }
      .hr-pl-layer { transition-duration: 1ms; }
    }

    /* Sponsorship box in brand teal #019a93: white text and white buttons, no side accent line */
    .hr-sponsor-section .hr-sponsor, .hr-sponsor-section .hr-sponsor.hr-sponsor--wide { background: #019a93; border-color: rgba(14,36,58,.14); }
    .hr-sponsor-section .hr-sponsor .sub-title { color: #fff !important; opacity: .85; }
    .hr-sponsor-section .hr-sponsor .title { color: #fff !important; }
    .hr-sponsor-section .hr-sponsor .text { color: #fff !important; }
    .hr-sponsor-section .hr-btn-outline { border-color: rgba(255,255,255,.85); color: #fff; background: transparent; }
    .hr-sponsor-section .hr-btn-outline:hover { background: #fff; border-color: #fff; color: var(--hr-navy); }
    .hr-sponsor-section .hr-btn-solid { background: #fff; color: var(--hr-navy); }
    .hr-sponsor-section .hr-btn-solid:hover { background: var(--hr-navy); color: #fff; }
    .hr-sponsor-section .hr-sponsor--wide::before { display: none; }
    .hr-sponsor-section .hr-sponsor-art { opacity: .32; }
    .hr-sponsor-section .hr-brand-pattern::before { opacity: .3; }


    /* Zones section on brand turquoise */
    .hr-zones { background: #039A93; }
    .hr-zones .sec-title .sub-title { background: rgba(14,36,58,.22) !important; color: #fff !important; border-color: transparent !important; }

    /* Text on green/teal is always white */
    :root { --theme-color3-text-color: #fff; }
    .hr-zone-num { color: #fff; }
    .hr-hero-links a:hover { color: #fff; }
    .theme-btn-one.hr-btn-ghost:hover, .hr-light .theme-btn-one.hr-btn-ghost:hover { color: #fff; }

    /* Business visitor route card: brand green fade instead of navy */
    .hr-route--navy::before { background: linear-gradient(180deg, rgba(3,154,147,.12) 0%, rgba(0,114,105,.78) 46%, rgba(7,82,75,.96) 78%); }

    /* Programme section on brand green: all text white, open row marked by full white instead of teal */
    .services-section11 { background: #039A93; }
    .services-section11 .sec-title .sub-title { background: rgba(14,36,58,.22) !important; color: #fff !important; border-color: transparent !important; }
    .services-section11 .sec-title .title, .services-section11 .text, .services-section11 .hr-note { color: #fff !important; }
    .services-section11 .service-block11 .title-box .number { color: rgba(255,255,255,.85); }
    .services-section11 .service-block11 .inner-block .title-box .title { color: rgba(255,255,255,.82); }
    .services-section11 .service-block11 .inner-block .title-box:hover .title,
    .services-section11 .service-block11 .inner-block.active .title-box .title { color: #fff; }
    .services-section11 .service-block11 .content-column .title { color: #fff !important; }
    .services-section11 .service-block11 .inner-block, .services-section11 .sec-title + .service-block11 .inner-block { border-color: rgba(255,255,255,.28); }

    /* Programme accordion: height animates smoothly (script in js/script.js), content fades up as it opens */
    .service-block11 .inner-block .title-box { cursor: pointer; }
    .service-block11 .inner-block .title-box:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }
    .service-block11 .inner-block .content-box { display: block !important; height: 0; overflow: hidden; padding: 0 !important; margin: 0 !important;
      transition: height 620ms cubic-bezier(.65, 0, .35, 1) !important; }
    .service-block11 .inner-block .content-box > .row { padding: 0 0 28px 68px; opacity: 0; transform: translateY(16px);
      transition: opacity 380ms ease, transform 620ms cubic-bezier(.2, .7, .2, 1); }
    .service-block11 .inner-block .content-box.is-open > .row { opacity: 1; transform: none; transition-delay: 160ms; }
    .service-block11 .inner-block .title-box .icon { transition: background-color 300ms ease, border-color 300ms ease, transform 450ms cubic-bezier(.65, 0, .35, 1) !important; }
    @media (max-width: 991.98px) { .service-block11 .inner-block .content-box > .row { padding-left: 0; } }
    @media (prefers-reduced-motion: reduce) { .service-block11 .inner-block .content-box, .service-block11 .inner-block .content-box > .row { transition: none !important; } }

    /* FAQ accordion: same smooth height animation as the programme rows */
    .accordion-box2 .acc-content, .accordion-box2 .acc-content.current { display: block !important; height: 0; overflow: hidden; margin: 0 !important;
      transition: height 520ms cubic-bezier(.65, 0, .35, 1) !important; }
    .accordion-box2 .acc-content > .content { opacity: 0; transform: translateY(10px); transition: opacity 320ms ease, transform 520ms cubic-bezier(.2, .7, .2, 1) !important; }
    .accordion-box2 .acc-content.is-open > .content { opacity: 1; transform: none; transition-delay: 120ms !important; }
    .accordion-box2 .acc-btn { cursor: pointer; }
    .accordion-box2 .acc-btn:focus-visible { outline: 2px solid var(--hr-accent); outline-offset: -2px; border-radius: 16px; }
    .accordion-box2 .acc-btn .icon { transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 400ms cubic-bezier(.65, 0, .35, 1) !important; }
    @media (prefers-reduced-motion: reduce) { .accordion-box2 .acc-content, .accordion-box2 .acc-content > .content { transition: none !important; } }

    /* ================= Custom cursor (mouse and trackpad only) ================= */
    html.hr-has-cursor, html.hr-has-cursor body, html.hr-has-cursor a, html.hr-has-cursor button, html.hr-has-cursor [role="button"],
    html.hr-has-cursor label, html.hr-has-cursor select, html.hr-has-cursor .title-box, html.hr-has-cursor .acc-btn { cursor: none !important; }
    /* white + "difference" blend = inverts whatever is underneath, so it reads on light, navy and teal sections alike */
    .hr-cursor__dot, .hr-cursor__ring { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; will-change: transform;
      mix-blend-mode: difference; opacity: 0; transition: opacity 250ms ease; }
    .hr-cursor__dot.is-visible, .hr-cursor__ring.is-visible { opacity: 1; }
    .hr-cursor__dot::before { content: ""; position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff;
      transition: transform 250ms cubic-bezier(.2, .8, .2, 1); }
    .hr-cursor__ring::before { content: ""; position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
      border: 1.5px solid #fff;
      transition: width 380ms cubic-bezier(.2, .8, .2, 1), height 380ms cubic-bezier(.2, .8, .2, 1), margin 380ms cubic-bezier(.2, .8, .2, 1),
                  background-color 300ms ease, border-color 300ms ease, border-radius 300ms ease, transform 200ms ease, box-shadow 300ms ease; }
    .hr-cursor__label { position: absolute; transform: translate(-50%, -50%) scale(.6); opacity: 0; color: #fff; font: 600 13px/1 "Poppins", sans-serif;
      letter-spacing: .02em; white-space: nowrap; transition: opacity 250ms ease, transform 350ms cubic-bezier(.2, .8, .2, 1); }

    /* over links and buttons: the ring swells into a solid disc (inverting what it covers), the dot disappears into it */
    .hr-cursor__ring.is-link::before { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: #fff; border-color: transparent; }
    .hr-cursor__dot.is-link::before { transform: scale(0); }

    /* over cards: a burgundy disc with a word in it (no blend, so the brand colour stays true) */
    .hr-cursor__ring.is-label { mix-blend-mode: normal; }
    .hr-cursor__ring.is-label::before { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--theme-color1, #831B3D);
      border-color: transparent; box-shadow: 0 10px 30px rgba(14, 36, 58, .25); }
    .hr-cursor__ring.is-label .hr-cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .hr-cursor__dot.is-label::before { transform: scale(0); }

    /* over text fields: the ring narrows into a caret */
    .hr-cursor__ring.is-text::before { width: 3px; height: 26px; margin: -13px 0 0 -1.5px; border-radius: 2px; background: #fff; border-color: transparent; }
    .hr-cursor__dot.is-text::before { transform: scale(0); }

    /* press */
    .hr-cursor__ring.is-down::before { transform: scale(.82); }
    .hr-cursor__dot.is-down::before { transform: scale(1.6); }

    /* magnetic buttons spring back smoothly */
    .hr-magnetic { transition: transform 350ms cubic-bezier(.2, .8, .2, 1), background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease !important; }

    /* Sponsorship pattern on hover: the lines brighten, drift with the pointer, and a light pulse runs through them */
    .hr-sponsor-section .hr-sponsor-art { opacity: 1; background: none; position: relative; overflow: hidden; }
    .hr-sponsor-art::before, .hr-sponsor-art::after { content: ""; position: absolute; inset: -12px; pointer-events: none;
      transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px)) scale(var(--ps, 1));
      transition: transform 700ms cubic-bezier(.2, .8, .2, 1), opacity 500ms ease; }
    .hr-sponsor-art::before { background: url(../images/hrexpo/brand/pattern-stroke-white.webp) no-repeat 12px 50% / auto 78%; opacity: .32; }
    .hr-sponsor-art::after { opacity: 0;
      -webkit-mask: url(../images/hrexpo/brand/pattern-stroke-white.webp) no-repeat 12px 50% / auto 78%;
              mask: url(../images/hrexpo/brand/pattern-stroke-white.webp) no-repeat 12px 50% / auto 78%;
      background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) no-repeat;
      background-size: 260% 100%; background-position: 130% 0; }
    .hr-sponsor--wide:hover .hr-sponsor-art { --ps: 1.04; }
    .hr-sponsor--wide:hover .hr-sponsor-art::before { opacity: .5; }
    .hr-sponsor--wide:hover .hr-sponsor-art::after { opacity: 1; animation: hrPatternPulse 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
    @keyframes hrPatternPulse { from { background-position: 130% 0; } to { background-position: -30% 0; } }
    @media (max-width: 991.98px) {
      .hr-sponsor-art::before { background-size: auto 120px; background-position: 12px 50%; }
      .hr-sponsor-art::after { -webkit-mask-size: auto 120px; mask-size: auto 120px; }
    }
    @media (prefers-reduced-motion: reduce) { .hr-sponsor--wide:hover .hr-sponsor-art::after { animation: none; opacity: 0; } .hr-sponsor-art::before, .hr-sponsor-art::after { transition: opacity 300ms ease; transform: none; } }