/* Custom overrides and layout fixes for CodexaLabs Framer Site */

/* cxa-footer-fix */
@media (min-width: 810px) {
  .framer-CiaEl .framer-12ib4n1 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    align-self: flex-start !important;
  }

  .framer-CiaEl .framer-1gzrj4t {
    flex: 2 1 0 !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .framer-CiaEl .framer-1p5xr0a {
    align-self: flex-start !important;
  }

  .framer-CiaEl .framer-o0vgl7 {
    place-content: flex-start !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
    gap: 48px !important;
  }
}

/* cxa-hide-404: Hide 404 nav item rendered by Framer React hydration */
.framer-1xhlp1f-container {
  display: none !important;
}

/* cxa-newsletter-toast */
#cxa-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 99999;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

#cxa-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#cxa-toast.error {
  background: #1e1e2e;
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

#cxa-toast.success {
  background: #1e1e2e;
  color: #6bcb77;
  border: 1px solid rgba(107, 203, 119, 0.3);
}

/* Fix header navigation bar centering & visibility on all pages */
.framer-hnpj9p-container,
#main .framer-hnpj9p-container,
div[data-framer-appear-id="hnpj9p"] {
  position: fixed !important;
  top: 16px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  transform: none !important;
  will-change: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.framer-hnpj9p-container > div,
.framer-hnpj9p-container nav,
.framer-hnpj9p-container .framer-qU7yj,
div[data-framer-appear-id="hnpj9p"] nav {
  pointer-events: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.framer-hnpj9p-container [aria-label="Logo"],
.framer-hnpj9p-container .framer-1u6kxwb-container,
.framer-hnpj9p-container .framer-1u6kxwb-container > div,
.framer-hnpj9p-container .framer-1u6kxwb-container img,
.framer-hnpj9p-container .framer-1fc0ch,
.framer-hnpj9p-container .framer-13q3m29,
.framer-hnpj9p-container .framer-g76ct8,
.framer-hnpj9p-container .framer-1kdcjah-container,
.framer-hnpj9p-container .framer-hy7aoi-container,
.framer-hnpj9p-container .framer-17ihvog,
.framer-hnpj9p-container .framer-17ihvog > div,
.framer-hnpj9p-container .framer-dOoYw,
.framer-hnpj9p-container .framer-RK2ZM,
.framer-hnpj9p-container .framer-z3l5ve,
.framer-hnpj9p-container .framer-3okyn5 {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Reveal all appear elements */
[data-framer-appear-id] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide Framer badge & template overlay */
#__framer-badge-container,
#__framer-badge,
[data-framer-badge],
#template-overlay {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Mobile responsive layout fixes */
@media (max-width: 809.98px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    position: relative !important;
  }

  *, *::before, *::after {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .framer-UKDkJ,
  .framer-grDVG,
  .framer-grDVG.framer-72rtr7,
  #main,
  #main > .framer-UKDkJ,
  #main > .framer-grDVG {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  section,
  section[id],
  .framer-ft5lbl,
  .framer-d4dxgm,
  .framer-1ioxybx,
  .framer-1ro6nss,
  .framer-14rz8oo,
  .framer-2om6cg,
  .framer-1vv2jqk,
  .framer-l3744d,
  .framer-1h5qqo,
  .framer-146fwfe,
  .framer-1haw2cq {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: min-content !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
  }

  /* =========================================================
     COMPACT & BALANCED SECTION SPACING ON MOBILE
     ========================================================= */

  /* Hero Section */
  .framer-ft5lbl,
  #hero {
    padding-top: 132px !important;
    padding-bottom: 12px !important;
  }

  /* Features Section */
  .framer-1ioxybx,
  #features {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
  }

  /* How It Works Section */
  .framer-1ro6nss,
  #how-it-works {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
    gap: 16px !important;
  }

  /* Connected Ecosystem / Integration Section */
  .framer-14rz8oo,
  #integration {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
    gap: 16px !important;
  }

  /* Fix Connected Applications dashed box & icon alignment on mobile */
  .framer-tpJI3 {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 230px !important;
    height: 70px !important;
    min-height: 70px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  .framer-tpJI3 .framer-16qromk {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70px !important;
    height: 70px !important;
    border: 1px dashed var(--token-ac4ad6cb-9810-4691-952f-87a30cbeca2c, rgb(117, 132, 214)) !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .framer-tpJI3 .framer-9o6g4c {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    right: auto !important;
    bottom: auto !important;
  }

  .framer-tpJI3 .framer-1cprebi {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .framer-tpJI3 .framer-1cprebi svg {
    width: 44px !important;
    height: 44px !important;
  }

  .framer-tpJI3 .framer-doy1pq,
  .framer-tpJI3 .framer-et3f95,
  .framer-tpJI3 .framer-409d3v,
  .framer-tpJI3 .framer-x5xljh,
  .framer-tpJI3 .framer-19syv2s,
  .framer-tpJI3 .framer-10q4438 {
    display: none !important;
  }

  /* Our Impact / Performance Section */
  .framer-2om6cg,
  #performance {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
    gap: 16px !important;
  }

  /* About Us Section */
  .framer-1vv2jqk,
  #about-us {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
    gap: 12px !important;
  }

  /* Hide unused empty stats/placeholder box in About Us section on mobile */
  .framer-nj366b {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
  }

  .framer-o0y75q {
    padding: 0 !important;
    gap: 14px !important;
  }

  .framer-1ju096y {
    padding: 0 !important;
    gap: 0 !important;
  }

  .framer-dcmvsy {
    gap: 14px !important;
    padding: 0 !important;
  }

  .framer-wpq0m1 {
    padding: 16px 0 0 0 !important;
    margin-top: 4px !important;
    gap: 14px !important;
    justify-content: space-between !important;
  }

  /* Main section wrapper gap on mobile */
  .framer-1kgdawh {
    gap: 32px !important;
  }

  /* Client Insights / Reviews Section */
  .framer-l3744d,
  #client-insights,
  #reviews {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
    gap: 14px !important;
  }

  /* FAQ Section */
  .framer-1h5qqo,
  #faq {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
    gap: 16px !important;
  }

  /* Bottom CTA Section */
  .framer-146fwfe {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }

  /* Callout banners at bottom of sections ("Expert guidance...") */
  .framer-9xkf4a,
  .framer-1mn3wxr,
  .framer-j2sxsq {
    padding: 14px 16px 8px 16px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 92vw !important;
  }

  /* Section badge headers (Pill tags like ✦ HOW IT WORKS ✦, ✦ CONNECTED ECOSYSTEM ✦, etc.) */
  .framer-1fx50zw,
  .framer-28eoaf,
  .framer-18ab5zo,
  .framer-139ovxx,
  .framer-160q64m,
  .framer-1sosvzp,
  .framer-5ajnn9 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Section title & subtitle wrappers */
  .framer-xn33h2,
  .framer-1uh1c4m,
  .framer-564wra,
  .framer-1kemi75,
  .framer-t5t9qg,
  .framer-1jun79r,
  .framer-2spccm {
    gap: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Animated text letters visible on mobile */
  span[style*="opacity:0.001"],
  span[style*="opacity: 0.001"] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero title and text sizing for mobile */
  .framer-yhjmj6 {
    width: 100% !important;
    max-width: 92vw !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .framer-yhjmj6 > div,
  .framer-1vzczd4,
  .framer-1cqha5m,
  .framer-1hl2wzn {
    white-space: normal !important;
    width: 100% !important;
    max-width: 92vw !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .framer-yhjmj6 h1,
  .framer-yhjmj6 .framer-styles-preset-59vcfa,
  .framer-ft5lbl h1,
  .framer-ft5lbl .framer-styles-preset-59vcfa,
  .framer-1jyvgsw h1,
  .framer-1jyvgsw .framer-styles-preset-59vcfa {
    font-size: 34px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
    max-width: 92vw !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .framer-11atoks-container,
  .framer-18f7db3-container,
  .framer-viwdyl-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .framer-r8Yh9 {
    width: min-content !important;
    max-width: 90vw !important;
    margin: 0 auto !important;
  }

  .framer-r8Yh9 .framer-12lbfwi {
    width: min-content !important;
    white-space: nowrap !important;
  }

  .framer-dOoYw.framer-1x5mn7m {
    width: min-content !important;
    white-space: nowrap !important;
  }

  .framer-1jyvgsw p,
  .framer-ft5lbl p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: 90vw !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  [data-framer-appear-id],
  .framer-11atoks-container,
  .framer-1vzczd4-container,
  .framer-1cqha5m-container,
  .framer-1hl2wzn-container,
  .framer-1wls7v5-container,
  .framer-18f7db3-container,
  .framer-viwdyl-container,
  .framer-9y2wuf-container,
  .framer-1pihy8e-container,
  .framer-1wru1k8-container,
  .framer-1wru1k8 {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =========================================================
   REVIEWS & TESTIMONIALS FIXES (Desktop vs Mobile)
   ========================================================= */

/* Desktop layout (min-width: 810px) */
@media (min-width: 810px) {
  /* Strictly hide the mobile review carousel on desktop */
  #cxa-reviews-carousel-wrapper {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Restore desktop 2-column testimonial list */
  .framer-1s84ji9 .framer-1t44h4o {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .framer-a7h8uv-container section,
  .framer-sdy5wo-container section,
  .framer-1t44h4o section {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .framer-mijpM.framer-c12azy {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Mobile & Tablet layout (max-width: 809.98px) */
@media (max-width: 809.98px) {
  /* Hide the 2-column desktop ticker on mobile */
  .framer-1s84ji9 .framer-1t44h4o,
  .framer-1t44h4o {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .framer-l3744d,
  .framer-1s84ji9,
  #client-insights,
  #reviews {
    height: auto !important;
    min-height: min-content !important;
    padding-bottom: 20px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
  }

  /* Make Main Testimonial video sleek and compact on mobile */
  .framer-1kaoyig-container,
  .framer-1kaoyig-container > div,
  .framer-I4Lrx,
  .framer-I4Lrx.framer-zn7h30,
  .framer-I4Lrx .framer-1q7nz4t-container {
    height: 220px !important;
    max-height: 220px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .framer-I4Lrx video {
    width: 100% !important;
    height: 220px !important;
    max-height: 220px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    display: block !important;
  }

  .framer-I4Lrx .framer-1h7ylqb {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    transform: none !important;
    padding: 0 !important;
    z-index: 2 !important;
    width: auto !important;
  }

  /* Hide any extra/duplicate buttons from Framer */
  .framer-1kaoyig-container button,
  .framer-1kaoyig-container div[role="button"],
  .framer-I4Lrx button,
  .framer-1s84ji9 > div:not(#cxa-reviews-carousel-wrapper) button,
  .framer-1s84ji9 .framer-UAQz8,
  .framer-1s84ji9 .framer-Vpfsv,
  .framer-1s84ji9 .framer-2k2sq9-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
  }

  /* Show the interactive review carousel on mobile */
  #cxa-reviews-carousel-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 92vw !important;
    margin: 12px auto 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }
}

/* Base Styles for Mobile Review Carousel */
.cxa-review-card-container {
  width: 100%;
  position: relative;
}

.cxa-review-card {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: 1px solid rgba(220, 225, 245, 0.85) !important;
  border-radius: 18px !important;
  padding: 18px 16px 16px 16px !important;
  box-shadow: 0 8px 24px -4px rgba(50, 65, 110, 0.12),
              0 2px 6px -1px rgba(50, 65, 110, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.cxa-review-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 24px !important;
}

.cxa-review-stars {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #f59e0b !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  flex-shrink: 0 !important;
}

.cxa-review-logo {
  height: auto !important;
  max-height: 18px !important;
  max-width: 80px !important;
  width: auto !important;
  object-fit: contain !important;
  object-position: right center !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  display: block !important;
}

.cxa-review-quote {
  font-family: "Manrope", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
  color: #2d3748;
  margin: 0;
  position: relative;
}

.cxa-review-quote::before {
  content: "“";
  font-size: 24px;
  font-family: Georgia, serif;
  color: #7584d6;
  line-height: 0;
  margin-right: 4px;
  vertical-align: -3px;
}

.cxa-review-quote::after {
  content: "”";
  font-size: 24px;
  font-family: Georgia, serif;
  color: #7584d6;
  line-height: 0;
  margin-left: 4px;
  vertical-align: -6px;
}

.cxa-review-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(223, 225, 245, 0.7);
  margin-top: auto;
}

.cxa-review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cxa-review-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cxa-review-author-name {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.cxa-review-author-role {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cxa-review-author-company {
  color: #4f46e5;
  font-weight: 600;
}

/* Nav Controls */
.cxa-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin: 4px 0 8px 0;
}

.cxa-carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4),
              inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  pointer-events: auto !important;
}

.cxa-carousel-btn:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5),
              inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.cxa-carousel-btn:active {
  transform: translateY(1px) scale(0.94);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

.cxa-carousel-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.cxa-carousel-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cxa-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
  border: none;
  padding: 0;
  cursor: pointer !important;
  transition: all 0.22s ease;
  pointer-events: auto !important;
}

.cxa-carousel-dot.is-active {
  background: #4338ca;
  width: 22px;
  border-radius: 10px;
}