/*
Theme Name: Accelerated Payments
Theme URI: https://zeta.co.za
Template: hello-elementor
Author: //Steph
Author URI: https://zeta.co.za
Description: A plain-vanilla & lightweight theme for Elementor page builder
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 2.7.1.1682775042
Updated: 2026-02-21 14:30:42
*/

/*
 * ══════════════════════════════════════════════════════════════════════
 * TABLE OF CONTENTS
 * ══════════════════════════════════════════════════════════════════════
 *
 *  1.  Design Tokens & Global Utilities
 *  2.  Stats Ticker
 *  3.  Feature Cards
 *  4.  AP Form Card              (reusable — class: ap-form-card)
 *  5.  Referral Partner Section  (#referral-partner)
 *  6.  Icon Badge List           (reusable — class: icon-badge-list)
 *  7.  Why Accelerated Payments  (#why-ap)
 *  8.  Testimonials Carousel     (#testimonials-carousel)
 *  9.  Pricing / Solutions Cards (.pricing-card)
 * 10.  TWAE Timeline Widget      (.twae-wrapper)
 * 11.  Orange Dot & Row          (.orange-dot, .orange-dot-row)
 * 12.  Homepage Hero Fixes
 * 13.  Blog — Read More Button   (.elementor-post__read-more)
 * 14.  Blog / Archive Page       (.elementor-location-archive)
 * 15.  About Us — Staff          (.ap-staff-filter-section)
 * 16.  Invoice Finance Page      (.elementor-page-7625)
 *
 * ══════════════════════════════════════════════════════════════════════
 * COLOUR PALETTE
 * ══════════════════════════════════════════════════════════════════════
 *   Brand orange  : #DB661E
 *   Brand teal    : #11E6B1
 *   Dark navy     : #0D1E2C
 *   Light blue bg : #E7F3FE
 *   Subtle grey   : #EBF0F8
 *
 * ══════════════════════════════════════════════════════════════════════
 * CONVENTIONS
 * ══════════════════════════════════════════════════════════════════════
 *   • !important is used throughout to override Elementor generated
 *     inline / post CSS. This is intentional and necessary.
 *   • Avoid [data-id="..."] selectors for new rules — Elementor can
 *     regenerate element IDs. Use CSS classes instead.
 *     Existing data-id rules are kept where no class alternative exists
 *     and are flagged with a TODO comment.
 */


/* ─────────────────────────────────────────────────────────────────────
 * 1. DESIGN TOKENS & GLOBAL UTILITIES
 * ───────────────────────────────────────────────────────────────────── */

/*
 * .ap-gradient-bg
 * JPEG-backed dark hero gradient.
 * Apply to any section needing the site-wide dark background.
 */
.ap-gradient-bg {
  background: url('/wp-content/uploads/2026/02/Home-page-scaled.jpg') center / cover no-repeat !important;
}

/*
 * .ap-gradient-bg-css
 * Pure-CSS fallback — no JPEG dependency.
 * Two radial blobs (purple upper-right, teal centre-left) layered over
 * a dark teal-to-navy base, visually matching the JPEG.
 */
