.elementor-44 .elementor-element.elementor-element-8b05ed1{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-724b643{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-2ad694f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-406b3a8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-719cf3c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-5002df8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-8664c12{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-cda13be{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-96d68ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-821d228 */.elementor-44 .elementor-element.elementor-element-821d228 { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-821d228 *, .elementor-44 .elementor-element.elementor-element-821d228 *::before, .elementor-44 .elementor-element.elementor-element-821d228 *::after { box-sizing:border-box; } /* ========================================= HERO ========================================= */ #cb-ma-hero { width:100%; margin:0; padding:112px 6vw 96px; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), #141311; background-size:42px 42px; color:#fff; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } /* ========================================= WRAPPER ========================================= */ #cb-ma-hero .cb-ma-hero-wrap { width:100%; max-width:1280px; margin:0 auto; display:grid; grid-template-columns: minmax(0,1fr) minmax(480px,560px); gap:70px; align-items:center; } /* ========================================= HERO CONTENT ========================================= */ #cb-ma-hero .cb-ma-hero-content { max-width:690px; } /* LABEL */ #cb-ma-hero .cb-ma-hero-label { display:inline-flex; align-items:center; margin-bottom:19px; font-size:10px; font-weight:800; letter-spacing:.19em; color:#fca608; } #cb-ma-hero .cb-ma-hero-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#fca608; } /* HEADING */ #cb-ma-hero h1 { margin:0 0 22px; font-size:clamp(43px,5.1vw,70px); line-height:1; letter-spacing:-.05em; font-weight:500; } #cb-ma-hero h1 strong { font-weight:850; } /* DESCRIPTION */ #cb-ma-hero .cb-ma-hero-content > p { max-width:650px; margin:0; font-size:17px; line-height:1.75; color:#aaa49b; } /* ========================================= BUTTONS ========================================= */ #cb-ma-hero .cb-ma-hero-buttons { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:32px; } #cb-ma-hero .cb-ma-hero-buttons a { min-height:48px; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:8px; text-decoration:none; font-size:11px; font-weight:800; transition: transform .25s ease, background .25s ease, border-color .25s ease; } /* PRIMARY */ #cb-ma-hero .cb-ma-primary { background:#fca608; color:#141311; border:1px solid #fca608; } #cb-ma-hero .cb-ma-primary:hover { transform:translateY(-3px); background:#ffb52a; } /* SECONDARY */ #cb-ma-hero .cb-ma-secondary { color:#fff; border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.025); } #cb-ma-hero .cb-ma-secondary:hover { transform:translateY(-3px); border-color:#fca608; background:rgba(252,166,8,.04); } /* ========================================= TRUST ITEMS ========================================= */ #cb-ma-hero .cb-ma-trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:34px; } #cb-ma-hero .cb-ma-trust span { font-size:8px; font-weight:800; letter-spacing:.14em; color:#716c65; } /* ========================================= HERO VISUAL ========================================= */ #cb-ma-hero .cb-ma-hero-visual { position:relative; width:100%; min-height:455px; display:flex; align-items:center; justify-content:center; } /* ========================================= BROWSER ========================================= */ #cb-ma-hero .cb-ma-browser { position:relative; z-index:2; width:100%; border:1px solid rgba(255,255,255,.11); border-radius:18px; background:#1b1917; box-shadow: 0 30px 70px rgba(0,0,0,.34); overflow:hidden; animation: cbMaBrowserFloat 6s ease-in-out infinite; } /* ========================================= BROWSER TOP ========================================= */ #cb-ma-hero .cb-ma-browser-top { height:44px; display:flex; align-items:center; gap:13px; padding:0 17px; border-bottom: 1px solid rgba(255,255,255,.08); } /* BROWSER DOTS */ #cb-ma-hero .cb-ma-browser-dots { display:flex; gap:5px; } #cb-ma-hero .cb-ma-browser-dots i { width:5px; height:5px; border-radius:50%; background:#555049; } /* BROWSER TITLE */ #cb-ma-hero .cb-ma-browser-top span { flex:1; font-size:8px; font-weight:800; letter-spacing:.12em; color:#77716a; } /* LIVE */ #cb-ma-hero .cb-ma-browser-top b { font-size:8px; font-weight:800; letter-spacing:.1em; color:#fca608; } /* ========================================= DASHBOARD HEADER ========================================= */ #cb-ma-hero .cb-ma-dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:27px 26px 23px; } #cb-ma-hero .cb-ma-dashboard-head small { display:block; margin-bottom:6px; font-size:8px; font-weight:800; letter-spacing:.13em; color:#77716a; } #cb-ma-hero .cb-ma-dashboard-head h3 { margin:0; font-size:20px; font-weight:750; letter-spacing:-.025em; } /* ACTIVE */ #cb-ma-hero .cb-ma-dashboard-head > span { padding:6px 9px; border:1px solid rgba(252,166,8,.25); border-radius:5px; font-size:7px; font-weight:800; letter-spacing:.1em; color:#fca608; } /* ========================================= CUSTOMER FLOW ========================================= */ #cb-ma-hero .cb-ma-flow { display:grid; grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr; align-items:center; gap:8px; padding: 0 24px 25px; } /* FLOW NODE */ #cb-ma-hero .cb-ma-flow-node { min-height:116px; padding:16px; border: 1px solid rgba(255,255,255,.08); border-radius:11px; background: rgba(255,255,255,.025); transition: transform .3s ease, border-color .3s ease, background .3s ease; } #cb-ma-hero .cb-ma-flow-node:hover { transform:translateY(-4px); border-color: rgba(252,166,8,.34); background: rgba(252,166,8,.055); } /* NUMBER */ #cb-ma-hero .cb-ma-flow-node span { display:block; margin-bottom:15px; font-size:8px; font-weight:800; color:#fca608; } /* TITLE */ #cb-ma-hero .cb-ma-flow-node strong { display:block; margin-bottom:7px; font-size:12px; line-height:1.3; } /* DESCRIPTION */ #cb-ma-hero .cb-ma-flow-node small { display:block; font-size:9px; line-height:1.5; color:#77716a; } /* ========================================= FLOW CONNECTOR ========================================= */ #cb-ma-hero .cb-ma-flow-line { height:1px; position:relative; background: rgba(252,166,8,.18); } #cb-ma-hero .cb-ma-flow-line::after { content:""; position:absolute; top:50%; left:0; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:#fca608; box-shadow: 0 0 10px rgba(252,166,8,.8); animation: cbMaFlowSignal 2.4s linear infinite; } /* ========================================= DASHBOARD METRICS ========================================= */ #cb-ma-hero .cb-ma-dashboard-bottom { display:grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.08); } #cb-ma-hero .cb-ma-dashboard-bottom > div { padding:19px 21px; border-right: 1px solid rgba(255,255,255,.08); } #cb-ma-hero .cb-ma-dashboard-bottom > div:last-child { border-right:0; } /* METRIC LABEL */ #cb-ma-hero .cb-ma-dashboard-bottom small { display:block; margin-bottom:7px; font-size:7px; font-weight:800; letter-spacing:.12em; color:#706b64; } /* METRIC VALUE */ #cb-ma-hero .cb-ma-dashboard-bottom strong { font-size:19px; font-weight:750; color:#fff; } /* ========================================= CLEAN FLOATING AUTOMATION SIGNAL ========================================= */ #cb-ma-hero .cb-ma-floating-card { position:absolute; z-index:4; right:-20px; bottom:20px; width:58px; height:58px; padding:0; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(252,166,8,.45); border-radius:16px; background:#fca608; box-shadow: 0 14px 35px rgba(0,0,0,.28), 0 0 0 7px rgba(252,166,8,.07); animation: cbMaSignalFloat 4s ease-in-out infinite; } /* REMOVE OLD TEXT */ #cb-ma-hero .cb-ma-floating-card > span, #cb-ma-hero .cb-ma-floating-card > strong, #cb-ma-hero .cb-ma-floating-card > small, #cb-ma-hero .cb-ma-floating-status { display:none !important; } /* SIGNAL CORE */ #cb-ma-hero .cb-ma-signal-core { width:13px; height:13px; border-radius:50%; background:#141311; box-shadow: 0 0 0 7px rgba(20,19,17,.08), 0 0 18px rgba(20,19,17,.35); animation: cbMaSignalPulse 2s ease-in-out infinite; } /* OUTER PULSE */ #cb-ma-hero .cb-ma-floating-card::after { content:""; position:absolute; inset:0; border-radius:16px; border: 1px solid rgba(20,19,17,.14); animation: cbMaSignalBorder 2.8s ease-in-out infinite; } /* ========================================= ANIMATIONS ========================================= */ @keyframes cbMaBrowserFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } } @keyframes cbMaSignalFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } } @keyframes cbMaSignalPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.72); opacity:.65; } } @keyframes cbMaSignalBorder { 0%,100% { opacity:.35; } 50% { opacity:.8; } } @keyframes cbMaFlowSignal { 0% { left:0; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { left:calc(100% - 5px); opacity:0; } } /* ========================================= TABLET ========================================= */ @media (max-width:1100px) { #cb-ma-hero { padding:90px 5vw 80px; } #cb-ma-hero .cb-ma-hero-wrap { grid-template-columns: minmax(0,1fr) minmax(420px,500px); gap:45px; } #cb-ma-hero .cb-ma-hero-visual { min-height:410px; } #cb-ma-hero .cb-ma-flow { grid-template-columns: 1fr 15px 1fr 15px 1fr 15px 1fr; gap:5px; padding-left:17px; padding-right:17px; } #cb-ma-hero .cb-ma-flow-node { padding:13px; } #cb-ma-hero .cb-ma-floating-card { right:-10px; } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-hero { padding:72px 20px 65px; background-size:34px 34px; } #cb-ma-hero .cb-ma-hero-wrap { display:flex; flex-direction:column; gap:48px; } #cb-ma-hero h1 { font-size: clamp(39px,11vw,51px); line-height:1.03; } #cb-ma-hero .cb-ma-hero-content > p { font-size:15px; line-height:1.7; } #cb-ma-hero .cb-ma-hero-buttons { flex-direction:column; align-items:stretch; } #cb-ma-hero .cb-ma-hero-buttons a { width:100%; } #cb-ma-hero .cb-ma-trust { gap:9px 15px; } #cb-ma-hero .cb-ma-hero-visual { min-height:0; width:100%; } #cb-ma-hero .cb-ma-browser { width:100%; animation:none; } /* DASHBOARD HEADER */ #cb-ma-hero .cb-ma-dashboard-head { padding: 22px 18px 19px; } /* MOBILE FLOW */ #cb-ma-hero .cb-ma-flow { display:flex; flex-direction:column; align-items:stretch; gap:0; padding: 0 17px 20px; } #cb-ma-hero .cb-ma-flow-node { min-height:auto; padding:15px; } /* VERTICAL CONNECTOR */ #cb-ma-hero .cb-ma-flow-line { width:1px; height:16px; margin-left:23px; } #cb-ma-hero .cb-ma-flow-line::after { top:0; left:50%; margin-top:0; margin-left:-2px; animation: cbMaVerticalSignal 2s linear infinite; } /* MOBILE METRICS */ #cb-ma-hero .cb-ma-dashboard-bottom { grid-template-columns:1fr; } #cb-ma-hero .cb-ma-dashboard-bottom > div { display:flex; align-items:center; justify-content:space-between; padding: 13px 17px; border-right:0; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-hero .cb-ma-dashboard-bottom > div:last-child { border-bottom:0; } #cb-ma-hero .cb-ma-dashboard-bottom small { margin:0; } /* FLOATING SIGNAL */ #cb-ma-hero .cb-ma-floating-card { position:absolute; right:12px; bottom:14px; width:48px; height:48px; margin:0; border-radius:14px; animation: cbMaSignalFloat 4s ease-in-out infinite; } #cb-ma-hero .cb-ma-signal-core { width:10px; height:10px; box-shadow: 0 0 0 6px rgba(20,19,17,.08), 0 0 14px rgba(20,19,17,.3); } #cb-ma-hero .cb-ma-floating-card::after { border-radius:14px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-hero { padding-left:16px; padding-right:16px; } #cb-ma-hero .cb-ma-browser-top { padding:0 13px; } #cb-ma-hero .cb-ma-browser-top span { font-size:7px; } #cb-ma-hero .cb-ma-dashboard-head h3 { font-size:17px; } #cb-ma-hero .cb-ma-floating-card { width:44px; height:44px; right:10px; bottom:10px; border-radius:12px; } #cb-ma-hero .cb-ma-signal-core { width:9px; height:9px; } #cb-ma-hero .cb-ma-floating-card::after { border-radius:12px; } } /* ========================================= REDUCED MOTION ========================================= */ @media (prefers-reduced-motion:reduce) { #cb-ma-hero .cb-ma-browser, #cb-ma-hero .cb-ma-floating-card, #cb-ma-hero .cb-ma-flow-line::after, #cb-ma-hero .cb-ma-signal-core, #cb-ma-hero .cb-ma-floating-card::after { animation:none !important; } #cb-ma-hero .cb-ma-hero-buttons a, #cb-ma-hero .cb-ma-flow-node { transition:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c7e29ef */.elementor-44 .elementor-element.elementor-element-c7e29ef { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-c7e29ef *, .elementor-44 .elementor-element.elementor-element-c7e29ef *::before, .elementor-44 .elementor-element.elementor-element-c7e29ef *::after { box-sizing:border-box; } /* ========================================= SECTION ========================================= */ #cb-ma-capabilities { width:100%; margin:0; padding:105px 6vw 88px; background: linear-gradient(rgba(20,19,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20,19,17,.035) 1px, transparent 1px), #f7f7f5; background-size:42px 42px; color:#141311; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } /* ========================================= WRAPPER ========================================= */ #cb-ma-capabilities .cb-ma-capabilities-wrap { width:100%; max-width:1280px; margin:0 auto; } /* ========================================= HEADER ========================================= */ #cb-ma-capabilities .cb-ma-capabilities-head { max-width:790px; margin-bottom:52px; } #cb-ma-capabilities .cb-ma-capabilities-label { display:inline-flex; align-items:center; margin-bottom:18px; font-size:10px; font-weight:800; letter-spacing:.18em; color:#d88a00; } #cb-ma-capabilities .cb-ma-capabilities-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#fca608; } #cb-ma-capabilities h2 { margin:0 0 19px; font-size:clamp(38px,4.6vw,62px); line-height:1.03; letter-spacing:-.045em; font-weight:500; } #cb-ma-capabilities h2 strong { font-weight:850; } #cb-ma-capabilities .cb-ma-capabilities-head > p { max-width:700px; margin:0; font-size:16px; line-height:1.75; color:#6d6861; } /* ========================================= CARD GRID ========================================= */ #cb-ma-capabilities .cb-ma-capabilities-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px; } /* ========================================= CARD ========================================= */ #cb-ma-capabilities .cb-ma-cap-card { position:relative; min-height:265px; padding:25px; display:flex; flex-direction:column; justify-content:space-between; border: 1px solid rgba(20,19,17,.08); border-radius:17px; background:#fff; color:#141311; text-decoration:none; overflow:hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; } #cb-ma-capabilities .cb-ma-cap-card:hover { transform:translateY(-6px); border-color: rgba(252,166,8,.38); box-shadow: 0 20px 45px rgba(20,19,17,.08); } /* ========================================= FEATURED CARD ========================================= */ #cb-ma-capabilities .cb-ma-cap-card.cb-ma-featured { background:#141311; color:#fff; border-color:#141311; } #cb-ma-capabilities .cb-ma-featured:hover { border-color:#fca608; box-shadow: 0 22px 48px rgba(20,19,17,.18); } /* ========================================= NUMBER ========================================= */ #cb-ma-capabilities .cb-ma-card-number { font-size:10px; font-weight:800; letter-spacing:.12em; color:#b4aea5; } #cb-ma-capabilities .cb-ma-featured .cb-ma-card-number { color:#fca608; } /* ========================================= CARD CONTENT ========================================= */ #cb-ma-capabilities .cb-ma-card-content { max-width:390px; } #cb-ma-capabilities .cb-ma-card-content > span { display:block; margin-bottom:11px; font-size:8px; font-weight:800; letter-spacing:.14em; color:#a19b92; } #cb-ma-capabilities .cb-ma-featured .cb-ma-card-content > span { color:#fca608; } #cb-ma-capabilities .cb-ma-card-content h3 { margin:0 0 10px; font-size:21px; line-height:1.15; letter-spacing:-.025em; font-weight:750; } #cb-ma-capabilities .cb-ma-card-content p { margin:0; font-size:12px; line-height:1.7; color:#77716a; } #cb-ma-capabilities .cb-ma-featured .cb-ma-card-content p { color:#aaa49b; } /* ========================================= CARD ARROW ========================================= */ #cb-ma-capabilities .cb-ma-card-arrow { position:absolute; right:22px; bottom:20px; width:31px; height:31px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(20,19,17,.12); border-radius:7px; font-size:13px; color:#141311; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } #cb-ma-capabilities .cb-ma-cap-card:hover .cb-ma-card-arrow { transform:translate(2px,-2px); background:#fca608; border-color:#fca608; color:#141311; } #cb-ma-capabilities .cb-ma-featured .cb-ma-card-arrow { border-color:rgba(255,255,255,.16); color:#fff; } /* ========================================= BOTTOM STRIP ========================================= */ #cb-ma-capabilities .cb-ma-capabilities-bottom { display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; margin-top:45px; padding-top:25px; border-top: 1px solid rgba(20,19,17,.10); } #cb-ma-capabilities .cb-ma-cap-bottom-text { display:flex; flex-direction:column; gap:7px; } #cb-ma-capabilities .cb-ma-cap-bottom-text span { font-size:8px; font-weight:800; letter-spacing:.15em; color:#d88a00; } #cb-ma-capabilities .cb-ma-cap-bottom-text strong { font-size:15px; font-weight:750; letter-spacing:-.015em; } #cb-ma-capabilities .cb-ma-cap-bottom-note { max-width:450px; justify-self:end; font-size:11px; line-height:1.6; color:#77716a; text-align:right; } /* ========================================= TABLET ========================================= */ @media (max-width:1024px) { #cb-ma-capabilities { padding: 88px 5vw 76px; } #cb-ma-capabilities .cb-ma-capabilities-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } #cb-ma-capabilities .cb-ma-cap-card { min-height:250px; } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-capabilities { padding: 72px 20px 62px; background-size:34px 34px; } #cb-ma-capabilities .cb-ma-capabilities-head { margin-bottom:35px; } #cb-ma-capabilities h2 { font-size: clamp(34px,10vw,47px); line-height:1.04; } #cb-ma-capabilities .cb-ma-capabilities-head > p { font-size:15px; line-height:1.7; } #cb-ma-capabilities .cb-ma-capabilities-grid { grid-template-columns:1fr; gap:12px; } #cb-ma-capabilities .cb-ma-cap-card { min-height:235px; padding:22px; border-radius:15px; } #cb-ma-capabilities .cb-ma-card-content h3 { font-size:20px; } #cb-ma-capabilities .cb-ma-card-content p { max-width:100%; font-size:12px; line-height:1.65; } #cb-ma-capabilities .cb-ma-capabilities-bottom { display:flex; flex-direction:column; align-items:stretch; gap:15px; margin-top:35px; } #cb-ma-capabilities .cb-ma-cap-bottom-note { max-width:100%; justify-self:auto; text-align:left; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-capabilities { padding-left:16px; padding-right:16px; } #cb-ma-capabilities .cb-ma-cap-card { min-height:225px; padding:20px; } #cb-ma-capabilities .cb-ma-card-content h3 { font-size:19px; } #cb-ma-capabilities .cb-ma-card-arrow { right:18px; bottom:17px; } } /* ========================================= REDUCED MOTION ========================================= */ @media (prefers-reduced-motion:reduce) { #cb-ma-capabilities .cb-ma-cap-card, #cb-ma-capabilities .cb-ma-card-arrow { transition:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-eb041bd */.elementor-44 .elementor-element.elementor-element-eb041bd { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-eb041bd *, .elementor-44 .elementor-element.elementor-element-eb041bd *::before, .elementor-44 .elementor-element.elementor-element-eb041bd *::after { box-sizing:border-box; } /* ========================================= SECTION ========================================= */ #cb-ma-journeys { width:100%; margin:0; padding:108px 6vw 92px; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), #141311; background-size:42px 42px; color:#fff; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } /* ========================================= WRAPPER ========================================= */ #cb-ma-journeys .cb-ma-journeys-wrap { width:100%; max-width:1280px; margin:0 auto; } /* ========================================= HEADER ========================================= */ #cb-ma-journeys .cb-ma-journeys-head { max-width:790px; margin-bottom:52px; } #cb-ma-journeys .cb-ma-journeys-label { display:inline-flex; align-items:center; margin-bottom:18px; font-size:10px; font-weight:800; letter-spacing:.18em; color:#fca608; } #cb-ma-journeys .cb-ma-journeys-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#fca608; } #cb-ma-journeys h2 { margin:0 0 20px; font-size:clamp(39px,4.7vw,63px); line-height:1.02; letter-spacing:-.045em; font-weight:500; } #cb-ma-journeys h2 strong { font-weight:850; } #cb-ma-journeys .cb-ma-journeys-head > p { max-width:700px; margin:0; font-size:16px; line-height:1.75; color:#aaa49b; } /* ========================================= JOURNEY SYSTEM ========================================= */ #cb-ma-journeys .cb-ma-journey-system { width:100%; border: 1px solid rgba(255,255,255,.10); border-radius:20px; background:#1a1816; box-shadow: 0 28px 65px rgba(0,0,0,.22); overflow:hidden; } /* ========================================= SYSTEM HEADER ========================================= */ #cb-ma-journeys .cb-ma-journey-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 27px; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-journeys .cb-ma-journey-top span { display:block; margin-bottom:6px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#77716a; } #cb-ma-journeys .cb-ma-journey-top strong { font-size:18px; font-weight:750; letter-spacing:-.02em; } /* STATUS */ #cb-ma-journeys .cb-ma-journey-status { display:flex; align-items:center; gap:8px; font-size:8px; font-weight:800; letter-spacing:.12em; color:#fca608; } #cb-ma-journeys .cb-ma-journey-status i { width:6px; height:6px; border-radius:50%; background:#fca608; box-shadow: 0 0 0 5px rgba(252,166,8,.08); animation: cbMaJourneyStatus 2s ease-in-out infinite; } /* ========================================= JOURNEY PATH ========================================= */ #cb-ma-journeys .cb-ma-journey-path { display:grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr); align-items:center; padding:38px 27px 40px; } /* ========================================= JOURNEY STEP ========================================= */ #cb-ma-journeys .cb-ma-journey-step { min-height:215px; padding:22px; border: 1px solid rgba(255,255,255,.09); border-radius:15px; background: rgba(255,255,255,.025); transition: transform .3s ease, border-color .3s ease, background .3s ease; } #cb-ma-journeys .cb-ma-journey-step:hover { transform:translateY(-5px); border-color: rgba(252,166,8,.35); background: rgba(252,166,8,.045); } /* NUMBER */ #cb-ma-journeys .cb-ma-step-number { margin-bottom:30px; font-size:10px; font-weight:800; letter-spacing:.12em; color:#fca608; } /* STEP CONTENT */ #cb-ma-journeys .cb-ma-step-content span { display:block; margin-bottom:9px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#77716a; } #cb-ma-journeys .cb-ma-step-content h3 { margin:0 0 10px; font-size:17px; line-height:1.25; font-weight:750; letter-spacing:-.02em; } #cb-ma-journeys .cb-ma-step-content p { margin:0; font-size:11px; line-height:1.65; color:#89837b; } /* ========================================= CONNECTOR ========================================= */ #cb-ma-journeys .cb-ma-journey-connector { position:relative; height:1px; background: rgba(252,166,8,.20); } #cb-ma-journeys .cb-ma-journey-connector::before { content:""; position:absolute; top:50%; right:-1px; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#fca608; box-shadow: 0 0 12px rgba(252,166,8,.65); } #cb-ma-journeys .cb-ma-journey-connector i { position:absolute; top:50%; left:0; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:#fca608; animation: cbMaJourneySignal 2.3s linear infinite; } /* ========================================= RESULT ========================================= */ #cb-ma-journeys .cb-ma-journey-result { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:23px 27px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(252,166,8,.035); } #cb-ma-journeys .cb-ma-journey-result > div:first-child { display:flex; flex-direction:column; gap:7px; } #cb-ma-journeys .cb-ma-journey-result span { font-size:8px; font-weight:800; letter-spacing:.14em; color:#77716a; } #cb-ma-journeys .cb-ma-journey-result strong { font-size:13px; font-weight:700; color:#ddd8d0; } /* RESULT FLOW */ #cb-ma-journeys .cb-ma-result-flow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; } #cb-ma-journeys .cb-ma-result-flow span, #cb-ma-journeys .cb-ma-result-flow strong { font-size:8px; font-weight:800; letter-spacing:.12em; } #cb-ma-journeys .cb-ma-result-flow span { color:#77716a; } #cb-ma-journeys .cb-ma-result-flow strong { color:#fca608; } #cb-ma-journeys .cb-ma-result-flow i { font-style:normal; color:#555049; font-size:12px; } /* ========================================= BENEFITS ========================================= */ #cb-ma-journeys .cb-ma-journeys-benefits { display:grid; grid-template-columns: repeat(4,1fr); gap:0; margin-top:42px; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); } #cb-ma-journeys .cb-ma-journeys-benefits > div { padding:22px 24px; border-right: 1px solid rgba(255,255,255,.09); } #cb-ma-journeys .cb-ma-journeys-benefits > div:last-child { border-right:0; } #cb-ma-journeys .cb-ma-journeys-benefits span { display:block; margin-bottom:7px; font-size:8px; font-weight:800; letter-spacing:.13em; color:#fca608; } #cb-ma-journeys .cb-ma-journeys-benefits strong { display:block; font-size:12px; line-height:1.45; font-weight:700; color:#d5d0c8; } /* ========================================= ANIMATIONS ========================================= */ @keyframes cbMaJourneyStatus { 0%,100% { opacity:1; box-shadow: 0 0 0 5px rgba(252,166,8,.08); } 50% { opacity:.5; box-shadow: 0 0 0 8px rgba(252,166,8,.035); } } @keyframes cbMaJourneySignal { 0% { left:0; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { left:calc(100% - 5px); opacity:0; } } /* ========================================= TABLET ========================================= */ @media (max-width:1100px) { #cb-ma-journeys { padding: 88px 5vw 78px; } #cb-ma-journeys .cb-ma-journey-path { grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr); padding: 30px 20px 32px; } #cb-ma-journeys .cb-ma-journey-step { min-height:225px; padding:18px; } #cb-ma-journeys .cb-ma-step-number { margin-bottom:24px; } #cb-ma-journeys .cb-ma-journey-top, #cb-ma-journeys .cb-ma-journey-result { padding-left:20px; padding-right:20px; } #cb-ma-journeys .cb-ma-journeys-benefits { grid-template-columns: repeat(2,1fr); } #cb-ma-journeys .cb-ma-journeys-benefits > div:nth-child(2) { border-right:0; } #cb-ma-journeys .cb-ma-journeys-benefits > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.09); } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-journeys { padding: 72px 20px 62px; background-size: 34px 34px; } #cb-ma-journeys .cb-ma-journeys-head { margin-bottom:36px; } #cb-ma-journeys h2 { font-size: clamp(34px,10vw,47px); line-height:1.04; } #cb-ma-journeys .cb-ma-journeys-head > p { font-size:15px; line-height:1.7; } /* JOURNEY HEADER */ #cb-ma-journeys .cb-ma-journey-top { padding: 20px; align-items:flex-start; } #cb-ma-journeys .cb-ma-journey-top strong { font-size:16px; } /* JOURNEY PATH */ #cb-ma-journeys .cb-ma-journey-path { display:flex; flex-direction:column; align-items:stretch; padding: 20px; } #cb-ma-journeys .cb-ma-journey-step { min-height:auto; padding:20px; border-radius:14px; } #cb-ma-journeys .cb-ma-step-number { margin-bottom:22px; } /* VERTICAL CONNECTOR */ #cb-ma-journeys .cb-ma-journey-connector { width:1px; height:28px; margin-left:25px; background: rgba(252,166,8,.20); } #cb-ma-journeys .cb-ma-journey-connector::before { top:auto; right:auto; left:50%; bottom:-1px; margin-top:0; margin-left:-3px; } #cb-ma-journeys .cb-ma-journey-connector i { top:0; left:50%; margin-top:0; margin-left:-2px; animation: cbMaJourneyVerticalSignal 2s linear infinite; } /* RESULT */ #cb-ma-journeys .cb-ma-journey-result { flex-direction:column; align-items:flex-start; gap:18px; padding: 20px; } #cb-ma-journeys .cb-ma-result-flow { gap:7px; } /* BENEFITS */ #cb-ma-journeys .cb-ma-journeys-benefits { display:flex; flex-direction:column; margin-top:35px; } #cb-ma-journeys .cb-ma-journeys-benefits > div, #cb-ma-journeys .cb-ma-journeys-benefits > div:nth-child(2) { padding: 18px 0; border-right:0; border-bottom: 1px solid rgba(255,255,255,.09); } #cb-ma-journeys .cb-ma-journeys-benefits > div:last-child { border-bottom:0; } } @keyframes cbMaJourneyVerticalSignal { 0% { top:0; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { top:calc(100% - 5px); opacity:0; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-journeys { padding-left:16px; padding-right:16px; } #cb-ma-journeys .cb-ma-journey-system { border-radius:16px; } #cb-ma-journeys .cb-ma-journey-top { padding:18px; } #cb-ma-journeys .cb-ma-journey-path { padding:16px; } #cb-ma-journeys .cb-ma-journey-step { padding:18px; } #cb-ma-journeys .cb-ma-journey-result { padding:18px; } #cb-ma-journeys .cb-ma-result-flow { gap:6px; } #cb-ma-journeys .cb-ma-result-flow i { font-size:10px; } } /* ========================================= REDUCED MOTION ========================================= */ @media (prefers-reduced-motion:reduce) { #cb-ma-journeys .cb-ma-journey-status i, #cb-ma-journeys .cb-ma-journey-connector i { animation:none !important; } #cb-ma-journeys .cb-ma-journey-step { transition:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-ec5d8a1 */.elementor-44 .elementor-element.elementor-element-ec5d8a1 { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-ec5d8a1 *, .elementor-44 .elementor-element.elementor-element-ec5d8a1 *::before, .elementor-44 .elementor-element.elementor-element-ec5d8a1 *::after { box-sizing:border-box; } /* ========================================= SECTION ========================================= */ #cb-ma-lead-nurturing { width:100%; margin:0; padding:108px 6vw 92px; background: linear-gradient(rgba(20,19,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20,19,17,.035) 1px, transparent 1px), #f7f7f5; background-size:42px 42px; color:#141311; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } /* ========================================= WRAPPER ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-wrap { width:100%; max-width:1280px; margin:0 auto; } /* ========================================= HEADER ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-head { max-width:790px; margin-bottom:52px; } #cb-ma-lead-nurturing .cb-ma-lead-label { display:inline-flex; align-items:center; margin-bottom:18px; font-size:10px; font-weight:800; letter-spacing:.18em; color:#d88a00; } #cb-ma-lead-nurturing .cb-ma-lead-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#fca608; } #cb-ma-lead-nurturing h2 { margin:0 0 20px; font-size:clamp(39px,4.7vw,63px); line-height:1.02; letter-spacing:-.045em; font-weight:500; } #cb-ma-lead-nurturing h2 strong { font-weight:850; } #cb-ma-lead-nurturing .cb-ma-lead-head > p { max-width:700px; margin:0; font-size:16px; line-height:1.75; color:#6d6861; } /* ========================================= MAIN SYSTEM ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-system { width:100%; border: 1px solid rgba(20,19,17,.09); border-radius:20px; background:#fff; box-shadow: 0 24px 55px rgba(20,19,17,.07); overflow:hidden; } /* ========================================= SYSTEM HEADER ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-system-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 28px; background:#141311; color:#fff; } #cb-ma-lead-nurturing .cb-ma-lead-system-head span { display:block; margin-bottom:6px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#77716a; } #cb-ma-lead-nurturing .cb-ma-lead-system-head strong { font-size:18px; font-weight:750; letter-spacing:-.02em; } /* LIVE STATUS */ #cb-ma-lead-nurturing .cb-ma-lead-live { display:flex; align-items:center; gap:8px; font-size:8px; font-weight:800; letter-spacing:.12em; color:#fca608; } #cb-ma-lead-nurturing .cb-ma-lead-live i { width:6px; height:6px; border-radius:50%; background:#fca608; box-shadow: 0 0 0 5px rgba(252,166,8,.09); animation: cbMaLeadStatus 2s ease-in-out infinite; } /* ========================================= MAIN AREA ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-main { display:grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.85fr); gap:0; } /* ========================================= PROGRESSION ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-progression { display:grid; grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr); align-items:center; padding:32px 27px; } /* STAGE */ #cb-ma-lead-nurturing .cb-ma-lead-stage { min-height:225px; padding:21px; border: 1px solid rgba(20,19,17,.08); border-radius:14px; background:#f9f9f7; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } #cb-ma-lead-nurturing .cb-ma-lead-stage:hover { transform:translateY(-5px); border-color: rgba(252,166,8,.38); box-shadow: 0 15px 30px rgba(20,19,17,.07); } /* STAGE TOP */ #cb-ma-lead-nurturing .cb-ma-stage-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; } #cb-ma-lead-nurturing .cb-ma-stage-top span { font-size:9px; font-weight:800; color:#d88a00; } #cb-ma-lead-nurturing .cb-ma-stage-top small { font-size:7px; font-weight:800; letter-spacing:.12em; color:#9a948c; } /* STAGE CONTENT */ #cb-ma-lead-nurturing .cb-ma-lead-stage h3 { margin:0 0 9px; font-size:17px; line-height:1.25; letter-spacing:-.02em; font-weight:750; } #cb-ma-lead-nurturing .cb-ma-lead-stage p { min-height:58px; margin:0; font-size:11px; line-height:1.6; color:#77716a; } #cb-ma-lead-nurturing .cb-ma-lead-stage > strong { display:block; margin-top:18px; padding-top:13px; border-top: 1px solid rgba(20,19,17,.08); font-size:12px; font-weight:750; color:#141311; } /* FINAL STAGE */ #cb-ma-lead-nurturing .cb-ma-stage-final { background:#141311; color:#fff; border-color:#141311; } #cb-ma-lead-nurturing .cb-ma-stage-final:hover { border-color:#fca608; box-shadow: 0 18px 35px rgba(20,19,17,.16); } #cb-ma-lead-nurturing .cb-ma-stage-final .cb-ma-stage-top small { color:#fca608; } #cb-ma-lead-nurturing .cb-ma-stage-final p { color:#aaa49b; } #cb-ma-lead-nurturing .cb-ma-stage-final > strong { color:#fca608; border-color: rgba(255,255,255,.10); } /* ========================================= STAGE CONNECTORS ========================================= */ #cb-ma-lead-nurturing .cb-ma-stage-connector { position:relative; height:1px; background: rgba(252,166,8,.20); } #cb-ma-lead-nurturing .cb-ma-stage-connector::after { content:""; position:absolute; right:-1px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#fca608; } #cb-ma-lead-nurturing .cb-ma-stage-connector i { position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:#fca608; animation: cbMaLeadSignal 2.3s linear infinite; } /* ========================================= AUTOMATED ACTIONS ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-actions { padding:30px 25px; background:#141311; color:#fff; } /* ACTION HEADER */ #cb-ma-lead-nurturing .cb-ma-actions-head { display:flex; flex-direction:column; gap:6px; margin-bottom:22px; } #cb-ma-lead-nurturing .cb-ma-actions-head span { font-size:9px; font-weight:800; letter-spacing:.15em; color:#fca608; } #cb-ma-lead-nurturing .cb-ma-actions-head small { font-size:9px; color:#77716a; } /* ACTION ITEM */ #cb-ma-lead-nurturing .cb-ma-action { display:grid; grid-template-columns: 25px 1fr auto; align-items:center; gap:10px; padding:16px 0; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-lead-nurturing .cb-ma-action:last-child { border-bottom:0; } #cb-ma-lead-nurturing .cb-ma-action > span { font-size:8px; font-weight:800; color:#fca608; } #cb-ma-lead-nurturing .cb-ma-action > div { min-width:0; } #cb-ma-lead-nurturing .cb-ma-action strong { display:block; margin-bottom:4px; font-size:11px; font-weight:700; } #cb-ma-lead-nurturing .cb-ma-action small { display:block; font-size:8.5px; line-height:1.4; color:#77716a; } #cb-ma-lead-nurturing .cb-ma-action b { font-size:7px; font-weight:800; letter-spacing:.1em; color:#fca608; } /* ========================================= RESULT ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-result { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:23px 28px; border-top: 1px solid rgba(20,19,17,.08); background:#fafaf8; } #cb-ma-lead-nurturing .cb-ma-lead-result > div:first-child { display:flex; flex-direction:column; gap:6px; } #cb-ma-lead-nurturing .cb-ma-lead-result span { font-size:8px; font-weight:800; letter-spacing:.14em; color:#9a948c; } #cb-ma-lead-nurturing .cb-ma-lead-result > div:first-child strong { font-size:13px; font-weight:700; color:#3d3934; } /* RESULT METRIC */ #cb-ma-lead-nurturing .cb-ma-lead-result-metric { display:flex; align-items:center; gap:13px; padding-left:25px; border-left: 1px solid rgba(20,19,17,.09); } #cb-ma-lead-nurturing .cb-ma-lead-result-metric small { font-size:7px; font-weight:800; letter-spacing:.12em; color:#9a948c; } #cb-ma-lead-nurturing .cb-ma-lead-result-metric strong { font-size:23px; font-weight:800; color:#d88a00; } /* ========================================= BENEFITS ========================================= */ #cb-ma-lead-nurturing .cb-ma-lead-benefits { display:grid; grid-template-columns: repeat(4,1fr); margin-top:42px; border-top: 1px solid rgba(20,19,17,.09); border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-lead-nurturing .cb-ma-lead-benefits > div { padding:22px 24px; border-right: 1px solid rgba(20,19,17,.09); } #cb-ma-lead-nurturing .cb-ma-lead-benefits > div:last-child { border-right:0; } #cb-ma-lead-nurturing .cb-ma-lead-benefits span { display:block; margin-bottom:7px; font-size:8px; font-weight:800; letter-spacing:.14em; color:#d88a00; } #cb-ma-lead-nurturing .cb-ma-lead-benefits strong { display:block; font-size:12px; line-height:1.45; font-weight:700; color:#3d3934; } /* ========================================= ANIMATIONS ========================================= */ @keyframes cbMaLeadStatus { 0%,100% { opacity:1; box-shadow: 0 0 0 5px rgba(252,166,8,.09); } 50% { opacity:.5; box-shadow: 0 0 0 8px rgba(252,166,8,.035); } } @keyframes cbMaLeadSignal { 0% { left:0; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { left:calc(100% - 5px); opacity:0; } } /* ========================================= TABLET ========================================= */ @media (max-width:1100px) { #cb-ma-lead-nurturing { padding: 88px 5vw 78px; } #cb-ma-lead-nurturing .cb-ma-lead-main { grid-template-columns: 1fr; } #cb-ma-lead-nurturing .cb-ma-lead-progression { padding: 28px 22px; } #cb-ma-lead-nurturing .cb-ma-lead-actions { border-top: 1px solid rgba(255,255,255,.08); } #cb-ma-lead-nurturing .cb-ma-lead-benefits { grid-template-columns: repeat(2,1fr); } #cb-ma-lead-nurturing .cb-ma-lead-benefits > div:nth-child(2) { border-right:0; } #cb-ma-lead-nurturing .cb-ma-lead-benefits > div:nth-child(-n+2) { border-bottom: 1px solid rgba(20,19,17,.09); } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-lead-nurturing { padding: 72px 20px 62px; background-size: 34px 34px; } #cb-ma-lead-nurturing .cb-ma-lead-head { margin-bottom:36px; } #cb-ma-lead-nurturing h2 { font-size: clamp(34px,10vw,47px); line-height:1.04; } #cb-ma-lead-nurturing .cb-ma-lead-head > p { font-size:15px; line-height:1.7; } /* SYSTEM HEADER */ #cb-ma-lead-nurturing .cb-ma-lead-system-head { padding: 20px; align-items:flex-start; } #cb-ma-lead-nurturing .cb-ma-lead-system-head strong { font-size:16px; } /* PROGRESSION */ #cb-ma-lead-nurturing .cb-ma-lead-progression { display:flex; flex-direction:column; align-items:stretch; padding: 18px; } #cb-ma-lead-nurturing .cb-ma-lead-stage { min-height:auto; padding:20px; border-radius:14px; } #cb-ma-lead-nurturing .cb-ma-stage-top { margin-bottom:22px; } #cb-ma-lead-nurturing .cb-ma-lead-stage p { min-height:auto; margin-bottom:16px; } #cb-ma-lead-nurturing .cb-ma-lead-stage > strong { margin-top:0; } /* VERTICAL CONNECTOR */ #cb-ma-lead-nurturing .cb-ma-stage-connector { width:1px; height:28px; margin-left:25px; } #cb-ma-lead-nurturing .cb-ma-stage-connector::after { top:auto; right:auto; left:50%; bottom:-1px; margin-top:0; margin-left:-3px; } #cb-ma-lead-nurturing .cb-ma-stage-connector i { top:0; left:50%; margin-top:0; margin-left:-2px; animation: cbMaLeadVerticalSignal 2s linear infinite; } /* ACTIONS */ #cb-ma-lead-nurturing .cb-ma-lead-actions { padding: 22px 20px; } #cb-ma-lead-nurturing .cb-ma-action { grid-template-columns: 22px 1fr auto; gap:8px; } #cb-ma-lead-nurturing .cb-ma-action strong { font-size:10.5px; } #cb-ma-lead-nurturing .cb-ma-action small { font-size:8px; } /* RESULT */ #cb-ma-lead-nurturing .cb-ma-lead-result { flex-direction:column; align-items:flex-start; gap:18px; padding: 20px; } #cb-ma-lead-nurturing .cb-ma-lead-result-metric { width:100%; padding-left:0; padding-top:16px; border-left:0; border-top: 1px solid rgba(20,19,17,.09); justify-content:space-between; } /* BENEFITS */ #cb-ma-lead-nurturing .cb-ma-lead-benefits { display:flex; flex-direction:column; margin-top:35px; } #cb-ma-lead-nurturing .cb-ma-lead-benefits > div, #cb-ma-lead-nurturing .cb-ma-lead-benefits > div:nth-child(2) { padding: 18px 0; border-right:0; border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-lead-nurturing .cb-ma-lead-benefits > div:last-child { border-bottom:0; } } @keyframes cbMaLeadVerticalSignal { 0% { top:0; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { top:calc(100% - 5px); opacity:0; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-lead-nurturing { padding-left:16px; padding-right:16px; } #cb-ma-lead-nurturing .cb-ma-lead-system { border-radius:16px; } #cb-ma-lead-nurturing .cb-ma-lead-system-head { padding:18px; } #cb-ma-lead-nurturing .cb-ma-lead-progression { padding:16px; } #cb-ma-lead-nurturing .cb-ma-lead-stage { padding:18px; } #cb-ma-lead-nurturing .cb-ma-lead-actions { padding: 20px 18px; } #cb-ma-lead-nurturing .cb-ma-lead-result { padding:18px; } } /* ========================================= REDUCED MOTION ========================================= */ @media (prefers-reduced-motion:reduce) { #cb-ma-lead-nurturing .cb-ma-lead-live i, #cb-ma-lead-nurturing .cb-ma-stage-connector i { animation:none !important; } #cb-ma-lead-nurturing .cb-ma-lead-stage { transition:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-981f614 */.elementor-44 .elementor-element.elementor-element-981f614 { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-981f614 *, .elementor-44 .elementor-element.elementor-element-981f614 *::before, .elementor-44 .elementor-element.elementor-element-981f614 *::after { box-sizing:border-box; } /* ========================================= SECTION ========================================= */ #cb-ma-personalization { width:100%; margin:0; padding:108px 6vw 92px; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), #141311; background-size:42px 42px; color:#fff; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } /* ========================================= WRAPPER ========================================= */ #cb-ma-personalization .cb-ma-personalization-wrap { width:100%; max-width:1280px; margin:0 auto; } /* ========================================= HEADER ========================================= */ #cb-ma-personalization .cb-ma-personalization-head { max-width:790px; margin-bottom:54px; } #cb-ma-personalization .cb-ma-personalization-label { display:inline-flex; align-items:center; margin-bottom:18px; font-size:10px; font-weight:800; letter-spacing:.18em; color:#fca608; } #cb-ma-personalization .cb-ma-personalization-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#fca608; } #cb-ma-personalization h2 { margin:0 0 20px; font-size:clamp(39px,4.7vw,63px); line-height:1.02; letter-spacing:-.045em; font-weight:500; } #cb-ma-personalization h2 strong { font-weight:850; } #cb-ma-personalization .cb-ma-personalization-head > p { max-width:700px; margin:0; font-size:16px; line-height:1.75; color:#aaa49b; } /* ========================================= MAIN SYSTEM ========================================= */ #cb-ma-personalization .cb-ma-personalization-system { display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap:70px; align-items:center; } /* ========================================= LEFT CONTENT ========================================= */ #cb-ma-personalization .cb-ma-personalization-content { max-width:520px; } #cb-ma-personalization .cb-ma-personalization-intro > span { display:block; margin-bottom:14px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#fca608; } #cb-ma-personalization .cb-ma-personalization-intro h3 { margin:0 0 16px; font-size:32px; line-height:1.08; letter-spacing:-.035em; font-weight:500; } #cb-ma-personalization .cb-ma-personalization-intro h3 strong { font-weight:800; } #cb-ma-personalization .cb-ma-personalization-intro p { margin:0; max-width:480px; font-size:13px; line-height:1.75; color:#89837b; } /* ========================================= PERSONALIZATION FACTORS ========================================= */ #cb-ma-personalization .cb-ma-personalization-factors { display:grid; grid-template-columns: repeat(2,1fr); gap:0; margin-top:36px; border-top: 1px solid rgba(255,255,255,.09); border-left: 1px solid rgba(255,255,255,.09); } #cb-ma-personalization .cb-ma-personalization-factors > div { min-height:125px; padding:20px; border-right: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); } #cb-ma-personalization .cb-ma-personalization-factors span { display:block; margin-bottom:18px; font-size:9px; font-weight:800; color:#fca608; } #cb-ma-personalization .cb-ma-personalization-factors strong { display:block; margin-bottom:6px; font-size:12px; font-weight:700; color:#ddd8d0; } #cb-ma-personalization .cb-ma-personalization-factors small { display:block; font-size:9px; line-height:1.45; color:#716c65; } /* ========================================= RIGHT PREVIEW ========================================= */ #cb-ma-personalization .cb-ma-personalization-preview { border: 1px solid rgba(255,255,255,.10); border-radius:20px; background:#1a1816; box-shadow: 0 28px 60px rgba(0,0,0,.25); overflow:hidden; } /* ========================================= PREVIEW TOP ========================================= */ #cb-ma-personalization .cb-ma-preview-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 25px; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-personalization .cb-ma-preview-top span { display:block; margin-bottom:6px; font-size:8px; font-weight:800; letter-spacing:.14em; color:#77716a; } #cb-ma-personalization .cb-ma-preview-top strong { font-size:17px; font-weight:750; } #cb-ma-personalization .cb-ma-preview-top b { font-size:7px; font-weight:800; letter-spacing:.12em; color:#fca608; } /* ========================================= CUSTOMER PROFILE ========================================= */ #cb-ma-personalization .cb-ma-customer-profile { margin:22px 25px 0; padding:20px; border: 1px solid rgba(255,255,255,.08); border-radius:13px; background: rgba(255,255,255,.025); } #cb-ma-personalization .cb-ma-profile-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:21px; } #cb-ma-personalization .cb-ma-profile-heading small { display:block; margin-bottom:6px; font-size:7px; font-weight:800; letter-spacing:.13em; color:#77716a; } #cb-ma-personalization .cb-ma-profile-heading strong { font-size:13px; font-weight:750; } #cb-ma-personalization .cb-ma-profile-heading > span { padding:6px 8px; border: 1px solid rgba(252,166,8,.25); border-radius:5px; font-size:7px; font-weight:800; letter-spacing:.1em; color:#fca608; } /* PROFILE DETAILS */ #cb-ma-personalization .cb-ma-profile-details { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; } #cb-ma-personalization .cb-ma-profile-details > div { padding-top:13px; border-top: 1px solid rgba(255,255,255,.08); } #cb-ma-personalization .cb-ma-profile-details small { display:block; margin-bottom:6px; font-size:7px; font-weight:800; letter-spacing:.12em; color:#77716a; } #cb-ma-personalization .cb-ma-profile-details strong { display:block; font-size:10px; line-height:1.4; font-weight:650; color:#d4cfc7; } /* ========================================= MESSAGE ========================================= */ #cb-ma-personalization .cb-ma-message { padding:25px; } #cb-ma-personalization .cb-ma-message-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; } #cb-ma-personalization .cb-ma-message-label span { font-size:8px; font-weight:800; letter-spacing:.13em; color:#fca608; } #cb-ma-personalization .cb-ma-message-label small { font-size:7px; color:#716c65; } /* MESSAGE BOX */ #cb-ma-personalization .cb-ma-message-box { padding:21px; border-radius:13px; background:#fca608; color:#141311; box-shadow: 0 14px 30px rgba(0,0,0,.16); } #cb-ma-personalization .cb-ma-message-box strong { display:block; margin-bottom:9px; font-size:16px; line-height:1.25; font-weight:800; letter-spacing:-.02em; } #cb-ma-personalization .cb-ma-message-box p { margin:0; font-size:10px; line-height:1.65; color:rgba(20,19,17,.68); } #cb-ma-personalization .cb-ma-message-box a { display:inline-flex; align-items:center; gap:8px; margin-top:17px; color:#141311; text-decoration:none; font-size:9px; font-weight:850; } #cb-ma-personalization .cb-ma-message-box a span { font-size:12px; } /* ========================================= PREVIEW STATUS ========================================= */ #cb-ma-personalization .cb-ma-preview-status { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 25px; border-top: 1px solid rgba(255,255,255,.08); } #cb-ma-personalization .cb-ma-preview-status span { font-size:7px; font-weight:800; letter-spacing:.1em; color:#77716a; } #cb-ma-personalization .cb-ma-preview-status strong { font-size:9px; font-weight:800; color:#fca608; } /* ========================================= BOTTOM ========================================= */ #cb-ma-personalization .cb-ma-personalization-bottom { display:grid; grid-template-columns: repeat(4,1fr); margin-top:48px; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); } #cb-ma-personalization .cb-ma-personalization-bottom > div { padding:22px 24px; border-right: 1px solid rgba(255,255,255,.09); } #cb-ma-personalization .cb-ma-personalization-bottom > div:last-child { border-right:0; } #cb-ma-personalization .cb-ma-personalization-bottom span { display:block; margin-bottom:7px; font-size:8px; font-weight:800; letter-spacing:.14em; color:#fca608; } #cb-ma-personalization .cb-ma-personalization-bottom strong { display:block; font-size:12px; line-height:1.45; font-weight:700; color:#d5d0c8; } /* ========================================= TABLET ========================================= */ @media (max-width:1024px) { #cb-ma-personalization { padding: 88px 5vw 78px; } #cb-ma-personalization .cb-ma-personalization-system { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap:35px; } #cb-ma-personalization .cb-ma-personalization-intro h3 { font-size:27px; } #cb-ma-personalization .cb-ma-profile-details { grid-template-columns: 1fr; } #cb-ma-personalization .cb-ma-profile-details > div { padding-top:10px; } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-personalization { padding: 72px 20px 62px; background-size: 34px 34px; } #cb-ma-personalization .cb-ma-personalization-head { margin-bottom:38px; } #cb-ma-personalization h2 { font-size: clamp(34px,10vw,47px); line-height:1.04; } #cb-ma-personalization .cb-ma-personalization-head > p { font-size:15px; line-height:1.7; } /* MAIN SYSTEM */ #cb-ma-personalization .cb-ma-personalization-system { display:flex; flex-direction:column; gap:38px; align-items:stretch; } #cb-ma-personalization .cb-ma-personalization-content { max-width:none; } #cb-ma-personalization .cb-ma-personalization-intro h3 { font-size:27px; } /* FACTORS */ #cb-ma-personalization .cb-ma-personalization-factors { margin-top:28px; } #cb-ma-personalization .cb-ma-personalization-factors > div { min-height:115px; padding:17px; } /* PREVIEW */ #cb-ma-personalization .cb-ma-personalization-preview { border-radius:16px; } #cb-ma-personalization .cb-ma-preview-top { padding: 20px; } #cb-ma-personalization .cb-ma-customer-profile { margin: 18px 18px 0; padding: 18px; } #cb-ma-personalization .cb-ma-profile-details { grid-template-columns: 1fr; gap:0; } #cb-ma-personalization .cb-ma-profile-details > div { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); } #cb-ma-personalization .cb-ma-profile-details > div:first-child { border-top:0; padding-top:0; } #cb-ma-personalization .cb-ma-message { padding: 20px; } #cb-ma-personalization .cb-ma-message-box { padding: 18px; } #cb-ma-personalization .cb-ma-preview-status { padding: 15px 20px; } #cb-ma-personalization .cb-ma-preview-status span { max-width:190px; line-height:1.4; } /* BOTTOM */ #cb-ma-personalization .cb-ma-personalization-bottom { display:flex; flex-direction:column; margin-top:35px; } #cb-ma-personalization .cb-ma-personalization-bottom > div, #cb-ma-personalization .cb-ma-personalization-bottom > div:last-child { padding: 18px 0; border-right:0; border-bottom: 1px solid rgba(255,255,255,.09); } #cb-ma-personalization .cb-ma-personalization-bottom > div:last-child { border-bottom:0; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-personalization { padding-left:16px; padding-right:16px; } #cb-ma-personalization .cb-ma-personalization-factors { grid-template-columns: 1fr; } #cb-ma-personalization .cb-ma-personalization-factors > div { min-height:auto; padding: 17px 18px; } #cb-ma-personalization .cb-ma-preview-top { padding: 18px; } #cb-ma-personalization .cb-ma-preview-top strong { font-size:15px; } #cb-ma-personalization .cb-ma-customer-profile { margin: 16px 16px 0; } #cb-ma-personalization .cb-ma-message { padding: 18px; } #cb-ma-personalization .cb-ma-message-box strong { font-size:15px; } #cb-ma-personalization .cb-ma-preview-status { align-items:flex-start; flex-direction:column; gap:8px; } } /* ========================================= REDUCED MOTION ========================================= */ @media (prefers-reduced-motion:reduce) { #cb-ma-personalization .cb-ma-personalization-factors > div, #cb-ma-personalization .cb-ma-message-box a { transition:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-1712bfb */.elementor-44 .elementor-element.elementor-element-1712bfb { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-1712bfb *, .elementor-44 .elementor-element.elementor-element-1712bfb *::before, .elementor-44 .elementor-element.elementor-element-1712bfb *::after { box-sizing:border-box; } /* ========================================= SECTION ========================================= */ #cb-ma-campaigns { width:100%; margin:0; padding:108px 6vw 92px; background: linear-gradient(rgba(20,19,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20,19,17,.035) 1px, transparent 1px), #f7f7f5; background-size:42px 42px; color:#141311; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } /* ========================================= WRAPPER ========================================= */ #cb-ma-campaigns .cb-ma-campaigns-wrap { width:100%; max-width:1280px; margin:0 auto; } /* ========================================= HEADER ========================================= */ #cb-ma-campaigns .cb-ma-campaigns-head { max-width:790px; margin-bottom:54px; } #cb-ma-campaigns .cb-ma-campaigns-label { display:inline-flex; align-items:center; margin-bottom:18px; font-size:10px; font-weight:800; letter-spacing:.18em; color:#d88a00; } #cb-ma-campaigns .cb-ma-campaigns-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#fca608; } #cb-ma-campaigns h2 { margin:0 0 20px; font-size:clamp(39px,4.7vw,63px); line-height:1.02; letter-spacing:-.045em; font-weight:500; } #cb-ma-campaigns h2 strong { font-weight:850; } #cb-ma-campaigns .cb-ma-campaigns-head > p { max-width:700px; margin:0; font-size:16px; line-height:1.75; color:#6d6861; } /* ========================================= MAIN SYSTEM ========================================= */ #cb-ma-campaigns .cb-ma-campaign-system { display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap:70px; align-items:center; } /* ========================================= LEFT CONTENT ========================================= */ #cb-ma-campaigns .cb-ma-campaign-content { max-width:520px; } #cb-ma-campaigns .cb-ma-campaign-intro > span { display:block; margin-bottom:14px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#d88a00; } #cb-ma-campaigns .cb-ma-campaign-intro h3 { margin:0 0 16px; font-size:32px; line-height:1.08; letter-spacing:-.035em; font-weight:500; } #cb-ma-campaigns .cb-ma-campaign-intro h3 strong { font-weight:800; } #cb-ma-campaigns .cb-ma-campaign-intro p { max-width:480px; margin:0; font-size:13px; line-height:1.75; color:#77716a; } /* ========================================= FEATURES ========================================= */ #cb-ma-campaigns .cb-ma-campaign-features { display:flex; flex-direction:column; margin-top:35px; border-top: 1px solid rgba(20,19,17,.09); } #cb-ma-campaigns .cb-ma-campaign-features > div { display:grid; grid-template-columns: 30px 1fr; gap:14px; padding:17px 0; border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-campaigns .cb-ma-campaign-features > div > span { font-size:9px; font-weight:800; color:#d88a00; } #cb-ma-campaigns .cb-ma-campaign-features strong { display:block; margin-bottom:5px; font-size:12px; font-weight:750; } #cb-ma-campaigns .cb-ma-campaign-features small { display:block; font-size:10px; line-height:1.5; color:#858078; } /* ========================================= CAMPAIGN CONTROL ========================================= */ #cb-ma-campaigns .cb-ma-campaign-control { border-radius:20px; background:#141311; color:#fff; box-shadow: 0 28px 60px rgba(20,19,17,.17); overflow:hidden; } /* CONTROL HEADER */ #cb-ma-campaigns .cb-ma-control-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-campaigns .cb-ma-control-top span { display:block; margin-bottom:6px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#77716a; } #cb-ma-campaigns .cb-ma-control-top strong { font-size:17px; font-weight:750; letter-spacing:-.02em; } #cb-ma-campaigns .cb-ma-control-top b { font-size:7px; font-weight:800; letter-spacing:.12em; color:#fca608; } /* ========================================= AUDIENCE ========================================= */ #cb-ma-campaigns .cb-ma-control-audience { margin:22px 25px 0; padding:20px; border: 1px solid rgba(255,255,255,.08); border-radius:13px; background: rgba(255,255,255,.025); } #cb-ma-campaigns .cb-ma-audience-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:17px; } #cb-ma-campaigns .cb-ma-audience-head span { font-size:7px; font-weight:800; letter-spacing:.13em; color:#77716a; } #cb-ma-campaigns .cb-ma-audience-head strong { font-size:11px; font-weight:700; color:#ddd8d0; } #cb-ma-campaigns .cb-ma-audience-info { display:flex; align-items:baseline; gap:9px; padding-top:13px; border-top: 1px solid rgba(255,255,255,.08); } #cb-ma-campaigns .cb-ma-audience-info strong { font-size:26px; line-height:1; font-weight:800; color:#fca608; } #cb-ma-campaigns .cb-ma-audience-info span { font-size:9px; color:#77716a; } /* ========================================= SEQUENCE ========================================= */ #cb-ma-campaigns .cb-ma-campaign-sequence { padding:24px 25px; } #cb-ma-campaigns .cb-ma-sequence-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } #cb-ma-campaigns .cb-ma-sequence-head span { font-size:8px; font-weight:800; letter-spacing:.14em; color:#fca608; } #cb-ma-campaigns .cb-ma-sequence-head small { font-size:7px; font-weight:800; letter-spacing:.1em; color:#77716a; } /* SEQUENCE ITEM */ #cb-ma-campaigns .cb-ma-sequence-item { display:grid; grid-template-columns: 25px 1fr auto; align-items:center; gap:10px; padding:15px 0; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-campaigns .cb-ma-sequence-item:last-child { border-bottom:0; } #cb-ma-campaigns .cb-ma-sequence-item > span { font-size:8px; font-weight:800; color:#fca608; } #cb-ma-campaigns .cb-ma-sequence-item strong { display:block; margin-bottom:4px; font-size:11px; font-weight:700; } #cb-ma-campaigns .cb-ma-sequence-item small { display:block; font-size:8.5px; line-height:1.4; color:#77716a; } #cb-ma-campaigns .cb-ma-sequence-item b { font-size:7px; font-weight:800; letter-spacing:.09em; color:#8c867e; } #cb-ma-campaigns .cb-ma-sequence-item:nth-child(3) b { color:#fca608; } /* ========================================= STATUS ========================================= */ #cb-ma-campaigns .cb-ma-campaign-status { display:flex; align-items:center; justify-content:space-between; padding:18px 25px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(252,166,8,.035); } #cb-ma-campaigns .cb-ma-campaign-status span { font-size:7px; font-weight:800; letter-spacing:.12em; color:#77716a; } #cb-ma-campaigns .cb-ma-campaign-status strong { font-size:18px; font-weight:800; color:#fca608; } /* ========================================= BOTTOM ========================================= */ #cb-ma-campaigns .cb-ma-campaign-bottom { display:grid; grid-template-columns: repeat(4,1fr); margin-top:48px; border-top: 1px solid rgba(20,19,17,.09); border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-campaigns .cb-ma-campaign-bottom > div { padding:22px 24px; border-right: 1px solid rgba(20,19,17,.09); } #cb-ma-campaigns .cb-ma-campaign-bottom > div:last-child { border-right:0; } #cb-ma-campaigns .cb-ma-campaign-bottom span { display:block; margin-bottom:7px; font-size:8px; font-weight:800; letter-spacing:.14em; color:#d88a00; } #cb-ma-campaigns .cb-ma-campaign-bottom strong { display:block; font-size:12px; line-height:1.45; font-weight:700; color:#3d3934; } /* ========================================= TABLET ========================================= */ @media (max-width:1024px) { #cb-ma-campaigns { padding: 88px 5vw 78px; } #cb-ma-campaigns .cb-ma-campaign-system { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap:35px; } #cb-ma-campaigns .cb-ma-campaign-intro h3 { font-size:27px; } #cb-ma-campaigns .cb-ma-campaign-bottom { grid-template-columns: repeat(2,1fr); } #cb-ma-campaigns .cb-ma-campaign-bottom > div:nth-child(2) { border-right:0; } #cb-ma-campaigns .cb-ma-campaign-bottom > div:nth-child(-n+2) { border-bottom: 1px solid rgba(20,19,17,.09); } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-campaigns { padding: 72px 20px 62px; background-size: 34px 34px; } #cb-ma-campaigns .cb-ma-campaigns-head { margin-bottom:38px; } #cb-ma-campaigns h2 { font-size: clamp(34px,10vw,47px); line-height:1.04; } #cb-ma-campaigns .cb-ma-campaigns-head > p { font-size:15px; line-height:1.7; } /* MAIN */ #cb-ma-campaigns .cb-ma-campaign-system { display:flex; flex-direction:column; gap:38px; align-items:stretch; } #cb-ma-campaigns .cb-ma-campaign-content { max-width:none; } #cb-ma-campaigns .cb-ma-campaign-intro h3 { font-size:27px; } /* FEATURES */ #cb-ma-campaigns .cb-ma-campaign-features { margin-top:28px; } #cb-ma-campaigns .cb-ma-campaign-features > div { grid-template-columns: 26px 1fr; gap:11px; padding:16px 0; } /* CONTROL */ #cb-ma-campaigns .cb-ma-campaign-control { border-radius:16px; } #cb-ma-campaigns .cb-ma-control-top { padding: 20px; } #cb-ma-campaigns .cb-ma-control-top strong { font-size:15px; } /* AUDIENCE */ #cb-ma-campaigns .cb-ma-control-audience { margin: 18px 18px 0; padding: 18px; } #cb-ma-campaigns .cb-ma-audience-head { align-items:flex-start; flex-direction:column; gap:7px; } #cb-ma-campaigns .cb-ma-campaign-sequence { padding: 21px 18px; } #cb-ma-campaigns .cb-ma-sequence-item { grid-template-columns: 23px 1fr auto; gap:8px; } #cb-ma-campaigns .cb-ma-campaign-status { padding: 16px 18px; } /* BOTTOM */ #cb-ma-campaigns .cb-ma-campaign-bottom { display:flex; flex-direction:column; margin-top:35px; } #cb-ma-campaigns .cb-ma-campaign-bottom > div, #cb-ma-campaigns .cb-ma-campaign-bottom > div:last-child { padding: 18px 0; border-right:0; border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-campaigns .cb-ma-campaign-bottom > div:last-child { border-bottom:0; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-campaigns { padding-left:16px; padding-right:16px; } #cb-ma-campaigns .cb-ma-control-top { padding: 18px; } #cb-ma-campaigns .cb-ma-control-audience { margin: 16px 16px 0; padding: 17px; } #cb-ma-campaigns .cb-ma-campaign-sequence { padding: 20px 16px; } #cb-ma-campaigns .cb-ma-campaign-status { padding: 15px 16px; } } /* ========================================= REDUCED MOTION ========================================= */ @media (prefers-reduced-motion:reduce) { #cb-ma-campaigns .cb-ma-campaign-features > div, #cb-ma-campaigns .cb-ma-sequence-item { transition:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-43f8654 */.elementor-44 .elementor-element.elementor-element-43f8654 { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-43f8654 *, .elementor-44 .elementor-element.elementor-element-43f8654 *::before, .elementor-44 .elementor-element.elementor-element-43f8654 *::after { box-sizing:border-box; } /* ========================================= SECTION ========================================= */ #cb-ma-retention { width:100%; margin:0; padding:108px 6vw 92px; background: linear-gradient(rgba(20,19,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20,19,17,.035) 1px, transparent 1px), #f7f7f5; background-size:42px 42px; color:#141311; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } #cb-ma-retention .cb-ma-retention-wrap { width:100%; max-width:1280px; margin:0 auto; } /* ========================================= HEADER ========================================= */ #cb-ma-retention .cb-ma-retention-head { max-width:800px; margin-bottom:54px; } #cb-ma-retention .cb-ma-retention-label { display:inline-flex; align-items:center; margin-bottom:18px; font-size:10px; font-weight:800; letter-spacing:.18em; color:#d88a00; } #cb-ma-retention .cb-ma-retention-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#fca608; } #cb-ma-retention h2 { margin:0 0 20px; font-size:clamp(39px,4.7vw,63px); line-height:1.02; letter-spacing:-.045em; font-weight:500; } #cb-ma-retention h2 strong { font-weight:850; } #cb-ma-retention .cb-ma-retention-head > p { max-width:710px; margin:0; font-size:16px; line-height:1.75; color:#6d6861; } /* ========================================= MAIN SYSTEM ========================================= */ #cb-ma-retention .cb-ma-retention-system { display:grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap:72px; align-items:center; } /* ========================================= LEFT CONTENT ========================================= */ #cb-ma-retention .cb-ma-retention-content { max-width:520px; } #cb-ma-retention .cb-ma-retention-intro > span { display:block; margin-bottom:14px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#d88a00; } #cb-ma-retention .cb-ma-retention-intro h3 { margin:0 0 16px; font-size:32px; line-height:1.08; letter-spacing:-.035em; font-weight:500; } #cb-ma-retention .cb-ma-retention-intro h3 strong { font-weight:800; } #cb-ma-retention .cb-ma-retention-intro p { max-width:480px; margin:0; font-size:13px; line-height:1.75; color:#77716a; } /* ========================================= POINTS ========================================= */ #cb-ma-retention .cb-ma-retention-points { display:flex; flex-direction:column; margin-top:35px; border-top: 1px solid rgba(20,19,17,.09); } #cb-ma-retention .cb-ma-retention-points > div { display:grid; grid-template-columns:30px 1fr; gap:14px; padding:17px 0; border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-retention .cb-ma-retention-points > div > span { font-size:9px; font-weight:800; color:#d88a00; } #cb-ma-retention .cb-ma-retention-points strong { display:block; margin-bottom:5px; font-size:12px; font-weight:750; } #cb-ma-retention .cb-ma-retention-points small { display:block; font-size:10px; line-height:1.5; color:#858078; } /* ========================================= RETENTION BOARD ========================================= */ #cb-ma-retention .cb-ma-retention-board { position:relative; border-radius:20px; background:#141311; color:#fff; box-shadow: 0 28px 60px rgba(20,19,17,.17); overflow:hidden; } /* ========================================= BOARD HEADER ========================================= */ #cb-ma-retention .cb-ma-retention-board-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-retention .cb-ma-retention-board-head span { display:block; margin-bottom:6px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#77716a; } #cb-ma-retention .cb-ma-retention-board-head strong { font-size:17px; font-weight:750; letter-spacing:-.02em; } #cb-ma-retention .cb-ma-retention-board-head b { font-size:7px; font-weight:800; letter-spacing:.12em; color:#fca608; } /* ========================================= LIFECYCLE STAGES ========================================= */ #cb-ma-retention .cb-ma-retention-stages { padding:22px 25px 8px; } #cb-ma-retention .cb-ma-retention-stage { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:12px; padding:17px 0; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-retention .cb-ma-retention-stage > span { font-size:8px; font-weight:800; color:#fca608; } #cb-ma-retention .cb-ma-retention-stage strong { display:block; margin-bottom:4px; font-size:11px; font-weight:700; } #cb-ma-retention .cb-ma-retention-stage small { display:block; font-size:8.5px; line-height:1.4; color:#77716a; } #cb-ma-retention .cb-ma-retention-stage b { font-size:7px; font-weight:800; letter-spacing:.09em; color:#8c867e; } #cb-ma-retention .cb-ma-retention-stage:nth-child(3) b, #cb-ma-retention .cb-ma-retention-stage:nth-child(4) b { color:#fca608; } /* ========================================= AUTOMATED ACTION ========================================= */ #cb-ma-retention .cb-ma-retention-action { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:16px 25px 0; padding:19px 20px; border: 1px solid rgba(252,166,8,.22); border-radius:12px; background: rgba(252,166,8,.055); } #cb-ma-retention .cb-ma-retention-action span { display:block; margin-bottom:7px; font-size:7px; font-weight:800; letter-spacing:.13em; color:#fca608; } #cb-ma-retention .cb-ma-retention-action strong { display:block; margin-bottom:5px; font-size:11px; font-weight:700; } #cb-ma-retention .cb-ma-retention-action small { display:block; max-width:350px; font-size:8.5px; line-height:1.45; color:#77716a; } #cb-ma-retention .cb-ma-retention-action > b { flex:none; font-size:7px; font-weight:800; letter-spacing:.1em; color:#fca608; } /* ========================================= RESULT ========================================= */ #cb-ma-retention .cb-ma-retention-result { display:flex; align-items:baseline; gap:12px; margin-top:22px; padding:21px 25px; border-top: 1px solid rgba(255,255,255,.08); } #cb-ma-retention .cb-ma-retention-result span { font-size:7px; font-weight:800; letter-spacing:.12em; color:#77716a; } #cb-ma-retention .cb-ma-retention-result strong { font-size:23px; font-weight:850; color:#fca608; } #cb-ma-retention .cb-ma-retention-result small { font-size:8px; color:#77716a; } /* ========================================= BOTTOM FLOW ========================================= */ #cb-ma-retention .cb-ma-retention-bottom { display:grid; grid-template-columns: repeat(4,1fr); margin-top:48px; border-top: 1px solid rgba(20,19,17,.09); border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-retention .cb-ma-retention-bottom > div { padding:22px 24px; border-right: 1px solid rgba(20,19,17,.09); } #cb-ma-retention .cb-ma-retention-bottom > div:last-child { border-right:0; } #cb-ma-retention .cb-ma-retention-bottom span { display:block; margin-bottom:7px; font-size:8px; font-weight:800; letter-spacing:.14em; color:#d88a00; } #cb-ma-retention .cb-ma-retention-bottom strong { display:block; font-size:12px; line-height:1.45; font-weight:700; color:#3d3934; } /* ========================================= TABLET ========================================= */ @media (max-width:1024px) { #cb-ma-retention { padding: 88px 5vw 78px; } #cb-ma-retention .cb-ma-retention-system { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap:38px; } #cb-ma-retention .cb-ma-retention-intro h3 { font-size:27px; } #cb-ma-retention .cb-ma-retention-bottom { grid-template-columns: repeat(2,1fr); } #cb-ma-retention .cb-ma-retention-bottom > div:nth-child(2) { border-right:0; } #cb-ma-retention .cb-ma-retention-bottom > div:nth-child(-n+2) { border-bottom: 1px solid rgba(20,19,17,.09); } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-retention { padding: 72px 20px 62px; background-size: 34px 34px; } #cb-ma-retention .cb-ma-retention-head { margin-bottom:38px; } #cb-ma-retention h2 { font-size: clamp(34px,10vw,47px); line-height:1.04; } #cb-ma-retention .cb-ma-retention-head > p { font-size:15px; line-height:1.7; } /* MAIN */ #cb-ma-retention .cb-ma-retention-system { display:flex; flex-direction:column; gap:38px; align-items:stretch; } #cb-ma-retention .cb-ma-retention-content { max-width:none; } #cb-ma-retention .cb-ma-retention-intro h3 { font-size:27px; } /* BOARD */ #cb-ma-retention .cb-ma-retention-board { border-radius:16px; } #cb-ma-retention .cb-ma-retention-board-head { padding: 20px; } #cb-ma-retention .cb-ma-retention-board-head strong { font-size:15px; } #cb-ma-retention .cb-ma-retention-stages { padding: 18px 18px 5px; } #cb-ma-retention .cb-ma-retention-stage { grid-template-columns: 23px 1fr; gap:9px; padding: 15px 0; } #cb-ma-retention .cb-ma-retention-stage b { grid-column:2; margin-top:-3px; } #cb-ma-retention .cb-ma-retention-action { align-items:flex-start; flex-direction:column; gap:12px; margin: 15px 18px 0; padding: 17px; } #cb-ma-retention .cb-ma-retention-result { flex-wrap:wrap; gap:8px 12px; padding: 18px; } #cb-ma-retention .cb-ma-retention-result small { width:100%; } /* BOTTOM */ #cb-ma-retention .cb-ma-retention-bottom { display:flex; flex-direction:column; margin-top:35px; } #cb-ma-retention .cb-ma-retention-bottom > div, #cb-ma-retention .cb-ma-retention-bottom > div:last-child { padding: 18px 0; border-right:0; border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-retention .cb-ma-retention-bottom > div:last-child { border-bottom:0; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-retention { padding-left:16px; padding-right:16px; } #cb-ma-retention .cb-ma-retention-board-head { padding: 18px; } #cb-ma-retention .cb-ma-retention-stages { padding: 17px 16px 4px; } #cb-ma-retention .cb-ma-retention-action { margin-left:16px; margin-right:16px; } #cb-ma-retention .cb-ma-retention-result { padding: 17px 16px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-9fce8dd */.elementor-44 .elementor-element.elementor-element-9fce8dd { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-9fce8dd *, .elementor-44 .elementor-element.elementor-element-9fce8dd *::before, .elementor-44 .elementor-element.elementor-element-9fce8dd *::after { box-sizing:border-box; } /* ========================================= SECTION ========================================= */ #cb-ma-performance { width:100%; margin:0; padding:108px 6vw 92px; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), #141311; background-size:42px 42px; color:#fff; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } /* ========================================= WRAPPER ========================================= */ #cb-ma-performance .cb-ma-performance-wrap { width:100%; max-width:1280px; margin:0 auto; } /* ========================================= HEADER ========================================= */ #cb-ma-performance .cb-ma-performance-head { max-width:810px; margin-bottom:54px; } #cb-ma-performance .cb-ma-performance-label { display:inline-flex; align-items:center; margin-bottom:18px; font-size:10px; font-weight:800; letter-spacing:.18em; color:#fca608; } #cb-ma-performance .cb-ma-performance-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#fca608; } #cb-ma-performance h2 { margin:0 0 20px; font-size:clamp(39px,4.7vw,63px); line-height:1.02; letter-spacing:-.045em; font-weight:500; } #cb-ma-performance h2 strong { font-weight:850; } #cb-ma-performance .cb-ma-performance-head > p { max-width:710px; margin:0; font-size:16px; line-height:1.75; color:#918b83; } /* ========================================= MAIN SYSTEM ========================================= */ #cb-ma-performance .cb-ma-performance-system { display:grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap:72px; align-items:center; } /* ========================================= LEFT CONTENT ========================================= */ #cb-ma-performance .cb-ma-performance-insights { max-width:520px; } #cb-ma-performance .cb-ma-performance-intro > span { display:block; margin-bottom:14px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#fca608; } #cb-ma-performance .cb-ma-performance-intro h3 { margin:0 0 16px; font-size:32px; line-height:1.08; letter-spacing:-.035em; font-weight:500; } #cb-ma-performance .cb-ma-performance-intro h3 strong { font-weight:800; } #cb-ma-performance .cb-ma-performance-intro p { max-width:480px; margin:0; font-size:13px; line-height:1.75; color:#858078; } /* ========================================= POINTS ========================================= */ #cb-ma-performance .cb-ma-performance-points { display:flex; flex-direction:column; margin-top:35px; border-top: 1px solid rgba(255,255,255,.09); } #cb-ma-performance .cb-ma-performance-points > div { display:grid; grid-template-columns:30px 1fr; gap:14px; padding:17px 0; border-bottom: 1px solid rgba(255,255,255,.09); } #cb-ma-performance .cb-ma-performance-points > div > span { font-size:9px; font-weight:800; color:#fca608; } #cb-ma-performance .cb-ma-performance-points strong { display:block; margin-bottom:5px; font-size:12px; font-weight:750; } #cb-ma-performance .cb-ma-performance-points small { display:block; font-size:10px; line-height:1.5; color:#77716a; } /* ========================================= PERFORMANCE BOARD ========================================= */ #cb-ma-performance .cb-ma-performance-board { border-radius:20px; background:#f7f7f5; color:#141311; box-shadow: 0 28px 60px rgba(0,0,0,.22); overflow:hidden; } /* ========================================= BOARD HEADER ========================================= */ #cb-ma-performance .cb-ma-performance-board-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px; border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-performance .cb-ma-performance-board-head span { display:block; margin-bottom:6px; font-size:8px; font-weight:800; letter-spacing:.15em; color:#9a948c; } #cb-ma-performance .cb-ma-performance-board-head strong { font-size:17px; font-weight:750; letter-spacing:-.02em; } #cb-ma-performance .cb-ma-performance-board-head b { font-size:7px; font-weight:800; letter-spacing:.12em; color:#d88a00; } /* ========================================= KPI AREA ========================================= */ #cb-ma-performance .cb-ma-performance-kpis { display:grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-performance .cb-ma-performance-kpis > div { padding:24px; border-right: 1px solid rgba(20,19,17,.09); } #cb-ma-performance .cb-ma-performance-kpis > div:last-child { border-right:0; } #cb-ma-performance .cb-ma-performance-kpis span { display:block; margin-bottom:10px; font-size:7px; font-weight:800; letter-spacing:.13em; color:#918b83; } #cb-ma-performance .cb-ma-performance-kpis strong { display:block; margin-bottom:7px; font-size:25px; line-height:1; font-weight:850; } #cb-ma-performance .cb-ma-performance-kpis small { font-size:8px; font-weight:800; color:#d88a00; } /* ========================================= PERFORMANCE LIST ========================================= */ #cb-ma-performance .cb-ma-performance-list { padding:9px 25px; } #cb-ma-performance .cb-ma-performance-row { display:grid; grid-template-columns: 1fr 65px 48px; align-items:center; gap:15px; padding:18px 0; border-bottom: 1px solid rgba(20,19,17,.08); } #cb-ma-performance .cb-ma-performance-row:last-child { border-bottom:0; } #cb-ma-performance .cb-ma-performance-row strong { display:block; margin-bottom:4px; font-size:11px; font-weight:750; } #cb-ma-performance .cb-ma-performance-row small { display:block; font-size:8.5px; color:#8b857d; } #cb-ma-performance .cb-ma-performance-row > span { font-size:11px; font-weight:800; text-align:right; } #cb-ma-performance .cb-ma-performance-row > b { font-size:8px; font-weight:800; text-align:right; color:#d88a00; } /* ========================================= INSIGHT ========================================= */ #cb-ma-performance .cb-ma-performance-insight { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:21px 25px; background:#141311; color:#fff; } #cb-ma-performance .cb-ma-performance-insight span { display:block; margin-bottom:7px; font-size:7px; font-weight:800; letter-spacing:.13em; color:#fca608; } #cb-ma-performance .cb-ma-performance-insight strong { display:block; max-width:460px; font-size:10px; line-height:1.55; font-weight:600; color:#d2cdc5; } #cb-ma-performance .cb-ma-performance-insight > b { flex:none; font-size:21px; font-weight:850; color:#fca608; } /* ========================================= BOTTOM ========================================= */ #cb-ma-performance .cb-ma-performance-bottom { display:grid; grid-template-columns: repeat(4,1fr); margin-top:48px; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); } #cb-ma-performance .cb-ma-performance-bottom > div { padding:22px 24px; border-right: 1px solid rgba(255,255,255,.09); } #cb-ma-performance .cb-ma-performance-bottom > div:last-child { border-right:0; } #cb-ma-performance .cb-ma-performance-bottom span { display:block; margin-bottom:7px; font-size:8px; font-weight:800; letter-spacing:.14em; color:#fca608; } #cb-ma-performance .cb-ma-performance-bottom strong { display:block; font-size:12px; line-height:1.45; font-weight:700; color:#d4cfc7; } /* ========================================= TABLET ========================================= */ @media (max-width:1024px) { #cb-ma-performance { padding: 88px 5vw 78px; } #cb-ma-performance .cb-ma-performance-system { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap:38px; } #cb-ma-performance .cb-ma-performance-intro h3 { font-size:27px; } #cb-ma-performance .cb-ma-performance-bottom { grid-template-columns: repeat(2,1fr); } #cb-ma-performance .cb-ma-performance-bottom > div:nth-child(2) { border-right:0; } #cb-ma-performance .cb-ma-performance-bottom > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.09); } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-performance { padding: 72px 20px 62px; background-size: 34px 34px; } #cb-ma-performance .cb-ma-performance-head { margin-bottom:38px; } #cb-ma-performance h2 { font-size: clamp(34px,10vw,47px); line-height:1.04; } #cb-ma-performance .cb-ma-performance-head > p { font-size:15px; line-height:1.7; } /* MAIN */ #cb-ma-performance .cb-ma-performance-system { display:flex; flex-direction:column; gap:38px; align-items:stretch; } #cb-ma-performance .cb-ma-performance-insights { max-width:none; } #cb-ma-performance .cb-ma-performance-intro h3 { font-size:27px; } /* BOARD */ #cb-ma-performance .cb-ma-performance-board { border-radius:16px; } #cb-ma-performance .cb-ma-performance-board-head { padding: 20px; } #cb-ma-performance .cb-ma-performance-board-head strong { font-size:15px; } /* KPIs */ #cb-ma-performance .cb-ma-performance-kpis { grid-template-columns: 1fr; } #cb-ma-performance .cb-ma-performance-kpis > div, #cb-ma-performance .cb-ma-performance-kpis > div:last-child { padding: 18px 20px; border-right:0; border-bottom: 1px solid rgba(20,19,17,.09); } #cb-ma-performance .cb-ma-performance-kpis > div:last-child { border-bottom:0; } /* LIST */ #cb-ma-performance .cb-ma-performance-list { padding: 7px 18px; } #cb-ma-performance .cb-ma-performance-row { grid-template-columns: 1fr auto; gap:10px; padding: 16px 0; } #cb-ma-performance .cb-ma-performance-row > span { grid-column:2; grid-row:1; } #cb-ma-performance .cb-ma-performance-row > b { grid-column:2; grid-row:2; } #cb-ma-performance .cb-ma-performance-row > div { grid-column:1; grid-row:1 / span 2; } /* INSIGHT */ #cb-ma-performance .cb-ma-performance-insight { align-items:flex-start; flex-direction:column; gap:12px; padding: 19px 18px; } #cb-ma-performance .cb-ma-performance-insight strong { max-width:none; } /* BOTTOM */ #cb-ma-performance .cb-ma-performance-bottom { display:flex; flex-direction:column; margin-top:35px; } #cb-ma-performance .cb-ma-performance-bottom > div, #cb-ma-performance .cb-ma-performance-bottom > div:last-child { padding: 18px 0; border-right:0; border-bottom: 1px solid rgba(255,255,255,.09); } #cb-ma-performance .cb-ma-performance-bottom > div:last-child { border-bottom:0; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-performance { padding-left:16px; padding-right:16px; } #cb-ma-performance .cb-ma-performance-board-head { padding: 18px; } #cb-ma-performance .cb-ma-performance-kpis > div, #cb-ma-performance .cb-ma-performance-kpis > div:last-child { padding: 17px 18px; } #cb-ma-performance .cb-ma-performance-list { padding: 6px 16px; } #cb-ma-performance .cb-ma-performance-insight { padding: 18px 16px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c6fba3d */.elementor-44 .elementor-element.elementor-element-c6fba3d { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; position:static !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; align-self:stretch !important; overflow:visible !important; box-sizing:border-box !important; } .elementor-44 .elementor-element.elementor-element-c6fba3d *, .elementor-44 .elementor-element.elementor-element-c6fba3d *::before, .elementor-44 .elementor-element.elementor-element-c6fba3d *::after { box-sizing:border-box; } /* ========================================= SECTION ========================================= */ #cb-ma-final { width:100%; margin:0; padding: 105px 6vw 105px; background:#fca608; color:#141311; font-family:"Public Sans",Arial,Helvetica,sans-serif; overflow:hidden; } /* ========================================= WRAPPER ========================================= */ #cb-ma-final .cb-ma-final-wrap { width:100%; max-width:1280px; margin:0 auto; display:grid; grid-template-columns: minmax(0,1fr) minmax(390px,.72fr); gap:80px; align-items:center; } /* ========================================= LEFT CONTENT ========================================= */ #cb-ma-final .cb-ma-final-content { max-width:720px; } #cb-ma-final .cb-ma-final-label { display:inline-flex; align-items:center; margin-bottom:20px; font-size:9px; font-weight:850; letter-spacing:.18em; color:rgba(20,19,17,.62); } #cb-ma-final .cb-ma-final-label::before { content:""; width:25px; height:2px; margin-right:10px; background:#141311; } #cb-ma-final h2 { margin:0 0 22px; font-size:clamp(42px,5vw,68px); line-height:1.01; letter-spacing:-.05em; font-weight:500; } #cb-ma-final h2 strong { font-weight:850; } #cb-ma-final .cb-ma-final-content > p { max-width:650px; margin:0; font-size:16px; line-height:1.75; color:rgba(20,19,17,.7); } /* ========================================= ACTIONS ========================================= */ #cb-ma-final .cb-ma-final-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:34px; } #cb-ma-final .cb-ma-final-primary { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:52px; padding: 0 23px; border: 1px solid #141311; border-radius:6px; background:#141311; color:#fff !important; text-decoration:none !important; font-size:11px; font-weight:800; letter-spacing:.01em; transition: transform .25s ease, background .25s ease, color .25s ease; } #cb-ma-final .cb-ma-final-primary span { font-size:17px; line-height:1; transition: transform .25s ease; } #cb-ma-final .cb-ma-final-primary:hover { transform:translateY(-3px); background:#24211d; } #cb-ma-final .cb-ma-final-primary:hover span { transform:translateX(4px); } #cb-ma-final .cb-ma-final-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding: 0 22px; border: 1px solid rgba(20,19,17,.42); border-radius:6px; background:transparent; color:#141311 !important; text-decoration:none !important; font-size:11px; font-weight:750; transition: transform .25s ease, background .25s ease, border-color .25s ease; } #cb-ma-final .cb-ma-final-secondary:hover { transform:translateY(-3px); background:rgba(20,19,17,.06); border-color:#141311; } /* ========================================= RIGHT SYSTEM ========================================= */ #cb-ma-final .cb-ma-final-system { width:100%; padding:0; border: 1px solid rgba(255,255,255,.1); border-radius:18px; background:#141311; color:#fff; box-shadow: 0 25px 55px rgba(20,19,17,.18); overflow:hidden; } /* ========================================= SYSTEM HEADER ========================================= */ #cb-ma-final .cb-ma-final-system-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 23px 25px; border-bottom: 1px solid rgba(255,255,255,.08); } #cb-ma-final .cb-ma-final-system-head span { display:block; margin-bottom:6px; font-size:7px; font-weight:800; letter-spacing:.15em; color:#77716a; } #cb-ma-final .cb-ma-final-system-head strong { font-size:16px; font-weight:750; letter-spacing:-.02em; } #cb-ma-final .cb-ma-final-system-head b { font-size:7px; font-weight:800; letter-spacing:.12em; color:#fca608; } /* ========================================= SERVICES ========================================= */ #cb-ma-final .cb-ma-final-services { padding: 8px 24px; } #cb-ma-final .cb-ma-final-services a { display:grid; grid-template-columns: 27px 1fr 20px; align-items:center; gap:11px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); color:#fff !important; text-decoration:none !important; transition: padding-left .25s ease, background .25s ease; } #cb-ma-final .cb-ma-final-services a:last-child { border-bottom:0; } #cb-ma-final .cb-ma-final-services a:hover { padding-left:5px; } #cb-ma-final .cb-ma-final-services a > span { font-size:8px; font-weight:800; color:#fca608; } #cb-ma-final .cb-ma-final-services strong { display:block; margin-bottom:4px; font-size:10px; font-weight:700; } #cb-ma-final .cb-ma-final-services small { display:block; font-size:8px; line-height:1.4; color:#77716a; } #cb-ma-final .cb-ma-final-services a > b { font-size:14px; font-weight:400; color:#77716a; text-align:right; transition: color .25s ease, transform .25s ease; } #cb-ma-final .cb-ma-final-services a:hover > b { color:#fca608; transform:translateX(3px); } /* ========================================= FLOW ========================================= */ #cb-ma-final .cb-ma-final-flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; padding: 19px 20px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(252,166,8,.045); } #cb-ma-final .cb-ma-final-flow span, #cb-ma-final .cb-ma-final-flow strong { font-size:7px; font-weight:800; letter-spacing:.1em; } #cb-ma-final .cb-ma-final-flow span { color:#77716a; } #cb-ma-final .cb-ma-final-flow strong { color:#fca608; } #cb-ma-final .cb-ma-final-flow i { font-style:normal; font-size:11px; color:#55514b; } /* ========================================= TABLET ========================================= */ @media (max-width:1024px) { #cb-ma-final { padding: 88px 5vw; } #cb-ma-final .cb-ma-final-wrap { grid-template-columns: minmax(0,1fr) minmax(340px,.75fr); gap:45px; } #cb-ma-final h2 { font-size: clamp(40px,5.2vw,58px); } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { #cb-ma-final { padding: 72px 20px 70px; } #cb-ma-final .cb-ma-final-wrap { display:flex; flex-direction:column; gap:40px; align-items:stretch; } #cb-ma-final .cb-ma-final-content { max-width:none; } #cb-ma-final h2 { font-size: clamp(36px,10.5vw,50px); line-height:1.04; } #cb-ma-final .cb-ma-final-content > p { font-size:15px; line-height:1.7; } #cb-ma-final .cb-ma-final-actions { align-items:stretch; flex-direction:column; margin-top:28px; } #cb-ma-final .cb-ma-final-primary, #cb-ma-final .cb-ma-final-secondary { width:100%; min-height:52px; } #cb-ma-final .cb-ma-final-system { border-radius:16px; } #cb-ma-final .cb-ma-final-system-head { padding: 20px; } #cb-ma-final .cb-ma-final-system-head strong { font-size:15px; } #cb-ma-final .cb-ma-final-services { padding: 7px 18px; } #cb-ma-final .cb-ma-final-services a { grid-template-columns: 24px 1fr 18px; gap:9px; padding: 15px 0; } #cb-ma-final .cb-ma-final-flow { gap:7px; padding: 17px 14px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width:480px) { #cb-ma-final { padding-left:16px; padding-right:16px; } #cb-ma-final .cb-ma-final-system-head { padding: 18px; } #cb-ma-final .cb-ma-final-services { padding: 6px 16px; } #cb-ma-final .cb-ma-final-flow { gap:6px; padding: 16px 10px; } #cb-ma-final .cb-ma-final-flow span, #cb-ma-final .cb-ma-final-flow strong { font-size:6.5px; } } /* ========================================= REDUCED MOTION ========================================= */ @media (prefers-reduced-motion:reduce) { #cb-ma-final .cb-ma-final-primary, #cb-ma-final .cb-ma-final-secondary, #cb-ma-final .cb-ma-final-services a, #cb-ma-final .cb-ma-final-services a > b { transition:none !important; } }/* End custom CSS */