.elementor-kit-6{--e-global-color-primary:#22367A;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   CFT AUTOMATE — Global Custom CSS v3
   cftautomate.com
   
   HOW TO USE CLASSES IN ELEMENTOR:
   → Buttons:    Widget → Advanced → CSS Classes
   → Sections:   Section → Advanced → CSS Classes
   → Containers: Container → Advanced → CSS Classes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Dynalight&display=swap');

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --cft-navy:        #22367A;
  --cft-navy-dark:   #1A2B62;
  --cft-navy-tint:   #EEF0FA;
  --cft-gold:        #F9C74F;
  --cft-gold-dark:   #F0B832;
  --cft-red:         #E63946;
  --cft-text:        #111111;
  --cft-gray:        #6B7280;
  --cft-white:       #FFFFFF;
  --cft-offwhite:    #F4F6FB;
  --cft-border:      #E5E7EB;
  --cft-shadow-card: 0 12px 32px rgba(34, 54, 122, 0.10);
  --cft-transition:  0.2s ease;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  font-family: 'Roboto', sans-serif;
  color: #111111;
}

a { color: #22367A; transition: color 0.2s ease; }
a:hover { color: #1A2B62; }

/* ============================================================
   BUTTONS
   Add CSS Class to the Button Widget → Advanced → CSS Classes
   cft-btn-primary | cft-btn-gold | cft-btn-outline | cft-btn-outline-light
   ============================================================ */

/* PRIMARY — Navy */
.cft-btn-primary .elementor-button,
.elementor-widget-button.cft-btn-primary .elementor-button {
  background-color: #22367A !important;
  color: #FFFFFF !important;
  border: 1px solid #22367A !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}
.cft-btn-primary .elementor-button:hover,
.elementor-widget-button.cft-btn-primary .elementor-button:hover {
  background-color: #1A2B62 !important;
  border-color: #1A2B62 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* GOLD — Marketplace */
.cft-btn-gold .elementor-button,
.elementor-widget-button.cft-btn-gold .elementor-button {
  background-color: #F9C74F !important;
  color: #111111 !important;
  border: 1px solid #F9C74F !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}
.cft-btn-gold .elementor-button:hover,
.elementor-widget-button.cft-btn-gold .elementor-button:hover {
  background-color: #F0B832 !important;
  border-color: #F0B832 !important;
  color: #111111 !important;
  transform: translateY(-1px);
}

/* OUTLINE */
.cft-btn-outline .elementor-button,
.elementor-widget-button.cft-btn-outline .elementor-button {
  background-color: transparent !important;
  color: #22367A !important;
  border: 1.5px solid #22367A !important;
  border-radius: 8px !important;
  padding: 13px 27px !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}
.cft-btn-outline .elementor-button:hover,
.elementor-widget-button.cft-btn-outline .elementor-button:hover {
  background-color: #EEF0FA !important;
  color: #22367A !important;
}

/* OUTLINE LIGHT — for navy/dark sections */
.cft-btn-outline-light .elementor-button,
.elementor-widget-button.cft-btn-outline-light .elementor-button {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
  border-radius: 8px !important;
  padding: 13px 27px !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}
.cft-btn-outline-light .elementor-button:hover,
.elementor-widget-button.cft-btn-outline-light .elementor-button:hover {
  background-color: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   SECTION BACKGROUNDS
   Add CSS Class to Section → Advanced → CSS Classes
   cft-bg-white | cft-bg-offwhite | cft-bg-navy | cft-bg-dark
   ============================================================ */
.cft-bg-white    { background-color: #FFFFFF !important; }
.cft-bg-offwhite { background-color: #F4F6FB !important; }
.cft-bg-navy     { background-color: #22367A !important; }
.cft-bg-dark     { background-color: #111111 !important; }

/* Auto-flip text to white on dark sections */
.cft-bg-navy .elementor-heading-title,
.cft-bg-navy h1, .cft-bg-navy h2, .cft-bg-navy h3,
.cft-bg-navy p,  .cft-bg-navy li {
  color: #FFFFFF;
}
.cft-bg-navy .cft-subtext {
  color: rgba(255, 255, 255, 0.75);
}
.cft-bg-dark .elementor-heading-title,
.cft-bg-dark h1, .cft-bg-dark h2, .cft-bg-dark h3,
.cft-bg-dark p {
  color: #FFFFFF;
}

/* ============================================================
   TRUST BAR
   Add CSS Class to Section → Advanced → CSS Classes: cft-trust-bar
   ============================================================ */
.cft-trust-bar {
  background-color: #22367A !important;
}
.cft-trust-bar .elementor-heading-title,
.cft-trust-bar p,
.cft-trust-bar span {
  color: #FFFFFF !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
}
.cft-trust-bar .cft-divider {
  opacity: 0.4;
  margin: 0 12px;
}

/* ============================================================
   STICKY NAV
   Add CSS Class to Header Section: cft-sticky-nav
   Paste JS block below into Elementor → Custom Code → Head
   ============================================================ */
.cft-sticky-nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #FFFFFF;
  transition: box-shadow 0.2s ease;
}
.cft-sticky-nav.scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* ============================================================
   TYPOGRAPHY HELPERS
   Apply via HTML widget or widget CSS Classes field
   ============================================================ */

/* Eyebrow — small uppercase label above headings */
.cft-eyebrow {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 10px;
  display: block;
}

/* Eyebrow on dark/navy backgrounds */
.cft-eyebrow-light {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 10px;
  display: block;
}

/* Gold stat number — Dynalight accent font */
.cft-stat {
  font-family: 'Dynalight', cursive;
  font-size: 56px;
  color: #F9C74F;
  line-height: 1;
  display: block;
}

/* Label beneath stat number */
.cft-stat-label {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
  display: block;
}
.cft-stat-label-dark {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #6B7280;
  margin-top: 6px;
  display: block;
}

/* Gold underline accent beneath section headings */
.cft-heading-accent {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.cft-heading-accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: #F9C74F;
  border-radius: 2px;
}
.cft-heading-accent-center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   AGENT CARDS
   Add CSS Class to widget container: cft-agent-card
   ============================================================ */
.cft-agent-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.cft-agent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(34, 54, 122, 0.10);
}

/* ============================================================
   SERVICE PILLAR CARDS
   Add CSS Class to widget container: cft-pillar-card
   ============================================================ */
.cft-pillar-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 28px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.cft-pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(34, 54, 122, 0.10);
  border-color: #EEF0FA;
}

/* ============================================================
   BADGES
   Use in HTML widget or add class to text elements
   ============================================================ */
.cft-badge {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.6;
}
.cft-badge-gold  { background: #FEF3C7; color: #92400E; }
.cft-badge-navy  { background: #EEF0FA; color: #22367A; }
.cft-badge-green { background: #F0FFF4; color: #276749; }
.cft-badge-red   { background: #FFF0F0; color: #991B1B; }
.cft-badge-gray  { background: #F3F4F6; color: #4B5563; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 767px) {
  .cft-hide-mobile   { display: none !important; }
  .cft-center-mobile { text-align: center !important; }
  .cft-full-mobile   { width: 100% !important; }
  .cft-stat          { font-size: 40px; }

  .cft-btn-primary .elementor-button,
  .cft-btn-gold .elementor-button,
  .cft-btn-outline .elementor-button,
  .elementor-widget-button.cft-btn-primary .elementor-button,
  .elementor-widget-button.cft-btn-gold .elementor-button,
  .elementor-widget-button.cft-btn-outline .elementor-button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================================
   STICKY NAV JS
   Copy the block below into:
   Elementor → Custom Code → Add New → Paste → Location: Head → Publish

   <script>
   window.addEventListener('scroll', function() {
     var n = document.querySelector('.cft-sticky-nav');
     if (n) n.classList.toggle('scrolled', window.scrollY > 10);
   });
   </script>
   ============================================================ *//* End custom CSS */