.ap-gradient-bg-css {
  background:
    radial-gradient(ellipse at 68% 25%, #3d3364 0%, transparent 48%),
    radial-gradient(ellipse at 22% 58%, #1d5260 0%, transparent 45%),
    linear-gradient(170deg, #2b4d5a 0%, #1e304a 52%, #1c3840 100%) !important;
}

/*
 * .light-bg — ice-blue section background.
 * The same dark gradient blobs sit underneath; a semi-transparent
 * light-blue wash sits on top, giving the section depth without
 * looking like a flat solid colour.
 */
.light-bg {
  background:
    linear-gradient(rgba(231, 243, 254, 0.88), rgba(231, 243, 254, 0.88)),
    radial-gradient(ellipse at 68% 25%, #3d3364 0%, transparent 48%),
    radial-gradient(ellipse at 22% 58%, #1d5260 0%, transparent 45%),
    linear-gradient(170deg, #2b4d5a 0%, #1e304a 52%, #1c3840 100%) !important;
}


/*
 * Responsive visibility utilities — for Elementor V4 atomic elements,
 * which have no built-in responsive show/hide controls.
 * Breakpoints match Elementor defaults: mobile ≤767px, tablet/desktop ≥768px.
 * Class names describe where the element IS visible:
 *
 *   .desktop-tablet-only — visible on desktop + tablet, hidden on mobile
 *   .mobile-only         — visible on mobile, hidden on tablet + desktop
 */
@media (max-width: 767px) {
  .desktop-tablet-only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────
 * 2. STATS TICKER
 * ───────────────────────────────────────────────────────────────────── */

/* Outer mask — hides the infinite duplicate track */
.ticker-wrap {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

/* Inner flex track — two identical copies side by side for seamless loop */
.ticker-inner {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}

.ticker-inner:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-track {
  display: flex;
  align-items: center;
}

/* Force alignment through all Elementor wrapper layers */
.ticker-track .elementor-widget {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* Remove default block margins inside ticker text widgets */
.ticker-track p,
.ticker-track .elementor-widget-container p,
.ticker-track .elementor-widget-container h1,
.ticker-track .elementor-widget-container h2,
.ticker-track .elementor-widget-container h3,
.ticker-track .elementor-widget-container span {
  margin: 0;
  line-height: 1;
}

/* Rotated orange diamond divider between ticker items */
.ticker-divider {
  display: block;
  width: 20px;
  height: 20px;
  background: #DB661E;
  border-radius: 5px;
  transform: rotate(-45deg);
  flex-shrink: 0;
  margin: 0 56px;
  align-self: center;
}

/* Clip section so the duplicated track does not bleed */
#stats-ticker {
  overflow: hidden !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 3. FEATURE CARDS
 * ───────────────────────────────────────────────────────────────────── */

/* Semi-transparent glass card wrapper */
.feature-cards .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  padding: 48px 22px 61px 23px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 8.2px 0 rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease;
}

.feature-cards .elementor-icon-box-wrapper:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Override Elementor's forced centre-alignment for block-start icon position */
.feature-cards .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper {
  align-items: flex-start !important;
  text-align: left !important;
}

/* Icon — left-anchored */
.feature-cards .elementor-icon-box-icon {
  display: flex;
  justify-content: flex-start;
  margin: 0;
}

/* Text — all left-aligned */
.feature-cards .elementor-icon-box-content,
.feature-cards .elementor-icon-box-title,
.feature-cards .elementor-icon-box-description {
  width: 100%;
  text-align: left;
}

/* Card row — stretch children to fill available height */
.feature-cards {
  align-items: flex-start !important;
}

.feature-cards > * {
  align-items: stretch !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 4. AP FORM CARD  (reusable)
 *
 * Apply "ap-form-card" via Elementor › Advanced › CSS Classes to the
 * container wrapping the Elementor Form widget (and any disclaimer text
 * widget below it).
 * ───────────────────────────────────────────────────────────────────── */

/* White rounded card container */
.ap-form-card {
  background: #ffffff !important;
  border-radius: 40px !important;
  padding: 20px !important;
  box-shadow: 0 4px 8.2px 0 rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
}

/* Breathing room between field rows */
.ap-form-card .elementor-field-group {
  margin-bottom: 8px !important;
}

/* Strip inner form card styling — the container provides the visual card */
.ap-form-card .elementor-form {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Text inputs, textareas, selects */
.ap-form-card .elementor-field-group input,
.ap-form-card .elementor-field-group textarea,
.ap-form-card .elementor-field-group select {
  background: #ebebeb !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  color: #333333 !important;
  width: 100% !important;
}

/* Orange focus ring */
.ap-form-card .elementor-field-group input:focus,
.ap-form-card .elementor-field-group textarea:focus {
  outline: 2px solid #DB661E !important;
  outline-offset: -2px;
}

/* Labels — semi-bold */
.ap-form-card .elementor-field-label,
.ap-form-card .elementor-form label,
.ap-form-card .elementor-field-group label {
  color: #1a1a1a !important;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* Submit button — orange pill, full width */
.ap-form-card .elementor-button[type="submit"] {
  background: #DB661E !important;
  color: #ffffff !important;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 50px !important;
  padding: 14px 40px;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.ap-form-card .elementor-button[type="submit"]:hover {
  background: #11E6B1 !important;
}

/* Custom checkbox — replaces browser default */
.ap-form-card .elementor-field-type-checkbox input[type="checkbox"],
.ap-form-card .elementor-field-type-acceptance input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 2px solid #cccccc !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  padding: 0 !important;
  transition: border-color 0.2s ease, background 0.2s ease;
  margin: 0;
  vertical-align: middle;
}

.ap-form-card .elementor-field-type-checkbox input[type="checkbox"]:checked,
.ap-form-card .elementor-field-type-acceptance input[type="checkbox"]:checked {
  background: #DB661E !important;
  border-color: #DB661E !important;
}

/* Checkmark tick via pseudo-element */
.ap-form-card .elementor-field-type-checkbox input[type="checkbox"]:checked::after,
.ap-form-card .elementor-field-type-acceptance input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: 2px solid #ffffff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Checkbox + label aligned in a row */
.ap-form-card .elementor-field-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin-bottom: 8px;
}

.ap-form-card .elementor-field-option label {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #333333 !important;
  line-height: 1.4;
  cursor: pointer;
  margin: 0 !important;
}

/* Inline checkbox group */
.ap-form-card .elementor-subgroup-inline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 6px 24px;
}

/* HTML / privacy notice field */
.ap-form-card .elementor-field-type-html {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  color: #666666;
  line-height: 1.55;
  padding: 4px 0;
}

/*
 * .ap-form-disclaimer
 * Apply to the text widget below the form for small disclaimer copy.
 */
.ap-form-disclaimer p {
  font-family: Poppins, sans-serif;
  font-size: 11px;
  color: #888888;
  line-height: 1.5;
  margin: 8px 0 0;
}


/* ─────────────────────────────────────────────────────────────────────
 * 5. REFERRAL PARTNER SECTION  (#referral-partner)
 * ───────────────────────────────────────────────────────────────────── */

/* Two-column gap */
#referral-partner > .e-con-inner,
#referral-partner .e-con > .e-con-inner {
  gap: 60px;
}

/* Section heading */
#referral-partner .elementor-heading-title {
  font-family: Poppins, sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1.31;
}

/* Icon list — gap-based spacing keeps icons vertically centred */
#referral-partner .elementor-icon-list-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#referral-partner .elementor-icon-list-item {
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* Orange rounded-square icon badge */
#referral-partner .elementor-icon-list-icon {
  align-self: center !important;
  background: #DB661E !important;
  color: #ffffff !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

#referral-partner .elementor-icon-list-icon i,
#referral-partner .elementor-icon-list-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  font-size: 20px !important;
}

#referral-partner .elementor-icon-list-text {
  color: #ffffff;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.33;
}

/* CTA button — left-aligned */
#referral-partner .elementor-widget-button,
#referral-partner .elementor-widget-button .elementor-button-wrapper {
  text-align: left !important;
}

#referral-partner .e-button-base {
  margin-right: auto !important;
  margin-left: 0 !important;
}

#referral-partner .e-atomic-element {
  justify-content: flex-start !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 6. ICON BADGE LIST  (reusable)
 *
 * Apply "icon-badge-list" via Elementor › CSS Classes to any Icon List
 * widget to get orange rounded-square icon badges.
 *
 * TODO: migrate [data-id="d18144f"] and [data-id="9d4caa5"] to use
 * the "icon-badge-list" class instead of data-id selectors.
 * ───────────────────────────────────────────────────────────────────── */

.icon-badge-list .elementor-icon-list-icon,
[data-id="d18144f"] .elementor-icon-list-icon,
[data-id="9d4caa5"] .elementor-icon-list-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  width: 48px !important;
  height: 48px !important;
  background-color: #DB661E !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;       /* pure flex centering — no padding offset needed */
  box-sizing: border-box !important;
  line-height: 0 !important;
  margin-right: 4px !important;
}

/*
 * Force all SVGs to a consistent 24px square.
 * CSS width/height overrides the HTML width/height attributes on SVG
 * elements, so the different intrinsic sizes (29, 31, 32px) are neutralised.
 * margin: 0 — Elementor's widget-icon-list CSS adds margin-right: ~5.75px
 * to SVGs inside icon lists, which offsets them left within the flex container.
 */
.icon-badge-list .elementor-icon-list-icon svg,
.icon-badge-list .elementor-icon-list-icon i,
[data-id="d18144f"] .elementor-icon-list-icon svg,
[data-id="d18144f"] .elementor-icon-list-icon i,
[data-id="9d4caa5"] .elementor-icon-list-icon svg,
[data-id="9d4caa5"] .elementor-icon-list-icon i {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Vertically centre icon and label text on each list row */
.icon-badge-list .elementor-icon-list-item,
[data-id="d18144f"] .elementor-icon-list-item,
[data-id="9d4caa5"] .elementor-icon-list-item {
  align-items: center !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 7. WHY ACCELERATED PAYMENTS SECTION  (#why-ap)
 *
 * TODO: [data-id="5dc4784"] targets the "Learn More" button container.
 * Add a CSS class to this element to remove the data-id dependency.
 * ───────────────────────────────────────────────────────────────────── */

/* "Learn More" button — left-aligned within its container */
[data-id="5dc4784"] {
  align-items: flex-start !important;
  align-self: flex-start !important;
}

[data-id="5dc4784"] .e-button-base {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Video — fills column, squarish aspect ratio, rounded corners */
#why-ap .elementor-wrapper,
#why-ap .e-hosted-video {
  width: 100% !important;
  aspect-ratio: 558 / 434 !important;
  height: auto !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

#why-ap video.elementor-video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 20px !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 8. TESTIMONIALS CAROUSEL  (#testimonials-carousel)
 * ───────────────────────────────────────────────────────────────────── */

/* Clip peeking slides at section edge; horizontal inset creates peek corridor */
#testimonials-carousel {
  overflow: hidden !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
}

/* Allow Swiper to render partial slides outside its own bounds */
#testimonials-carousel .elementor-main-swiper.swiper {
  overflow: visible !important;
}

/* Dark gradient card */
#testimonials-carousel .elementor-testimonial {
  background: linear-gradient(180deg, #394555 0%, #383958 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Strip inner content box — prevents a double border */
#testimonials-carousel .elementor-testimonial__content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Slide background — transparent so the card gradient shows cleanly */
#testimonials-carousel .swiper-slide {
  background: transparent !important;
}

/* Quote text */
#testimonials-carousel .elementor-testimonial__text {
  color: #ffffff !important;
  font-family: Poppins, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}

/* Attribution name */
#testimonials-carousel .elementor-testimonial__name {
  color: #ffffff !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Attribution role / company — muted */
#testimonials-carousel .elementor-testimonial__title {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: Poppins, sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* Circular avatar */
#testimonials-carousel .elementor-testimonial__image img {
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
}

/* Navigation arrows — brand orange */
#testimonials-carousel .elementor-swiper-button {
  color: #DB661E !important;
}

#testimonials-carousel .elementor-swiper-button svg,
#testimonials-carousel .elementor-swiper-button i {
  fill: #DB661E !important;
  color: #DB661E !important;
}

