/* ==========================================================================
   1. RKT GROUP COLOR PALETTE & CSS VARIABLES
   ========================================================================== */
:root {
  /* Brand Colors */
  --rktgroup-green: #006633;
  --rktgroup-green-hover: #004d26;
  --rktgroup-blue: #1a6b7a;
  --rktgroup-blue-hover: #13525e;
  --rktgroup-grey: #666666;
  --rktgroup-dark: #1a1a1a;
  --rktgroup-light-gray: #f4f4f4;

  /* Accent & Light Tints */
  --rktgroup-light-blue-1: #f8fafc;
  --rktgroup-light-blue-2: #e8eef3;
  --rktgroup-accent-blue: rgba(173, 216, 230, 0.3);

  /* Overlays */
  --rktgroup-overlay-dark: rgba(0, 0, 0, 0.5);
  --rktgroup-overlay-blue: rgba(26, 107, 122, 0.1);
  --rktgroup-overlay-green: rgba(0, 102, 51, 0.1);
}

/* ==========================================================================
   CLEAN CONTACT US FORM (SINGLE FLAT CARD)
   ========================================================================== */

/* 1. Reset all inner module and Visforms wrappers */
.sppb-addon-module,
.sppb-addon-module .sp-module,
.sppb-addon-module .sp-module-content,
.sppb-addon-module .custom,
body:not(.career-form-active) .visforms form,
body:not(.career-form-active) .visforms div,
body:not(.career-form-active) .visforms fieldset {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 2. Apply Grey Card ONLY to the top .visforms element */
body:not(.career-form-active) .visforms {
    background-color: #f4f4f4 !important;
    padding: 35px 40px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    margin: 20px auto !important;
    max-width: 600px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 3. Input Styling */
body:not(.career-form-active) .visforms input[type="text"],
body:not(.career-form-active) .visforms input[type="email"],
body:not(.career-form-active) .visforms input[type="tel"],
body:not(.career-form-active) .visforms select,
body:not(.career-form-active) .visforms textarea {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ==========================================================================
   2. UTILITY CLASSES (FOR SP PAGE BUILDER & SECTIONS)
   ========================================================================== */
.rktgroup-dark, .rktgroup-dark p    { color: var(--rktgroup-dark) !important; }
.rktgroup-blue, .rktgroup-blue p    { color: var(--rktgroup-blue) !important; }
.rktgroup-green, .rktgroup-green p  { color: var(--rktgroup-green) !important; }
.rktgroup-grey, .rktgroup-grey p    { color: var(--rktgroup-grey) !important; }

.bg-rktgroup-dark       { background-color: var(--rktgroup-dark) !important; }
.bg-rktgroup-blue       { background-color: var(--rktgroup-blue) !important; }
.bg-rktgroup-green      { background-color: var(--rktgroup-green) !important; }
.bg-rktgroup-grey       { background-color: var(--rktgroup-grey) !important; }
.bg-rktgroup-light-gray { background-color: var(--rktgroup-light-gray) !important; }

.bg-rkt-gradient-light {
  background: linear-gradient(135deg, #ffffff 0%, var(--rktgroup-light-blue-1) 50%, #ffffff 100%) !important;
}

.bg-rkt-gradient-grey {
  background: linear-gradient(135deg, var(--rktgroup-light-gray) 0%, var(--rktgroup-light-blue-2) 50%, var(--rktgroup-light-gray) 100%) !important;
}

.bg-rkt-gradient-blue {
  background: linear-gradient(135deg, var(--rktgroup-blue) 0%, #13525e 100%) !important;
}

.text-rkt-green { color: var(--rktgroup-green) !important; }
.text-rkt-blue  { color: var(--rktgroup-blue) !important; }
.text-rkt-grey  { color: var(--rktgroup-grey) !important; }
.text-rkt-dark  { color: var(--rktgroup-dark) !important; }

/* ==========================================================================
   3. RKT BUTTON STYLING & HOVER EFFECTS
   ========================================================================== */
.btn-rkt-primary,
.sppb-btn-success {
  background-color: var(--rktgroup-green) !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.btn-rkt-primary:hover,
.sppb-btn-success:hover {
  background-color: var(--rktgroup-green-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(0, 102, 51, 0.3) !important;
}

.btn-rkt-secondary,
.sppb-btn-info {
  background-color: var(--rktgroup-blue) !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.btn-rkt-secondary:hover,
.sppb-btn-info:hover {
  background-color: var(--rktgroup-blue-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(26, 107, 122, 0.3) !important;
}

#sp-main-body .my-custom-btn a,
#sp-main-body .my-custom-btn .sppb-btn,
#sp-page-builder .my-custom-btn .sppb-btn {
  display: inline-block !important;
  background-color: var(--rktgroup-blue) !important;
  color: #ffffff !important;
  transition: all 0.3s ease-in-out !important;
}

#sp-main-body .my-custom-btn a:hover,
#sp-main-body .my-custom-btn .sppb-btn:hover,
#sp-page-builder .my-custom-btn .sppb-btn:hover {
  background-color: var(--rktgroup-dark) !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
}

/* ==========================================================================
   4. HELIX TOP BAR (FORCE TEAL & KILL ALL WHITE CONTAINERS IN RED BOX)
   ========================================================================== */
#sp-top-bar { 
  background-color: #1a6b7a !important; 
}

/* Strip white background from any leftover container inside top-bar */
#sp-top-bar .container,
#sp-top-bar .row,
#sp-top-bar .sp-column,
#sp-top-bar .sp-module,
#sp-top-bar .sp-module-content,
#sp-top1,
#sp-top2 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide search inputs, forms, and empty search module containers in top bar */
#sp-top-bar input,
#sp-top-bar select,
#sp-top-bar form,
#sp-top-bar .finder,
#sp-top-bar .mod-finder,
#sp-top-bar .awesomplete,
#sp-top-bar .sp-module:not(:has(.gtranslate_wrapper)):not(:has(#gtranslate_wrapper)),
#sp-top2 .sp-module:not(:has(.gtranslate_wrapper)):not(:has(#gtranslate_wrapper)) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
}

.gtranslate_wrapper a:first-child,
#gtranslate_wrapper a:first-child {
  color: #ffffff !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

.gtranslate_wrapper a:first-child::after,
#gtranslate_wrapper a:first-child::after {
  content: " |";
  margin-right: 6px;
  color: #ffffff !important;
  font-weight: normal !important;
}

.gtranslate_wrapper a:nth-child(2),
#gtranslate_wrapper a:nth-child(2) {
  font-size: 0 !important;
  display: inline-block;
  text-decoration: none !important;
}

.gtranslate_wrapper a:nth-child(2)::before,
#gtranslate_wrapper a:nth-child(2)::before {
  content: "ZH-HANS";
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: normal !important;
}

html.translated-ltr .gtranslate_wrapper a:first-child,
body.translated-ltr .gtranslate_wrapper a:first-child,
html[lang*="zh"] .gtranslate_wrapper a:first-child {
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: normal !important;
}

html.translated-ltr .gtranslate_wrapper a:nth-child(2)::before,
body.translated-ltr .gtranslate_wrapper a:nth-child(2)::before,
html[lang*="zh"] .gtranslate_wrapper a:nth-child(2)::before,
.gtranslate_wrapper a:nth-child(2).gt_selected::before {
  color: #ffffff !important;
  font-weight: bold !important;
}

/* ==========================================================================
   5. COUNT UP & STAT CARDS
   ========================================================================== */
.count-up {
  font-size: 30px !important; 
  font-weight: 700 !important;
  color: #000000 !important; 
  margin-top: 20px !important; 
  margin-bottom: 20px !important;
  display: block !important;
  text-align: center !important;
}

.count-up.green-gradient {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #000000 !important; 
}

.stat-card {
  transition: all 0.3s ease-in-out !important;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 15px 30px rgba(26, 107, 122, 0.20) !important;
  border-color: var(--rktgroup-blue) !important;
}

/* ==========================================================================
   6. FINAL FOOTER & BACKGROUND FIX (IMAGE 2 MATCH)
   ========================================================================== */

/* 1. Force the main body above the footer to stay white */
html, body, .body-innerwrapper, #sp-main-body, #sp-page-builder {
  background-color: #ffffff !important;
}

/* 2. Force ALL bottom sections to be Teal (Fixes the white gap) */
#sp-bottom, 
#sp-footer, 
#sp-footer-wrapper, 
#sp-bottom-wrapper,
footer {
  background-color: #66c2cd !important;
  border: none !important;
  margin: 0 !important;
}

/* 3. LOGO INJECTION: Makes room and inserts the RKT logo */
#sp-bottom {
  position: relative !important;
  padding-top: 130px !important; /* Pushes the columns down to fit logo */
}