/* Pagination dot — inactive */
#testimonials-carousel .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
}

/* Pagination dot — active (stretches into a pill) */
#testimonials-carousel .swiper-pagination-bullet-active {
  background: #DB661E !important;
  width: 24px !important;
  border-radius: 4px !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 9. PRICING / SOLUTIONS CARDS  (.pricing-card)
 *
 * Apply "pricing-card" to the outer grid container in Elementor.
 * Each direct .e-con child is treated as one card column.
 * Font Awesome 5 Free (solid) is used for the card icons via ::before.
 *
 * SCOPED to .elementor-page-7625 (Invoice Finance page) so the same
 * "pricing-card" class on the homepage remains unstyled by Elementor.
 * ───────────────────────────────────────────────────────────────────── */

/* Heading size helpers — global, used across pages */
.card-heading-sep  { font-size: 20px; }
.card-heading-text { font-size: 18px; }

/* ── Invoice Finance page only ─────────────────────────────────── */

/* Push the CTA button to the bottom of each card */
.elementor-page-7625 .pricing-card .e-div-block-base {
  margin-top: auto !important;
}

/* Glass card — all columns */
.elementor-page-7625 .pricing-card > .e-con {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  text-align: center !important;
  align-items: center !important;
}

/* Visual stacking order: icon → title → badge → divider → features → button */
.elementor-page-7625 .pricing-card > .e-con > .elementor-widget-heading   { order: 1; }
.elementor-page-7625 .pricing-card > .e-con > .white-text                 { order: 2; }
.elementor-page-7625 .pricing-card > .e-con > .e-divider-base             { order: 3; }
.elementor-page-7625 .pricing-card > .e-con > .elementor-widget-icon-list { order: 4; }
.elementor-page-7625 .pricing-card > .e-con > .e-con                      { order: 5; } /* button */

/* Heading widget becomes a flex column so ::before icon sits above the text */
.elementor-page-7625 .pricing-card > .e-con .elementor-widget-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Card 1 – Selective: check-circle  (FA5 Solid \f058) */
.elementor-page-7625 .pricing-card > .e-con:nth-child(1) .elementor-widget-heading::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f058';
  font-size: 40px;
  color: #DB661E;
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}

/* Card 2 – 6-month: orange pill bar (decorative CSS shape) */
.elementor-page-7625 .pricing-card > .e-con:nth-child(2) .elementor-widget-heading::before {
  content: '';
  display: block;
  width: 52px;
  height: 10px;
  background: #DB661E;
  border-radius: 6px;
  margin-bottom: 14px;
}

/* Card 3 – 12-month: file-invoice  (FA5 Solid \f570) */
.elementor-page-7625 .pricing-card > .e-con:nth-child(3) .elementor-widget-heading::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f570';
  font-size: 40px;
  color: #DB661E;
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}

/* Middle / featured card — slightly elevated and brighter */
.elementor-page-7625 .pricing-card > .e-con:nth-child(2) {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
  transform: scale(1.06) !important;
}

/* Tier badge pill — outlined white, sits below the title */
.elementor-page-7625 .pricing-card .white-text {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 50px !important;
  padding: 5px 22px !important;
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
  background: transparent !important;
  margin-bottom: 8px !important;
}

/* Feature list — no bullet icons, centred text */
.elementor-page-7625 .pricing-card .elementor-icon-list-icon {
  display: none !important;
}

.elementor-page-7625 .pricing-card .elementor-icon-list-items {
  text-align: center !important;
}

.elementor-page-7625 .pricing-card .elementor-icon-list-item {
  justify-content: center !important;
}