#sp-bottom::before {
  content: "";
  position: absolute !important;
  top: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 250px !important;
  height: 65px !important;
  /* IMPORTANT: Change this URL if your logo is named differently */
  background-image: url('/images/rkt-logo-white.png') !important; 
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 10 !important;
}

/* 4. OVERRIDE BOOTSTRAP: Force the 3 columns into the center */
#sp-bottom > .container > .row {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 80px !important; /* Spacing between Services, Connect, and Legal */
}

/* Strip default widths so they group tightly together */
#sp-bottom > .container > .row > .sp-column,
#sp-bottom > .container > .row > div {
  width: auto !important;
  max-width: fit-content !important;
  flex: 0 0 auto !important;
}

/* 5. FORCE DISCLAIMER TO BOTTOM ROW (Assuming it's the last module) */
#sp-bottom > .container > .row > div:last-child {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin-top: 30px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding-top: 25px !important;
}

/* 6. Text & Icon Styling */
#sp-bottom .sp-module-title { color: #1a6b7a !important; font-weight: 700 !important; font-size: 1.15rem !important; margin-bottom: 20px !important; }
#sp-bottom ul li a, #sp-bottom p, #sp-footer p { color: #1a6b7a !important; font-weight: 500 !important; }
#sp-bottom ul li a:hover { color: #13525e !important; text-decoration: underline !important; }

#sp-bottom .fa-linkedin, #sp-bottom .fa-facebook, #sp-bottom .fa-instagram {
  color: #1a6b7a !important; font-size: 1.6rem !important; margin-right: 15px !important; transition: transform 0.3s ease !important;
}
#sp-bottom .fa-linkedin:hover, #sp-bottom .fa-facebook:hover, #sp-bottom .fa-instagram:hover {
  transform: translateY(-4px) !important;
}

/* 7. HIDE EMPTY JOOMLA EDIT PENCILS CREATING THE WHITE GAP */
#sp-footer .sp-module:empty, 
#sp-bottom .sp-module:empty,
.jmoddiv:empty, 
.front-end-edit {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   7. MEGA MENU & NAVIGATION (100vw VIEWPORT BREAKOUT & HOVER FIX)
   ========================================================================== */

/* Prevent horizontal scrollbars from full-width breakout */
html, body {
  overflow-x: hidden !important;
}

#sp-header {
  position: relative !important;
  z-index: 9999 !important;
}

/* 1. VIEWPORT BREAKOUT MATH: FORCES 100% FULL SCREEN WIDTH ON ANY MONITOR */
#sp-header .sp-megamenu-parent .sp-dropdown,
#sp-header .sp-megamenu-parent .sp-dropdown-main {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  
  box-sizing: border-box !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  border: none !important;
  
  background-color: #f0f7fa !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
  z-index: 999999 !important;

  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
  
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. DISABLE DEFAULT HELIX HOVER TRIGGERS */
#sp-header .sp-megamenu-parent > li:not(.rkt-open):hover > .sp-dropdown,
#sp-header .sp-megamenu-parent > li:not(.rkt-open):hover > .sp-dropdown-main {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
}

/* 3. FORCE DROPDOWN TO STAY STATIC ON HOVER ONCE CLICKED OPEN */
#sp-header .sp-megamenu-parent > li.rkt-open > .sp-dropdown,
#sp-header .sp-megamenu-parent > li.rkt-open:hover > .sp-dropdown,
#sp-header .sp-megamenu-parent > li.rkt-open > .sp-dropdown-main,
#sp-header .sp-megamenu-parent > li.rkt-open:hover > .sp-dropdown-main {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Force container wrappers to share light blue background */
#sp-header .sp-megamenu-parent .sp-dropdown-inner,
#sp-header .sp-megamenu-parent .sp-dropdown .container,
#sp-header .sp-megamenu-parent .sp-dropdown .sppb-section,
#sp-header .sp-megamenu-parent .sp-dropdown .sppb-section-wrapper {
  background-color: #f0f7fa !important;
}

/* Center the inner contents nicely inside 1320px */
#sp-header .sp-megamenu-parent .sp-dropdown-inner,
#sp-header .sp-megamenu-parent .sp-dropdown .container {
  max-width: 1320px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 10px !important;
  padding-bottom: 20px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hand / Pointer cursor on hover */
#sp-menu .sp-megamenu-parent > li,
#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span {
  cursor: pointer !important;
}

/* Active link style when open */
#sp-header .sp-megamenu-parent > li.rkt-open > a,
#sp-header .sp-megamenu-parent > li.rkt-open > span {
  color: #13525e !important;
  border-bottom: none !important;;
}

@media (min-width: 992px) {
  #offcanvas-toggler, 
  .burger-icon, 
  .offcanvas-toggler {
    display: none !important;
  }
}

/* ==========================================================================
   8. FLOATING WHATSAPP BUTTON & SERVICES GRID
   ========================================================================== */
.whatsapp-float {
  position: fixed !important;
  width: 60px !important;
  height: 60px !important;
  bottom: 30px !important;
  right: 30px !important;
  background-color: #25d366 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  text-align: center !important;
  box-shadow: 2px 5px 15px rgba(0,0,0,0.25) !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.3s ease, background-color 0.3s ease !important;
}

.whatsapp-float span {
  font-size: 34px !important;
  color: #ffffff !important;
}