.elementor-page-7625 .pricing-card .elementor-icon-list-text {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* CTA button — orange pill */
.elementor-page-7625 .pricing-card .elementor-button,
.elementor-page-7625 .pricing-card .e-button-base {
  background: #DB661E !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: background 0.3s ease !important;
}

.elementor-page-7625 .pricing-card .elementor-button:hover,
.elementor-page-7625 .pricing-card .e-button-base:hover {
  background: #11E6B1 !important;
  color: #ffffff !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 10. TWAE TIMELINE WIDGET  (.twae-wrapper)
 *
 * The plugin uses CSS custom properties for ALL sizing via calc().
 * Direct pixel overrides (e.g. width: 22px !important) are ignored.
 * Override the variables instead — they propagate automatically.
 * ───────────────────────────────────────────────────────────────────── */

.twae-wrapper {
  --tw-line-width:    1px;
  --tw-line-bg:       #DB661E;
  --tw-line-bd-color: #DB661E;
  --tw-line-bd-width: 0;
  --tw-ibx-size:      26px;
  --tw-ibx-bd-width:  1px;
  --tw-ibx-bg:        #DB661E;
  --tw-ibx-color:     #ffffff;
}

/* Step label ("Step 1", "Step 2" …) */
.twae-label-big {
  color: #DB661E !important;
  font-family: Poppins, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 2px !important;
}

/* Step title */
.twae-title {
  color: #ffffff !important;
  font-family: Poppins, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

/* Step description */
.twae-description p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: Poppins, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Content box — transparent, no border or shadow */
.twae-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Arrow connector — hidden */
.twae-arrow {
  box-shadow: none !important;
  border-color: transparent !important;
  background: transparent !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 11. ORANGE DOT & ROW  (.orange-dot, .orange-dot-row)
 *
 * Apply "orange-dot" to a div (zero content) to create the indicator.
 * Apply "orange-dot-row" to the parent flex row container.
 * ───────────────────────────────────────────────────────────────────── */

/* Solid orange circle indicator */
.orange-dot {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  background-color: #DB661E !important;
  border-radius: 50% !important;
  display: block !important;
  align-self: flex-start !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Row containing dot + title — pin both elements to the top */
.orange-dot-row {
  align-items: flex-start !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 12. HOMEPAGE HERO FIXES
 *
 * Elementor applies padding-left: 10px to every .e-div-block-base.
 * The buttons row (#2860959) and each button wrapper (#16o87i7, #08l9q10)
 * are all e-div-block-base elements — they compound to 20px left of the
 * paragraph text. Zero them out to restore visual alignment.
 *
 * TODO: add CSS classes to these elements to remove data-id dependency.
 * ───────────────────────────────────────────────────────────────────── */

[data-id="2860959"],
[data-id="16o87i7"],
[data-id="08l9q10"] {
  padding-left: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * 13. BLOG — READ MORE BUTTON  (.elementor-post__read-more)
 * ───────────────────────────────────────────────────────────────────── */

/* Orange pill — normal state */
.elementor-post__read-more {
  color: #ffffff !important;
  background-color: #DB661E;
  padding: 15px 35px;
  border-radius: 40px;
  transition: background-color 400ms ease, color 400ms ease;
}

/* Teal hover */
.elementor-post__read-more:hover {
  color: #ffffff !important;
  background-color: #11E6B1;
}


/* ─────────────────────────────────────────────────────────────────────
 * 14. BLOG / ARCHIVE PAGE  (.elementor-location-archive)
 * ───────────────────────────────────────────────────────────────────── */

/* Page background — light blue-grey */
.elementor-location-archive {
  background: #EBF0F8;
}

/* Hero section matches page background */
.elementor-location-archive [data-id="6a7b1a2"] {
  background: #EBF0F8 !important;
}

/* "Blogs & News" heading — dark navy */
.elementor-location-archive [data-id="696286a"] {
  color: #0D1E2C !important;
}

/* ── Featured hero post card ──────────────────────────────────── */

/* White card, side-by-side image + text layout */
.elementor-location-archive [data-id="957f123"] .elementor-post {
  background: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  min-height: 340px !important;
}

/* Text side — left 55% */
.elementor-location-archive [data-id="957f123"] .elementor-post__text {
  flex: 1 1 55% !important;
  padding: 40px 40px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Image link wrapper — right 45% */
.elementor-location-archive [data-id="957f123"] .elementor-post__thumbnail__link {
  flex: 0 0 45% !important;
  display: block !important;
}

/* Image — fills its column */
.elementor-location-archive [data-id="957f123"] .elementor-post__thumbnail {
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  border-radius: 0 16px 16px 0 !important;
  overflow: hidden !important;
}

.elementor-location-archive [data-id="957f123"] .elementor-post__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* Title */
.elementor-location-archive [data-id="957f123"] .elementor-post__title,
.elementor-location-archive [data-id="957f123"] .elementor-post__title a {
  color: #0D1E2C !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Excerpt */
.elementor-location-archive [data-id="957f123"] .elementor-post__excerpt,
.elementor-location-archive [data-id="957f123"] .elementor-post__excerpt p {
  color: #6b7a8d !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 10px !important;
}

/* Read More — orange pill */
.elementor-location-archive [data-id="957f123"] .elementor-post__read-more {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 20px !important;
  padding: 10px 28px !important;
  background: #DB661E !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  text-decoration: none !important;
  align-self: flex-start !important;
  transition: background 0.2s ease !important;
}

.elementor-location-archive [data-id="957f123"] .elementor-post__read-more:hover {
  background: #c05518 !important;
}

/* ── Category filter stripe ─────────────────────────────────────── */

/* Dark bar */
.elementor-location-archive [data-id="7849327"] {
  background: #1B2D3E !important;
  padding: 0 !important;
}

.elementor-location-archive .elementor-widget-taxonomy-filter {
  width: 100%;
}

/* Pill filter list */
.elementor-location-archive .e-filter {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 32px;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
  width: 100%;
}

/* Individual filter pill */
.elementor-location-archive .e-filter-item {
  display: inline-flex !important;
  align-items: center;
  padding: 7px 22px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 50px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
  background: transparent !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Filter pill — hover & active */
.elementor-location-archive .e-filter-item:hover,
.elementor-location-archive .e-filter-item.e-active,
.elementor-location-archive .e-filter-item[aria-pressed="true"] {
  background: #DB661E !important;
  border-color: #DB661E !important;
  color: #ffffff !important;
}

/* ── Post grid section ──────────────────────────────────────────── */

/* Light bg + consistent padding */
.elementor-location-archive [data-id="743377d"] {
  background: #EBF0F8 !important;
  padding-top: 48px !important;
  padding-bottom: 64px !important;
}

/* Individual blog card */
.elementor-location-archive [data-id="8bc5112"] {
  background: #ffffff !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.elementor-location-archive [data-id="8bc5112"]:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14) !important;
  transform: translateY(-3px) !important;
}

/* Full-height flex column so content can push the divider to the bottom */
.elementor-location-archive [data-id="8bc5112"] > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
}

/* Push divider (and everything below it) to the card bottom */
.elementor-location-archive [data-id="8bc5112"] [data-id="a3e6ed5"] {
  margin-top: auto !important;
}

/* Card thumbnail — fixed height, cover crop */
.elementor-location-archive [data-id="8bc5112"] [data-id="bc1e218"] img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* Position context for the category badge overlay */
.elementor-location-archive [data-id="8bc5112"] [data-id="bc1e218"] {
  position: relative !important;
}

/* ── Card typography ─────────────────────────────────────────────── */

/* Title */
.elementor-location-archive [data-id="8bc5112"] [data-id="58c6cc7"] *,
.elementor-location-archive [data-id="8bc5112"] [data-id="58c6cc7"] a {
  color: #0D1E2C !important;
}

/* Excerpt */
.elementor-location-archive [data-id="8bc5112"] [data-id="e4a7493"] * {
  color: #6b7a8d !important;
}

/* Date */
.elementor-location-archive [data-id="8bc5112"] [data-id="c3c77c6"] * {
  color: #9aa5b4 !important;
}

/* Side padding on text sections */
.elementor-location-archive [data-id="8bc5112"] [data-id="58c6cc7"],
.elementor-location-archive [data-id="8bc5112"] [data-id="e4a7493"],
.elementor-location-archive [data-id="8bc5112"] [data-id="9240919"] {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.elementor-location-archive [data-id="8bc5112"] [data-id="58c6cc7"] {
  padding-top: 20px !important;
}

.elementor-location-archive [data-id="8bc5112"] [data-id="9240919"] {
  padding-bottom: 20px !important;
}

/* HR divider — subtle on white */
.elementor-location-archive [data-id="a3e6ed5"] {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  margin: 0 20px !important;
}

/* ── JS-injected badges ─────────────────────────────────────────── */

/* Category badge overlaid on the card thumbnail (injected by blog-filter.js) */
.ap-cat-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #DB661E;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 4px 14px;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  z-index: 3;
  pointer-events: none;
}

/* FEATURED badge above hero card title (injected by blog-filter.js) */
.ap-featured-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  background: #DB661E;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  margin-bottom: 14px;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────────
 * 15. ABOUT US — STAFF FILTER & CARDS
 * ───────────────────────────────────────────────────────────────────── */

/* ── Taxonomy filter ──────────────────────────────────────────────── */

.ap-staff-filter-section .e-filter {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 8px 24px;
}

/*
 * widget-loop-filter.min.css loads after this file and overrides
 * border-radius / padding via its own CSS vars — set the vars too.
 */
.ap-staff-filter-section .e-filter-item {
  --e-filter-item-border-radius: 50px;
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 50px !important;
  padding: 10px 26px !important;
  cursor: pointer;
  font-size: 15px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-family: 'Poppins', sans-serif !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center !important;
}

.ap-staff-filter-section .e-filter-item:hover,
.ap-staff-filter-section .e-filter-item[aria-pressed="true"],
.ap-staff-filter-section .e-filter-item.e-filter-item-active {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ── Staff portrait cards ─────────────────────────────────────────── */

/* Consistent 3:4 portrait ratio */
.elementor-element-ap2_img .elementor-widget-container {
  overflow: hidden;
  border-radius: 8px;
  line-height: 0;
}

.elementor-element-ap2_img img {
  width: 100% !important;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 8px;
}

/* Zero wrapper gap so the negative-margin overlap is exact */
.elementor-element-ap2_wrap {
  gap: 0 !important;
}

/* Info bar overlaps the portrait by 52px */
.elementor-element-ap2_info {
  margin-top: -52px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Truncate name to one line */
.elementor-element-ap2_name .elementor-heading-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Truncate role to one line */
.elementor-element-ap2_role p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────
 * 16. INVOICE FINANCE PAGE  (.elementor-page-7625)
 *
 * This page was imported from Figma and required extensive structural
 * fixes to convert from absolute canvas-positioning to normal document
 * flow. Each block is commented with the root cause.
 * ───────────────────────────────────────────────────────────────────── */

/* Hide WP page title (shown by Hello Elementor theme by default) */
.elementor-page-7625 .entry-title,
.elementor-page-7625 .page-title {
  display: none !important;
}

/* Hide old placeholder sections left over from Figma import */
.elementor-page-7625 .elementor-element-3f006e93,
.elementor-page-7625 .elementor-element-43e17d0,
.elementor-page-7625 .elementor-element-1f066b6f,
.elementor-page-7625 .elementor-element-21a8976c {
  display: none !important;
}

/* ── Hero section ─────────────────────────────────────────────────── */

/* Main Figma overlay — convert from absolute to normal flow */
.elementor-page-7625 .elementor-element-2847446a {
  position: relative !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Child containers with oversized Figma min-heights */
.elementor-page-7625 .elementor-element-656cc78,
.elementor-page-7625 .elementor-element-20de6c7e {
  min-height: 0 !important;
  height: auto !important;
}

/* Sibling absolute section — convert to flow */
.elementor-page-7625 .elementor-element-bcb415e {
  position: relative !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Steps timeline was an absolutely-positioned overlay — hidden because
   its content already exists inside the main flow container */
.elementor-page-7625 .elementor-element-69ae359c {
  display: none !important;
}

/* Hero section — column layout, remove Figma overflow clip */
.elementor-page-7625 .elementor-element-400edac3 {
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: visible !important;
  position: relative !important;
  padding-bottom: 0 !important;
}

/* Duplicate nav + empty helper columns inside hero */
.elementor-page-7625 .elementor-element-479e93c7,
.elementor-page-7625 .elementor-element-31b1bff4 {
  display: none !important;
}

/* display:contents "Apply Now" wrapper + its floating button */
.elementor-page-7625 .elementor-element-22c0981f,
.elementor-page-7625 .elementor-element-22c0981f *,
.elementor-page-7625 .e-011631a6-fdb6689 {
  display: none !important;
}

/* Hero content column — full width with generous padding */
.elementor-page-7625 .elementor-element-76afb0d3 {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  align-items: flex-start !important;
  padding: 80px 80px 120px !important;
  flex: 1 !important;
}

/* Hero heading container — cap width, reset Figma margins */
.elementor-page-7625 .elementor-element-10fb411f {
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Stats bar — pinned to the bottom of the hero section */
.elementor-page-7625 .elementor-element-553242ed {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Figma padding overrides ──────────────────────────────────────── */
/* The Figma import baked in large pixel padding from canvas positioning.
   These rules reset to sensible section spacing. */

/* "Who We Help" — was 353px top / 105px bottom */
.elementor-page-7625 .elementor-element-2313d7cc {
  padding-top: 80px !important;
  padding-bottom: 60px !important;
}

/* "Case Studies" — was 260px top / 109px bottom */
.elementor-page-7625 .elementor-element-7f050a17 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Pricing section — 257px bottom caused a large gap below the cards */
.elementor-page-7625 .elementor-element-fdf27c7 {
  padding-bottom: 80px !important;
}

/* Duplicate navigation widgets injected by Figma import */
.elementor-page-7625 .elementor-element-6865d63e,
.elementor-page-7625 .elementor-element-75c10013 {
  display: none !important;
}

/* ── Awards section ───────────────────────────────────────────────── */

/* Empty Figma placeholder image widget inside awards section */
.elementor-page-7625 [data-id="10b87268"],
.elementor-page-7625 .e-89fe0dd1-6a78f30 {
  display: none !important;
}

/* Stack + centre now that the placeholder column is gone */
.elementor-page-7625 .elementor-element-74581b2f {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding-bottom: 60px !important;
}

/* Named child elements — constrain width and force white text */
.elementor-page-7625 .elementor-element-74581b2f .elementor-element-46fd8cb4,
.elementor-page-7625 .elementor-element-74581b2f .elementor-element-314c2cb2,
.elementor-page-7625 .elementor-element-74581b2f .elementor-element-3af98baa {
  color: #ffffff !important;
  width: 100% !important;
  max-width: 800px !important;
}

/* All descendants — heading/body inherits dark colour by default */
.elementor-page-7625 .elementor-element-74581b2f * {
  color: #ffffff !important;
}

/* Fix Figma-baked margin-right: 387px that pushed container 179px off-screen */
.elementor-page-7625 .elementor-element-283acf1f {
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Award logos outer row — full width, centred */
.elementor-page-7625 .elementor-element-5bfc6e96 {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  gap: 40px !important;
}

/* Inner container (holds two of the three logos) — shrink-to-content */
.elementor-page-7625 .elementor-element-70298783 {
  width: auto !important;
  gap: 40px !important;
}

/* Consistent logo height */
.elementor-page-7625 .elementor-element-74581b2f img {
  max-height: 80px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ── Additional layout fixes ──────────────────────────────────────── */

/* 441px empty Figma placeholder causing blank gap between sections */
.elementor-page-7625 .elementor-element-3fc5753 {
  display: none !important;
}

/* "Why Choose AP" — Figma hard-coded 779px height clips the feature cards */
.elementor-page-7625 .elementor-element-618c79bc,
.elementor-page-7625 .elementor-element-28e84cb0,
.elementor-page-7625 .elementor-element-2e6b3b54 {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* "Why Choose AP" inner container — reduce over-large Figma padding */
.elementor-page-7625 .elementor-element-ca62a6e {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  gap: 40px !important;
}

/* "Why Choose AP" heading — white text on dark gradient background */
.elementor-page-7625 [data-id="469b070d"],
.elementor-page-7625 [data-id="469b070d"] * {
  color: #ffffff !important;
}

/* Eligibility + Form section:
   Figma placed a static PNG of the footer design as a background image.
   Hide it so the real section background shows through. */
.elementor-page-7625 [data-id="13431752"],
.elementor-page-7625 [data-id="35a1fe35"] {
  display: none !important;
}

/* Eligibility column — allow content to expand past Figma fixed height */
.elementor-page-7625 .elementor-element-3305868e {
  overflow: visible !important;
  height: auto !important;
}

/* Section background — dark navy/teal gradient */
.elementor-page-7625 .elementor-element-bcb415e {
  background: linear-gradient(135deg, #0D1E2C 0%, #1a3a4a 100%) !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 600px !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Side-by-side flex row for eligibility text + form */
.elementor-page-7625 .elementor-element-bcb415e > .e-con-inner,
.elementor-page-7625 .elementor-element-bcb415e {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 40px !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}

/* Both columns — remove Figma absolute positioning, set to 48% width */
.elementor-page-7625 .elementor-element-3305868e,
.elementor-page-7625 .elementor-element-45c3615b {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 48% !important;
  min-height: 0 !important;
}

/* Eligibility text — white on dark background */
.elementor-page-7625 .elementor-element-3305868e *,
.elementor-page-7625 .elementor-element-43093f2f * {
  color: #ffffff !important;
}

/* Form card — white rounded card on the right */
.elementor-page-7625 .elementor-element-45c3615b {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px !important;
}

.elementor-page-7625 .elementor-element-45c3615b * {
  color: #0D1E2C !important;
}


/* =============================================================================
   AP Globe widget  (widget: ap_globe)
   ============================================================================= */

/*
 * Outer wrapper — position:relative so the label overlay aligns to it.
 * display:flex centres the square canvas inside the Elementor column.
 */
.ap-globe-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 * The canvas is always square (height = width via aspect-ratio).
 * max-width is driven by the "Globe Max Width" style control.
 */
.ap-globe-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 600px;
    border-radius: 50%;
}

/* Subtle pulsing glow around the globe */
@keyframes ap-globe-glow {
    0%,100% { box-shadow: 0 0 40px 8px rgba(0, 212, 170, 0.12); }
    50%      { box-shadow: 0 0 60px 16px rgba(0, 212, 170, 0.22); }
}
.ap-globe-canvas { animation: ap-globe-glow 3s ease-in-out infinite; }

/*
 * Label overlay — sits exactly over the canvas.
 * pointer-events:none so clicks pass through to the canvas for dragging.
 */
.ap-globe-labels {
    /* Size and position are set entirely by JS to exactly match the canvas */
    position: absolute;
    pointer-events: none;
    overflow: hidden;
}

/* Hover tooltip – single element, shown near the hovered marker */
.ap-globe-tooltip {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #00d4aa;
    background: rgba(6, 13, 31, 0.88);
    border: 1px solid rgba(0, 212, 170, 0.35);
    border-radius: 4px;
    padding: 4px 9px;
    white-space: nowrap;
    transform: translateY(-50%);   /* vertically centred on the dot */
    pointer-events: none;
    user-select: none;
    transition: opacity 0.12s ease;
    z-index: 10;
}

/* Editor placeholder shown in the Elementor panel preview */
.ap-globe-editor-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    color: #00d4aa;
    font-size: 1rem;
    text-align: center;
    opacity: 0.8;
}

/* =============================================================================
   AP NPS Bar widget  (widget: ap_npsbar)
   ============================================================================= */

/* Wrapper fills whatever column width Elementor gives it */
.ap-npsbar {
    width: 100%;
}

/* Label row: "Metric Name | Score/Max" */
.ap-npsbar__label {
    color: #ffffff;
    margin-bottom: 8px;
}

/* Empty track behind the fill */
.ap-npsbar__track {
    width: 100%;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    overflow: hidden; /* clips fill to rounded track shape */
}

/* Filled portion — width driven by inline style set in PHP render() */
.ap-npsbar__fill {
    height: 100%;
    background-color: #1abc9c;
    border-radius: 999px; /* rounds the exposed right-hand edge */
    transition: width 0.6s ease;
}


/* =============================================================================
   AP Logo Slider widget  (widget: ap_logoslider)
   =============================================================================
 *
 * Pure-CSS infinite ticker strip. The track contains two identical sets of
 * logos; translateX(-50%) shifts it by exactly one set width, creating a
 * seamless loop. Direction is toggled by swapping the keyframe animation name.
 *
 * Speed, height, gap and opacity are applied via inline styles set in render().
 * ============================================================================= */

/* Outer strip — overflow hidden clips the scrolling track */
.ap-logoslider {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

/* Optional left/right edge fade (decorative, always present) */
.ap-logoslider::before,
.ap-logoslider::after {
    content: '';
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.ap-logoslider::before { left:  0; background: linear-gradient(to right,  var(--ap-ls-bg, transparent), transparent); }
.ap-logoslider::after  { right: 0; background: linear-gradient(to left,   var(--ap-ls-bg, transparent), transparent); }

/* Scrolling track — two identical sets placed end-to-end */
.ap-logoslider__track {
    display: flex;
    align-items: center;
    width: max-content;        /* shrink-wraps all items on one line */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    will-change: transform;
}

/* Keyframes: left-to-right scroll → items move leftward */
@keyframes ap-ls-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Keyframes: right-to-left scroll → items move rightward */
@keyframes ap-ls-rtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Pause on hover when the pause class is present.
   Hover-capable devices only: on touch, tapping sets a sticky :hover that
   would pause the ticker until the user taps somewhere else.              */
@media (hover: hover) and (pointer: fine) {
    .ap-logoslider--pause:hover .ap-logoslider__track {
        animation-play-state: paused;
    }
}

/* Touch devices: the ticker must never stop, whatever sticky :hover or
   emulated mouse state the browser conjures up. pointer-events: none makes
   the strip completely inert — taps pass through (no links, no hover, no
   handlers) and simply scroll the page.                                   */
@media (hover: none), (pointer: coarse) {
    .ap-logoslider {
        pointer-events: none !important;
    }
    .ap-logoslider__track {
        animation-play-state: running !important;
    }
}

/* Individual logo cell */
.ap-logoslider__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The logo image */
.ap-logoslider__item img {
    display: block;
    width: auto;
    object-fit: contain;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Wrap anchor around image – keep flex alignment */
.ap-logoslider__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* On hover: always restore full opacity + remove grayscale */
.ap-logoslider__item:hover img {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
}

/* Elementor editor placeholder */
.ap-logoslider-placeholder {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px;
    opacity: 0.5;
    font-size: 0.8rem;
    color: #00d4aa;
}