.whatsapp-float:hover {
  background-color: #128c7e !important;
  transform: scale(1.1) !important;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.rkt-service-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    text-decoration: none !important;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.rkt-service-content {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rkt-service-content img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.rkt-service-text {
    font-weight: 700;
    font-size: 0.85rem;
    color: #1a6b7a;
    line-height: 1.25;
    font-family: 'Inter', sans-serif;
}

.rkt-service-arrow {
    color: #1a6b7a;
    font-size: 1.1rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.rkt-service-box:hover {
    transform: translateY(-5px);
    border-color: #5bc0ce !important;
    background-color: #f0f9fa !important;
    box-shadow: 0 8px 20px rgba(26,107,122,0.12);
}

.rkt-service-box:hover .rkt-service-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   9. GLOBAL RESPONSIVE ARTICLE BANNER (NEWSROOM & CAREERS)
   ========================================================================== */
.view-article #sp-main-body,
.view-article #sp-main-body > .container,
.view-article #sp-main-body .row,
.view-article #sp-component,
.view-article .sp-column,
.view-article article.item-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: #ffffff !important;
    position: relative !important;
}

/* PREVENT MARGIN COLLAPSE: Use padding-top to hold exact 360px banner space cleanly */
.view-article .article-details:has(.article-full-image),
.view-article .article-details:has(.full-image) {
    position: relative !important;
    padding-top: 360px !important;
    margin-top: 0 !important;
}

/* Banner Image Layer (Top 340px Full Width) */
.view-article .article-full-image,
.view-article .full-image {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: 340px !important;
    z-index: 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.view-article .article-full-image img,
.view-article .full-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right center !important;
    display: block !important;
}

/* HIDE UNSTYLED METADATA TABS (RED BOX FIX) */
.view-article dl.article-info,
.view-article .article-info:not(.rkt-banner-published-date),
.view-article .icons,
.view-article ul.actions,
.view-article .btn-group,
.view-article .article-aside,
.view-article .article-can-edit,
.view-article .breadcrumb,
#sp-breadcrumbs {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   10. DESKTOP ARTICLE LAYOUTS (CLEAN FIT FOR LONG TITLES)
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Header Container Grouped on the Left Teal Section */
    .view-article .article-details .article-header,
    .view-article .article-header {
        position: absolute !important;
        top: 60px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 1200px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
        text-align: left !important;
    }

    /* 2. Breadcrumbs ("Home  /  Newsroom  /" or "Home / Careers /") */
    .rkt-banner-breadcrumbs,
    .view-article .article-header .rkt-banner-breadcrumbs {
        color: #ffffff !important;
        font-size: 0.90rem !important;
        font-weight: 500 !important;
        text-align: left !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .rkt-banner-breadcrumbs a,
    .rkt-banner-breadcrumbs span {
        color: #ffffff !important;
        text-decoration: none !important;
        opacity: 0.85 !important;
    }

    .rkt-banner-breadcrumbs a:hover {
        text-decoration: underline !important;
        opacity: 1 !important;
    }

    .rkt-banner-breadcrumbs .divider {
        opacity: 0.6 !important;
    }

    /* 3. Title */
    .view-article .article-header h1,
    .view-article .article-header h1 a,
    .view-article .article-details:has(.article-full-image) h1,
    .view-article:has(.article-full-image) h1 {
        color: #ffffff !important;
        font-size: 2.55rem !important; 
        font-weight: 700 !important;
        line-height: 1.22 !important;
        text-align: left !important;
        max-width: 560px !important; 
        margin-left: 0 !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        width: auto !important;
        text-shadow: none !important;
        display: block !important;
    }

    /* 4. Date ("Published on May 8, 2026") */
    .rkt-banner-published-date,
    .view-article .article-header .rkt-banner-published-date {
        color: #ffffff !important;
        font-size: 0.90rem !important;
        font-weight: 500 !important;
        text-align: left !important;
        opacity: 0.90 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* 5. Article Body Text (Starts directly below the 360px banner) */
    .view-article [itemprop="articleBody"],
    .view-article .article-body,
    .view-article .entry-content {
        margin-top: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 850px !important;
        padding: 35px 20px 60px !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 5 !important;
        background-color: #ffffff !important;
    }
}

/* ==========================================================================
   14. NEWSROOM ONLY: 3-COLUMN CARDS, SHIMMER & ZOOM
   ========================================================================== */
.view-category:has(.article-intro-image) .article-list .row,
.view-category:has(.article-intro-image) .blog .row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem !important;
    margin: 1.5rem 0 0 0 !important;
    width: 100% !important;
}

.view-category:has(.article-intro-image) .article-list .row > div,
.view-category:has(.article-intro-image) .blog .row > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.view-category:has(.article-intro-image) .article {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    height: 100% !important;
}

.view-category:has(.article-intro-image) .article:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}

.view-category:has(.article-intro-image) .article-intro-image {
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.view-category:has(.article-intro-image) .article-intro-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.view-category:has(.article-intro-image) .article:hover .article-intro-image img {
    transform: scale(1.08) !important;
}

@keyframes rktShimmerSweep {
  0% { transform: translateX(-150%) skewX(-25deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(350%) skewX(-25deg); opacity: 1; }
}

.view-category:has(.article-intro-image) .article::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: translateX(-150%) skewX(-25deg) !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 0 !important;
}

.view-category:has(.article-intro-image) .article:hover::before {
    animation: rktShimmerSweep 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}


/* ==========================================================================
   17. LEGAL SP PAGE BUILDER MODULE LIST
   ========================================================================== */
.sppb-addon-module ul,
div.category-module,
ul.category-module {
    max-width: 850px !important;
    margin: 30px auto !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

.sppb-addon-module ul li,
ul.category-module li {
    padding: 25px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.sppb-addon-module ul li a:first-of-type,
ul.category-module li a:first-of-type {
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    text-decoration: none !important;
    margin-bottom: 6px !important;
}

.sppb-addon-module ul li span.mod-articles-category-date,
ul.category-module li .mod-articles-category-date {
    color: #6b7280 !important;
    font-size: 0.92rem !important;
    margin: 0 0 10px 0 !important;
}

.sppb-addon-module ul li span.mod-articles-category-date::before,
ul.category-module li .mod-articles-category-date::before {
    content: "Last updated: " !important;
}

.sppb-addon-module ul li p.mod-articles-category-readmore a,
ul.category-module li a[class*="readmore"] {
    font-size: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
}

.sppb-addon-module ul li p.mod-articles-category-readmore a::before,
ul.category-module li a[class*="readmore"]::before {
    content: "Read more \2192" !important;
    font-size: 0.95rem !important;
    color: #1a6b7a !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   18. SINGLE ARTICLE: BANNERLESS CLEAN RESET & LEGAL PAGE
   ========================================================================== */
.view-article .article-details:not(:has(.article-full-image)) .article-header,
.view-article .article-details:not(:has(.article-full-image)) .article-info,
.view-article .article-details:not(:has(.article-full-image)) #sp-title,
.view-article .article-details:not(:has(.article-full-image)) .breadcrumb {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
}

.view-article .article-details:not(:has(.article-full-image)),
.view-article .article-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
}

/* HIDES THE SOLID BLUE/WHITE BAR ACROSS THE ENTIRE WEBSITE & LEGAL PAGE */
#sp-title,
#sp-page-title,
.sp-page-title,
.view-category #sp-title,
.view-category .breadcrumb {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   ARTICLE ALIGNMENT: JUSTIFY BODY, CENTER DATE & TITLE, LEFT BREADCRUMB
   ========================================================================== */
.view-article [itemprop="articleBody"] p,
.view-article .article-body p,
.view-article [itemprop="articleBody"] div p,
.view-article .article-body div p {
    text-align: justify !important;
    text-justify: inter-word !important;
}

.view-article h1,
.view-article .article-header h1,
.view-article [itemprop="articleBody"] h1,
.view-article .article-body h1,
.view-article h1 + p,
.view-article [itemprop="articleBody"] h1 + p,
.view-article .article-body h1 + p,
.rkt-manual-date,
.rkt-date-row {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.view-article [itemprop="articleBody"] > div > p:first-child,
.view-article .article-body > div > p:first-child,
.rkt-manual-bc,
.rkt-bc-left {
    text-align: left !important;
}

/* ==========================================================================
   LEGAL ARTICLE SPACING ADJUSTMENTS
   ========================================================================== */
.view-article [itemprop="articleBody"] > div > p:first-child,
.view-article .article-body > div > p:first-child,
.rkt-manual-bc,
.rkt-bc-left {
    margin-top: 25px !important;
    margin-bottom: 35px !important;
}

.view-article h1,
.view-article .article-header h1,
.view-article [itemprop="articleBody"] h1,
.view-article .article-body h1,
.rkt-manual-title {
    font-size: 2.4rem !important;
    line-height: 1.6 !important;
    letter-spacing: 0.5px !important;
    margin-top: 0 !important;
    margin-bottom: 35px !important;
}

.view-article h1 + p,
.view-article [itemprop="articleBody"] h1 + p,
.view-article .article-body h1 + p,
.rkt-manual-date,
.rkt-date-row {
    margin-top: 0 !important;
    margin-bottom: 45px !important;
}

.view-article h2,
.view-article h3,
.view-article [itemprop="articleBody"] h2,
.view-article [itemprop="articleBody"] h3,
.view-article .article-body h2,
.view-article .article-body h3 {
    font-size: 1.55rem !important;
    line-height: 1.5 !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

.view-article [itemprop="articleBody"] ul a,
.view-article .article-body ul a,
.rkt-manual-body a,
.rkt-manual-content a {
    color: #0000EE !important;
    text-decoration: underline !important;
    font-weight: 400 !important;
}

.view-article [itemprop="articleBody"] ul a:hover,
.view-article .article-body ul a:hover,
.rkt-manual-body a:hover,
.rkt-manual-content a:hover {
    color: #004d99 !important;
    text-decoration: underline !important;
}

.view-article [itemprop="articleBody"] > div > p:first-child a,
.view-article .article-body > div > p:first-child a,
.rkt-manual-bc a,
.rkt-bc-left a {
    color: #1a6b7a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.view-article [itemprop="articleBody"] > div > p:first-child a:hover,
.rkt-manual-bc a:hover,
.rkt-bc-left a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
    MENU FONT COLORS (TEAL)
   ========================================================================== */
#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span {
  color: #1a6b7a !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

#sp-menu .sp-megamenu-parent > li:hover > a,
#sp-menu .sp-megamenu-parent > li.active > a,
#sp-menu .sp-megamenu-parent > li.current-item > a {
  color: #13525e !important;
}

/* ==========================================================================
   HEADER ROW: SAFE LAYOUT (LOGO -> SEARCH -> MENU)
   ========================================================================== */
#sp-header {
  background-color: #ffffff !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  z-index: 9999 !important;
}

#sp-header .row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#sp-logo,
#sp-menu {
  max-width: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

#sp-logo {
  margin-right: 5px !important;
}

.rkt-search-wrapper {
  flex: 0 0 280px !important;
  width: 280px !important;
  margin-right: 320px !important; 
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  border: none !important;
}

#sp-menu {
  margin-left: 0 !important;
}

#sp-menu .sp-megamenu-parent {
  display: flex !important;
  flex-wrap: nowrap !important; 
}

#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span {
  white-space: nowrap !important; 
}

/* ==========================================================================
   KILL JOOMLA'S NATIVE SEARCH ARTIFACTS
   ========================================================================== */
.awesomplete > ul,
.awesomplete::before,
.awesomplete::after,
.js-finder-search-results,
.finder-search-results {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   SEARCH BOX & ASTRO DROPDOWN STYLING
   ========================================================================== */
.rkt-search-wrapper {
  flex: 0 0 280px !important;
  width: 280px !important;
  margin-right: auto !important; 
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}

.rkt-search-wrapper input {
  width: 100% !important;
  height: 42px !important;
  line-height: 42px !important;
  margin: 0 !important;
  padding: 0 35px 0 40px !important;
  border: 1.5px solid #1a6b7a !important;
  border-radius: 8px !important;
  color: #1a6b7a !important;
  font-size: 0.95rem !important;
  background-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.rkt-search-wrapper input:focus {
  box-shadow: 0 0 0 3px rgba(26, 107, 122, 0.15) !important;
}

.rkt-search-icon-left {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1a6b7a !important;
}

.rkt-search-clear-btn {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: #1a6b7a !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
}
.rkt-search-clear-btn.visible {
  display: flex !important;
}

/* ==========================================================================
   DROPDOWN & RESULT CARDS
   ========================================================================== */
.rkt-search-dropdown {
  display: none;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  width: 100% !important; 
  min-width: 100% !important;
  max-width: 100% !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  z-index: 999999 !important;
  box-sizing: border-box !important;
}

.rkt-search-dropdown::-webkit-scrollbar { width: 6px; }
.rkt-search-dropdown::-webkit-scrollbar-thumb { background-color: #94a3b8; border-radius: 4px; }
.rkt-search-dropdown::-webkit-scrollbar-track { background-color: #f1f5f9; }

.rkt-search-dropdown a.rkt-result-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  text-decoration: none !important;
  background-color: #ffffff !important;
  transition: background-color 0.2s ease !important;
  color: inherit !important;
}

.rkt-search-dropdown a.rkt-result-item:last-child { 
  border-bottom: none !important; 
}

.rkt-search-dropdown a.rkt-result-item:hover, 
.rkt-search-dropdown a.rkt-result-item.active { 
  background-color: #f1f5f9 !important; 
}

.rkt-search-dropdown .rkt-result-content { 
  flex: 1 1 auto !important; 
  min-width: 0 !important; 
}

.rkt-search-dropdown .rkt-result-title { 
  font-size: 0.95rem !important; 
  font-weight: 600 !important; 
  color: #0f172a !important; 
  margin-bottom: 3px !important; 
  text-decoration: none !important;
  display: block !important;
}

.rkt-search-dropdown .rkt-result-desc { 
  font-size: 0.82rem !important; 
  color: #64748b !important; 
  line-height: 1.3 !important; 
  margin-bottom: 6px !important; 
  text-decoration: none !important;
  display: block !important;
}

.rkt-search-dropdown .rkt-highlight {
  color: #1a6b7a !important;
  background-color: rgba(26, 107, 122, 0.12) !important;
  padding: 0 2px !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
}

.rkt-search-dropdown .rkt-result-meta { 
  display: flex !important; 
  align-items: center !important; 
  gap: 6px !important; 
  flex-wrap: wrap !important; 
}

.rkt-search-dropdown .rkt-cat-badge { 
  display: inline-block !important;
  background-color: #1a6b7a !important; 
  color: #ffffff !important; 
  font-size: 0.68rem !important; 
  font-weight: 500 !important; 
  padding: 3px 8px !important; 
  border-radius: 3px !important; 
  text-transform: capitalize !important; 
  line-height: 1.2 !important;
}

.rkt-search-dropdown .rkt-kw-pill { 
  display: inline-block !important;
  background-color: #f1f5f9 !important; 
  color: #475569 !important; 
  font-size: 0.68rem !important; 
  padding: 3px 8px !important; 
  border-radius: 3px !important; 
  line-height: 1.2 !important;
}

.rkt-search-dropdown .rkt-result-arrow {
  color: #1a6b7a !important;
  font-size: 1.3rem !important;
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.2s ease !important;
  margin-left: 10px !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  text-align: right !important;
}

.rkt-search-dropdown a.rkt-result-item:hover .rkt-result-arrow,
.rkt-search-dropdown a.rkt-result-item.active .rkt-result-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.rkt-search-dropdown .rkt-popular-wrap { padding: 14px !important; }
.rkt-search-dropdown .rkt-popular-title { font-size: 0.82rem !important; font-weight: 500 !important; color: #64748b !important; margin-bottom: 8px !important; }
.rkt-search-dropdown .rkt-popular-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.rkt-search-dropdown .rkt-popular-pill { background-color: #f1f5f9 !important; color: #1e293b !important; font-size: 0.78rem !important; font-weight: 500 !important; padding: 4px 10px !important; border-radius: 12px !important; cursor: pointer !important; }
.rkt-search-dropdown .rkt-popular-pill:hover { background-color: #1a6b7a !important; color: #ffffff !important; }

/* ==========================================================================
   DIRECT MENU GAP CONTROL (PUSHES 'HOME' TO THE RIGHT)
   ========================================================================= */
#sp-menu .sp-megamenu-parent > li:first-child {
  margin-left: 100px !important;
}

/* ==========================================================================
   1. INDIVIDUAL MENU CARDS
   ========================================================================== */
.menu-card,
.rkt-service-box {
  transition: all 0.3s ease !important;
}

.menu-card:hover,
.rkt-service-box:hover {
  transform: translateX(8px) !important;
  background: linear-gradient(90deg, #e3f1f7 0%, #edf6fb 100%) !important;
  border-color: rgba(26, 107, 122, 0.35) !important;
  box-shadow: 0 4px 14px rgba(26, 107, 122, 0.15) !important;
}

.menu-card:hover .link-arrow,
.menu-card:hover .fa-arrow-right,
.rkt-service-box:hover .rkt-service-arrow {
  transform: translateX(4px) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   CAREER BANNER JOB META STYLING
   ========================================================================== */
.rkt-banner-job-meta,
.view-article .article-header .rkt-banner-job-meta {
    color: #ffffff !important;
    font-size: 1.0rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    opacity: 0.92 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
}

/* ==========================================================================
   NEWSROOM ONLY TITLE SIZING & POSITIONING (LEAVES CAREERS UNTOUCHED)
   ========================================================================== */

/* 1. POSITION OF ALL 3 ITEMS ON THE NEWSROOM BANNER (UP/DOWN & LEFT/RIGHT) */
@media (min-width: 992px) {
  .view-article:has(.rkt-banner-published-date) .article-details .article-header,
  .view-article:has(.rkt-banner-published-date) .article-header {
      top: 50px !important;          /* 👈 CHANGE THIS to move UP/DOWN */
      padding-left: 20px !important; /* 👈 CHANGE THIS to move LEFT/RIGHT*/
  }
}

/* 2. Specifically targets Newsroom articles so long 4-5 line titles fit */
.view-article:has(.rkt-banner-published-date) .article-header h1,
.view-article:has(.rkt-banner-published-date) h1 {
    font-size: 2.08rem !important;
    line-height: 1.22 !important;
    margin-bottom: 12px !important;  /* 👈 Gap below Title */
    max-width: 580px !important;
}

/* 3. Published Date styling for Newsroom */
.rkt-banner-published-date,
.view-article .article-header .rkt-banner-published-date {
    color: #ffffff !important;
    font-size: 1.0rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    opacity: 0.90 !important;
    margin-top: 4px !important;     /* 👈 Gap above Date */
    display: block !important;
}

/* ==========================================================================
   FIX FOR WHITE TABS & GAPS (SMOOTH HEADER TO BANNER TRANSITION)
   ========================================================================== */

/* 1. Header Reset: Kill gaps and allow Search Dropdown to show */
#sp-header {
  background-color: #ffffff !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  overflow: visible !important; /* IMPORTANT: Must be visible for search dropdown */
}

/* 2. Inner Header Elements: Strip margins/padding */
#sp-logo,
#sp-logo *,
.rkt-search-wrapper,
.rkt-search-wrapper *,
#sp-header .sp-column,
#sp-header .container,
#sp-header .row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  box-shadow: none !important;
}

/* 3. Main Body & Component: Strip the top white space */
#sp-main-body, 
#sp-component, 
.view-article #sp-main-body,
.view-category #sp-main-body,
#sp-main-body > .container,
#sp-main-body .row,
#sp-main-body .sp-column {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 4. Kill the Helix Title/Breadcrumb Row (The most common cause of the white bar) */
#sp-title, 
#sp-page-title, 
.sp-page-title,
.breadcrumb-wrapper,
#sp-breadcrumbs {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
}

/* 5. Ensure Article Banner sits flush at the top */
.view-article .article-full-image,
.view-article .full-image {
    top: 0 !important;
    margin-top: 0 !important;
}

/* 6. GLOBAL COLORS: Main Body White, Footer Teal */
body, 
.body-innerwrapper, 
#sp-main-body, 
#sp-page-builder, 
#sp-main {
    background-color: #ffffff !important;
    background-image: none !important;
}

html,
#sp-bottom, 
#sp-bottom-wrapper, 
#sp-footer,
#sp-footer-wrapper {
    background-color: #66c2cd !important;
}

/* ==========================================================================
   1. FIELD SPACING & MAIN QUESTION TITLES
   ========================================================================== */

/* Outer field container - clean 12px gap between questions */
html body .visform .visforms-control-group,
html body [class*="visform"] .visforms-control-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    border: none !important;
}

/* Zero out inner wrappers */
html body .visform .controls,
html body .visform .control-group,
html body .visform .form-group,
html body .visform [class*="col-"],
html body .visform [class*="offset-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
}

/* ONLY the main question titles get full-width block (NOT option labels) */
html body .visform .visforms-control-group > label:first-of-type,
html body .visform .visforms-control-group > label:first-child {
    display: block !important;
    font-weight: 700 !important;
    color: #212529 !important;
    margin-bottom: 6px !important;
    font-size: 1rem !important;
    clear: both !important;
    width: 100% !important;
}

/* Text Inputs & Textarea */
html body .visform .form-control,
html body .visform textarea,
html body .visform input[type="text"],
html body .visform input[type="email"],
html body .visform input[type="tel"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
    background-color: #ffffff !important;
    margin-bottom: 0 !important;
    clear: both !important;
}

/* ==========================================================================
   2. RADIO BUTTONS (YES / NO TEXT LIFTED UP)
   ========================================================================== */

/* Force the radio option wrapper (circle + text) to stay inline */
html body .visform .form-check:has(input[type="radio"]),
html body .visform .visforms-radio .form-check,
html body .visform .visforms-radio > div,
html body .visform .visforms-radio,
html body [class*="visform"] .form-check:has(input[type="radio"]) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    margin-right: 35px !important; /* Space between Yes and No */
    margin-bottom: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

/* The radio circle */
html body .visform input[type="radio"],
html body [class*="visform"] input[type="radio"] {
    -webkit-appearance: radio !important;
    appearance: radio !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    float: none !important;
    clear: none !important;
}

/* The words "Yes" and "No" - lifted upward */
html body .visform .form-check-label,
html body .visform .visforms-radio label,
html body .visform label.radio,
html body .visform label:has(input[type="radio"]),
html body .visform input[type="radio"] + label {
    display: inline-block !important;
    position: relative !important;
    top: 2px !important; /* Moves the text UP */
    width: auto !important;
    margin-left: 6px !important;  /* Space between circle and text */
    margin-right: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    float: none !important;
    clear: none !important;
}

/* ==========================================================================
   3. ALL CHECKBOX LISTS (SPACING ABOVE & BELOW EACH CHECKBOX)
   ========================================================================== */

/* 1. Target the row for every individual checkbox option */
html body [class*="visform"] .form-check:has(input[type="checkbox"]),
html body [class*="visform"] label:has(input[type="checkbox"]),
html body [class*="visform"] label.flex-checkbox-label,
html body [class*="visform"] div:has(> input[type="checkbox"]),
html body .visform .visforms-checkbox > div,
html body .visform .visforms-checkbox .form-check,
html body .visform .visfield-checkboxgroup .form-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important; /* 👈 ADJUST VERTICAL GAP HERE (e.g. 12px, 14px, 18px) */
    clear: both !important;
}

/* 2. Target the label text specifically to kill any collapsed line-height */
html body [class*="visform"] label.flex-checkbox-label,
html body [class*="visform"] .form-check-label,
html body [class*="visform"] input[type="checkbox"] + label {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
}

/* 3. Ensure checkbox square stays aligned */
html body [class*="visform"] input[type="checkbox"] {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* 4. Remove bottom margin on the last item ("Other") so it doesn't leave an awkward gap */
html body [class*="visform"] .form-check:has(input[type="checkbox"]):last-child,
html body [class*="visform"] label:has(input[type="checkbox"]):last-of-type,
html body [class*="visform"] label.flex-checkbox-label:last-of-type {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   4. CONSENT CHECKBOX & NOTICE TEXT (TOP ALIGN + INLINE ASTERISK)
   ========================================================================== */

/* 1. Target the consent row container and set the gap between checkboxes */
html body .visform .visforms-checkbox .form-check:has(input[name*="consent"], input[name*="agree"], input[name*="pdpa"], input[id*="consent"], input[id*="agree"], input[id*="pdpa"]),
html body .visform .visfield-checkboxgroup .form-check:has(input[name*="consent"], input[name*="agree"], input[name*="pdpa"], input[id*="consent"], input[id*="agree"], input[id*="pdpa"]),
html body .visform div[class*="visform"]:has(input[name*="consent"], input[name*="agree"], input[name*="pdpa"]) .form-check,
html body .visform .consent-top .form-check,
html body [class*="visform"] .visforms-control-group:has(input[name*="agree"]),
html body [class*="visform"] .visforms-control-group:has(input[name*="consent"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; 
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 30px !important; /* 👈 CHANGE THIS VALUE to make the gap bigger (e.g. 24px) or smaller (e.g. 18px) */
    clear: both !important;
}

/* 2. Micro-adjust checkbox to sit flush with the 1st line of text */
html body .visform input[type="checkbox"][name*="consent"],
html body .visform input[type="checkbox"][name*="agree"],
html body .visform input[type="checkbox"][name*="pdpa"],
html body .visform input[type="checkbox"][id*="consent"],
html body .visform input[type="checkbox"][id*="agree"],
html body .visform input[type="checkbox"][id*="pdpa"],
html body .visform .consent-top input[type="checkbox"] {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

/* 3. FIX THE ASTERISK: Override Section 3's 'display: flex' on label so text & * stay inline */
html body .visform .visforms-checkbox .form-check:has(input[name*="consent"], input[name*="agree"], input[name*="pdpa"]) label,
html body .visform .visfield-checkboxgroup .form-check:has(input[name*="consent"], input[name*="agree"], input[name*="pdpa"]) label,
html body .visform .consent-top label {
    display: inline !important;
    width: auto !important;
    line-height: 1.45 !important;
    font-size: 0.95rem !important;
    color: #374151 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Keep the asterisk right next to the sentence */
html body .visform .form-check label .asterix-ancor,
html body .visform .form-check label .star,
html body .visform .form-check label .asterisk {
    display: inline !important;
    color: #dc3545 !important;
    margin-left: 4px !important;
    position: static !important;
    float: none !important;
}

/* Lift the consent checkbox square higher */
html body [class*="visform"] .form-check:has(input[type="checkbox"]) input[type="checkbox"],
html body [class*="visform"] label:has(input[type="checkbox"]) input[type="checkbox"] {
    position: relative !important;
    top: 2px !important;  /* 👈 Negative number moves it UP (e.g. -2px, -3px) */
    margin-top: 0 !important;
}

/* ==========================================================================
   5. CLOUDFLARE TURNSTILE CAPTCHA (FORCE FLUSH LEFT)
   ========================================================================== */

/* 1. Reset all possible Visforms captcha parent containers */
html body .visforms div[class*="captcha"],
html body .visforms div[class*="turnstile"],
html body .visforms div[id*="turnstile"],
html body .visforms .visfield-captcha,
html body .visforms .visforms-captcha,
html body .visforms .visforms-control-group-captcha,
html body .visforms div:has(> .cf-turnstile),
html body .visforms div:has(iframe[src*="cloudflare"]),
html body .visforms div:has(iframe[src*="challenges"]) {
    display: block !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    float: none !important;
    clear: both !important;
}

/* 2. Override all inner controls and grid offsets */
html body .visforms [class*="captcha"] .controls,
html body .visforms [class*="captcha"] [class*="col-"],
html body .visforms [class*="captcha"] [class*="offset-"],
html body .visforms [class*="turnstile"] [class*="col-"] {
    display: block !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* 3. Force the Turnstile box and iframe to float left */
html body .visforms .cf-turnstile,
html body .visforms [data-sitekey],
html body .visforms iframe[src*="cloudflare"],
html body .visforms iframe[src*="challenges"],
html body .visforms .cf-turnstile > iframe,
html body .visforms .cf-turnstile > div {
    display: block !important;
    float: left !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    left: 0 !important;
}

/* Clear the float so the Submit button sits cleanly below */
html body .visforms input[type="submit"],
html body .visforms button[type="submit"],
html body .visforms .visforms-buttons {
    clear: both !important;
}

/* ==========================================================================
   6. SUBMIT BUTTON (100% FULL WIDTH AT BOTTOM)
   ========================================================================== */
html body .visform .visforms-buttons,
html body .visform .visform-btn,
html body .visform .visforms-btn,
html body .visform .form-actions,
html body .visform .controls-buttons,
html body .visform .visforms-control-group:last-child,
html body .visform .visforms-control-group:last-of-type,
html body [class*="visform"] .visforms-buttons {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

html body .visform input[type="submit"],
html body .visform button[type="submit"],
html body .visform .visforms-btn-submit,
html body .visform .btn-primary,
html body [class*="visform"] input[type="submit"],
html body [class*="visform"] button[type="submit"] {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 20px !important;
    background-color: #176575 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    border-radius: 4px !important;
    border: none !important;
    margin: 0 !important;
    text-align: center !important;
    cursor: pointer !important;
    float: none !important;
    clear: both !important;
}

html body .visform input[type="submit"]:hover,
html body .visform button[type="submit"]:hover {
    background-color: #114e5b !important;
}

/* ==========================================================================
   REMOVE HORIZONTAL BORDER LINE & DIVIDERS
   ========================================================================== */
html body .visform hr,
html body [class*="visform"] hr {
    display: none !important;
    border: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .visform fieldset,
html body .visform .visforms-control-group,
html body .visform .cf-turnstile,
html body .visform .visforms-captcha,
html body .visform div:has(> iframe) {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   FORCE RADIO BUTTON TEXT ("YES" / "NO") TO NORMAL (NOT BOLD)
   ========================================================================== */
html body .visform .visforms-radio,
html body .visform .visforms-radio label,
html body .visform .visforms-radio span,
html body .visform .visforms-radio strong,
html body .visform .visforms-radio b,
html body .visform .form-check:has(input[type="radio"]),
html body .visform .form-check:has(input[type="radio"]) *,
html body .visform input[type="radio"] + label,
html body .visform input[type="radio"] ~ label,
html body [class*="visform"] input[type="radio"] + label {
    font-weight: 400 !important;
    font-weight: normal !important;
}

/* ==========================================================================
   PLEASE NOTE: SINGLE DIVIDER LINE ONLY
   ========================================================================== */

/* 1. Kill any duplicate lines on inner elements */
.visforms .rkt-note-wrapper *::after,
.visforms .rkt-please-note-box::after,
.visforms .visfield-customtext::after,
.visforms .custom-text::after {
    display: none !important;
    content: none !important;
}

.visforms .visforms-control-group,
.visforms .control-group,
.visforms form > div {
    border-top: none !important;
    border-bottom: none !important;
}

/* 2. Text styling & flush-left alignment */
.rkt-note-wrapper,
.visforms .rkt-note-wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
    border: none !important;
}

.rkt-note-wrapper *,
.visforms .rkt-note-wrapper * {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    border: none !important;
}

.rkt-note-wrapper strong,
.rkt-note-wrapper b {
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.rkt-note-wrapper p,
.rkt-note-wrapper span,
.rkt-note-wrapper div {
    color: #444444 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
}

.rkt-note-wrapper a {
    color: #176575 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* 3. DRAW ONLY ONE SINGLE DIVIDER LINE */
.rkt-note-wrapper::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #e2e8f0 !important; /* Single line */
    margin-top: 16px !important;
    margin-bottom: 22px !important;
    clear: both !important;
}

/* ==========================================================================
   PER-PAGE FORM BACKGROUND CONTROLS
   ========================================================================== */

/* 1. DEFAULT / SERVICES: Crisp White Form Card (IGNORES CAREER FORM) */
body:not(.career-form-active) .visforms,
body.form-theme-white:not(.career-form-active) .visforms {
    background-color: #ffffff !important; /* Crisp White */
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 35px 40px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    max-width: 600px !important;
    margin: 20px auto !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 2. CONTACT US & NEWSROOM: Light Grey Card (IGNORES CAREER FORM) */
body.form-theme-grey:not(.career-form-active) .visforms {
    background-color: #f4f4f4 !important; /* Light Grey Card */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

/* 3. CAREER FORM ONLY: Fully transparent so it blends into the page (Like Image 3) */
body.career-form-active .visforms,
body.career-form-active .visforms form,
body.career-form-active form.visform {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 700px !important;
}

/* 4. Input fields stay White across ALL pages */
.visforms input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]),
.visforms select,
.visforms textarea {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    font-size: 15px !important;
}

/* ==========================================================================
   BULLETPROOF FIELD SPACING (FORCED GAP BETWEEN QUESTIONS)
   ========================================================================== */

/* 1. Force a 24px gap at the bottom of EVERY question block (Removed display: block to respect hidden fields) */
html body .visforms form > div,
html body form.visform > div,
html body form[name*="visform"] > div,
html body div[class*="visform"] .control-group,
html body div[class*="visform"] .visforms-control-group,
html body div[class*="visform"] .visfield-container,
html body div[class*="visform"] .visform-field {
    margin-bottom: 10px !important; 
    padding: 0 !important;
    width: 100% !important;
    clear: both !important;
}

/* 2. CRITICAL FIX: Ensure hidden conditional fields STAY hidden */
html body .visforms form > div[style*="display: none"],
html body .visforms form > div[style*="display:none"],
html body div[class*="visform"] [style*="display: none"],
html body div[class*="visform"] [style*="display:none"],
html body div[class*="visform"] .hide {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* 3. Add a small gap between the Question Label and the Input/Radio Box */
html body div[class*="visform"] .visforms-control-group > label:first-of-type,
html body div[class*="visform"] .control-group > label:first-child,
html body div[class*="visform"] .visfield-container > label:first-child,
html body form.visform > div > label:first-child,
html body div[class*="visform"] .control-label {
    margin-bottom: 10px !important;
    display: block !important;
    width: 100% !important;
}

/* 4. Keep radio buttons/checkbox options grouped tightly together */
html body div[class*="visform"] label.flex-checkbox-label,
html body div[class*="visform"] label.radio {
    margin-bottom: 8px !important;
}

/* ==========================================================================
   HIDE FORMATTED EMAIL TEXTAREA (SAFE VERSION)
   ========================================================================== */
.rkt-hidden-field {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    visibility: hidden !important;
}

/*search function*/
/* Allow the Search Dropdown to overflow down past the header */
#sp-header,
#sp-header .container,
#sp-header .row,
#sp-header .sp-column {
    overflow: visible !important;
}

/* Hide landing page modules when viewing an individual job position */
body.view-article .rkt-landing-only {
    display: none !important;
}

/* ==========================================================================
   FIX CAREERS LANDING PAGE (REMOVE TOP WHITE GAP & FORCE 100% FULL-WIDTH)
   ========================================================================== */

/* 1. Remove the white gap above the banner on Careers page */
body.view-category #sp-main-body,
body.view-category #sp-main-body > .container,
body.view-category #sp-component,
body.view-category .sp-column {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Force the main body container to stretch 100% full screen width */
body.view-category #sp-main-body > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3. Force SP Page Builder rows inside the module to go edge-to-edge */
body.view-category .sp-module .sppb-row-container,
body.view-category .sp-module .sppb-section {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 4. Give the "Careers" banner text nice breathing room from the left edge */
body.view-category .sp-module .sppb-section:first-child .sppb-column {
    padding-left: 50px !important;
    padding-right: 50px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   FORCE ALL JOOMLA SUCCESS MESSAGES TO TOP-CENTER
   ========================================================================== */
#system-message-container,
#system-message-container .toast-container,
#system-message-container .toast-container.bottom-0.end-0,
div.toast-container.bottom-0.end-0 {
    position: fixed !important;
    top: 30px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: 90vw !important;
    z-index: 999999 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#system-message-container joomla-alert,
#system-message-container .toast,
#system-message-container .alert {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border: 1px solid #badbcc !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    min-width: 320px !important;
}

/* Smooth fade out after 4.5 seconds */
#system-message-container joomla-alert,
#system-message-container .toast {
    animation: autoHideTopToast 0.5s ease 4s forwards !important;
}

@keyframes autoHideTopToast {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); visibility: hidden; }
}

/* ==========================================================================
   KILL HEADER WHITE GAP & BANNER OVERLAY
   ========================================================================== */

/* 1. Collapse the Helix header to fit its contents exactly (removes the 90px gap) */
#sp-header {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background-color: #ffffff !important;
}

#sp-header .row {
  height: auto !important;
  min-height: 0 !important;
}

/* 2. Remove bottom space/notch under the RKT logo */
#sp-logo,
#sp-logo a,
#sp-logo img,
#sp-header .logo,
#sp-header .logo-image {
  height: auto !important;
  max-height: 44px !important; /* Adjust to your logo height */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: block !important;
}

/* 3. Kill any residual Helix Title wrapper or empty system message containers */
#sp-title,
#sp-title-wrapper,
#sp-page-title,
#sp-page-title-wrapper,
section[id*="title"],
#system-message-container:empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* 4. Fix Section 9: Make inner wrappers transparent so they don't cover the banner */
.view-article #sp-main-body,
.view-article #sp-main-body > .container,
.view-article #sp-main-body .row,
.view-article #sp-component,
.view-article .sp-column,
.view-article article.item-page,
.view-article .article-details {
  background-color: transparent !important;
  background: transparent !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 5. Force the banner image flush against the bottom of the header */
.view-article .article-full-image,
.view-article .full-image {
  top: 0 !important;
  margin-top: 0 !important;
}

/* ===================================================
   1. UNIVERSAL WIPE OF ALL BOTTOM LINES & BORDERS
   =================================================== */
/* Strip borders, box-shadows, and outlines from all menu elements */
.sp-megamenu-parent,
.sp-megamenu-parent *,
.sp-megamenu-parent *::after,
.sp-megamenu-parent *::before {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Force kill any pseudo-element background that isn't our custom line */
.sp-megamenu-parent > li::after,
.sp-megamenu-parent > li::before,
.sp-megamenu-parent > li > a::after,
.sp-megamenu-parent > li > span::after,
.sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-dropdown-inner,
.sp-megamenu-parent .sp-dropdown::before,
.sp-megamenu-parent .sp-dropdown::after {
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
}

/* ===================================================
   2. MENU ITEM PADDING & POSITIONING
   =================================================== */
.sp-megamenu-parent > li {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    position: relative !important;
    display: inline-block !important;
    text-decoration: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===================================================
   3. THE ONLY ACTIVE LINE (CLOSE TO THE TEXT)
   =================================================== */
.sp-megamenu-parent > li > a::before,
.sp-megamenu-parent > li > span::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    width: 0 !important;                     /* Hidden when not hovered */
    height: 2px !important;                  /* Line thickness */
    background-color: #1a6b7a !important;    /* Teal color */
    top: calc(50% + 14px) !important;        /* Closes gap under text */
    transition: width 0.25s ease-in-out !important;
    pointer-events: none !important;
    z-index: 99 !important;
}

/* Expand line ONLY on hover */
.sp-megamenu-parent > li:hover > a::before,
.sp-megamenu-parent > li:hover > span::before {
    width: 100% !important;
}

/* ===================================================
   4. ARROW ROTATION (v -> ^ ON HOVER)
   =================================================== */
body.ltr .sp-megamenu-parent > li.sp-has-child > a::after,
body.ltr .sp-megamenu-parent > li.sp-has-child > span::after,
.sp-megamenu-parent > li.sp-has-child > a::after,
.sp-megamenu-parent > li.sp-has-child > span::after {
    display: inline-block !important;
    float: none !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    transform-origin: center center !important;
    transition: transform 0.3s ease-in-out !important;
}

body.ltr .sp-megamenu-parent > li.sp-has-child:hover > a::after,
body.ltr .sp-megamenu-parent > li.sp-has-child:hover > span::after,
.sp-megamenu-parent > li.sp-has-child:hover > a::after,
.sp-megamenu-parent > li.sp-has-child:hover > span::after {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   VISFORMS PARTICIPANT CARDS (IMAGE 2 MATCH WITH GREY BACKGROUND)
   ========================================================================== */
html body .visforms div.participant-names-section,
html body div.participant-names-section {
  width: 100% !important;
  margin-top: 15px !important;
  margin-bottom: 25px !important;
  clear: both !important;
}

html body .visforms div.participant-inputs-container,
html body div.participant-inputs-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
  margin-top: 0.75rem !important;
}

/* Forces the #f8fafc grey card background, border, and padding like Image 2 */
html body .visforms div.participant-card,
html body div.participant-card {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-sizing: border-box !important;
}

html body .visforms div.participant-card-header,
html body div.participant-card-header {
  font-weight: 700 !important;
  color: #1a6b7a !important;
  font-size: 1.1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.25rem !important;
}

html body .visforms div.participant-field-group,
html body div.participant-field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  width: 100% !important;
}

/* Full Name, NRIC, Email, Dietary label styling */
html body .visforms label.participant-field-label,
html body label.participant-field-label {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #212529 !important;
  font-family: inherit !important;
  margin-bottom: 4px !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* Text inputs */
html body .visforms input.participant-field,
html body input.participant-field {
  width: 100% !important;
  padding: 10px 13px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 0.95rem !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  color: #374151 !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

html body .visforms input.participant-field:focus,
html body input.participant-field:focus {
  border-color: #1a6b7a !important;
  box-shadow: 0 0 0 3px rgba(26, 107, 122, 0.12) !important;
}

/* Dietary options & labels */
html body .visforms div.participant-dietary-options,
html body div.participant-dietary-options {
  display: flex !important;
  flex-direction: row !important;
  gap: 2.5rem !important; /* Space between Normal and Vegetarian */
  align-items: center !important;
  margin-top: 0.35rem !important;
}

html body .visforms label.participant-dietary-label,
html body label.participant-dietary-label {
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  margin: 0 !important;
  color: #333 !important;
  font-size: 0.95rem !important;
}

/* Adds the gap between the circle and the word (Normal / Vegetarian) */
html body .visforms input.participant-dietary-input,
html body input.participant-dietary-input {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  margin: 0 !important;
  margin-right: 8px !important; /* 👈 This creates the exact gap like Image 2 */
  flex-shrink: 0 !important;
  position: relative !important;
  top: -1px !important; /* Perfectly centers the circle with the text */
}

/* Position label (exact same 1rem, 700 bold weight, and #212529 color) */
html body .visforms label.p-label-role::before,
html body label.p-label-role::before {
  content: "Position *" !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #212529 !important;
  font-family: inherit !important;
  display: block !important;
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
}