:root {
--primary-color: #a600e8;
--secondary-color: #6419c7;
--heading-color: #1c2539;
--text-color: #333333;
--background-color: #ffffff;
--light-background: #f5f5f7;
--border-color: #e4e1e9;
}
* {
box-sizing: border-box;
}
body {
font-family: Inter, system-ui, sans-serif;
background: var(--background-color);
color: var(--text-color);
}
a {
text-decoration: none;
}
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid #f2f0f5;
}
.sab-brand img {
width: 100%;
height: auto;
}
.sab-brand {
max-width: 120px;
display: block;
overflow: hidden;
}
.header-wrap {
min-height: 70px;
}
.brand {
display: flex;
flex-direction: column;
line-height: 1.07;
white-space: nowrap;
}
.brand-name {
font-size: 21px;
font-weight: 800;
letter-spacing: -0.9px;
color: var(--heading-color);
}
.brand-name span {
color: var(--primary-color);
}
.brand-caption {
font-size: 9px;
color: #777;
font-weight: 600;
letter-spacing: 1.1px;
margin-top: 5px;
}
.header-actions {
display: flex;
gap: 25px;
align-items: center;
}
.header-note {
font-size: 12px;
color: #777;
white-space: nowrap;
}
.header-note strong {
color: var(--heading-color);
font-size: 14px;
}
.header-note i {
color: #ffad16;
}
a.office-location-link {
color: var(--secondary-color);
}
.wa-link {
font-size: 13px;
font-weight: 700;
color: #149952;
white-space: nowrap;
}
.wa-link:hover {
color: #0b783e;
}
.btn-brand {
background: var(--primary-color);
color: #fff;
border: 1px solid var(--primary-color);
border-radius: 11px;
font-weight: 700;
padding: 12px 23px;
font-size: 13px;
transition: 0.2s;
}
.btn-brand:hover,
.btn-brand:focus {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: #fff;
}
.page-hero {
background:
radial-gradient(ellipse at 95% 45%,
rgba(166, 0, 232, 0.055),
transparent 55%),
linear-gradient(135deg, #fafbfe, #fff 58%);
padding: 88px 0 0px;
min-height: calc(100vh - 70px);
}
.intro-col {
padding-top: 8px;
}
.eyebrow {
display: inline-flex;
gap: 9px;
align-items: center;
color: var(--secondary-color);
border: 1px solid #e8d2f9;
background: #faf2ff;
border-radius: 50px;
padding: 10px 16px;
font-size: 12px;
font-weight: 700;
box-shadow: 0 2px 3px #3810530d;
}
.eyebrow .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-color);
}
h1 {
font-weight: 800;
font-size: clamp(34px, 3.1vw, 51px);
line-height: 1.1;
letter-spacing: -2px;
color: var(--heading-color);
margin: 31px 0 25px;
}
h1 .accent {
color: var(--primary-color);
}
.hero-description {
color: #49546b;
max-width: 560px;
margin-bottom: 28px;
}
.benefit-list {
list-style: none;
padding: 0;
margin: 0 0 40px;
display: grid;
gap: 5px;
}
.benefit-list li {
display: flex;
gap: 16px;
align-items: flex-start;
color: var(--heading-color);
font-size: 15px;
}
.benefit-list li::before {
content: "\f26b";
font-family: "bootstrap-icons";
color: #198754;
font-size: 18px;
flex-shrink: 0;
}
.trust-card {
position: relative;
border: 1px solid #e9eaf1;
background: #fff;
border-radius: 19px;
padding: 24px;
max-width: 540px;
}
.trust-top {
display: flex;
align-items: center;
gap: 13px;
}
.trust-avatar {
display: grid;
place-items: center;
height: 44px;
width: 44px;
border-radius: 50%;
background: #f1e5fa;
color: var(--secondary-color);
font-size: 20px;
flex: none;
}
.trust-title {
font-size: 13px;
color: var(--heading-color);
font-weight: 800;
}
.stars-icon {
color: #ffaa00;
font-size: 12px;
letter-spacing: 2px;
}
.trust-label {
margin-left: auto;
font-size: 11px;
color: #8793aa;
font-weight: 700;
}
.trust-copy {
font-style: italic;
font-size: 13px;
line-height: 1.7;
color: #64718a;
margin: 16px 0 0;
}
.trust-tag {
position: absolute;
right: 30px;
top: 0px;
background: #f5c84c;
color: #433008;
font-size: 10px;
padding: 6px 10px;
border-radius: 11px;
font-weight: 800;
text-transform: uppercase;
}
.privacy {
font-size: 11px;
color: #7b7982;
line-height: 1.6;
}
.partner-strip {
padding: 30px 0 38px;
background: #fff;
border-top: 1px solid #f0edf3;
border-bottom: 1px solid #eae8ee;
margin-top: 80px;
}
.partner-strip {
padding: 40px 0;
overflow: hidden;
background: #fff
}
.partner-strip .eyebrow-center {
text-align: center;
font-size: 20px;
font-weight: 700;
color: #222;
margin-bottom: 12px
}
.partner-strip .partner-note {
text-align: center;
font-size: 14px;
color: #666;
margin-bottom: 28px
}
.partner-carousel {
overflow: hidden;
width: 100%;
position: relative
}
.partner-track {
display: flex;
align-items: center;
gap: 60px;
animation: partnerLogoScroll 15s linear infinite
}
.partner-item {
flex: 0 0 150px; display: flex;
align-items: center;
justify-content: center
}
.partner-item img {
max-width: 180px;
width: 100%;
height: 90px;
object-fit: contain;
display: block;
}
.partner-carousel:hover .partner-track {
animation-play-state: paused
}
@keyframes partnerLogoScroll {
from {
transform: translateX(0)
}
to {
transform: translateX(-50%)
}
}
.intro {
text-align: center;
padding: 76px 0 44px;
}
h1,
h2,
h3,
h4 {
color: var(--heading-color);
font-weight: 800;
letter-spacing: -.045em;
}
.intro h2 {
margin-bottom: 14px;
}
.intro h2 em {
font-style: italic;
color: var(--primary-color);
}
.intro p {
max-width: 560px;
margin: 0 auto;
color: #73717b;
}
.feature-row {
padding: 12px 0 78px;
}
.feature-row+.feature-row {
padding-top: 10px;
padding-bottom: 105px;
}
.feature-media {
position: relative;
width: 100%;
max-width: 480px;
margin-inline: auto;
aspect-ratio: 1 / 1.03;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 22px 36px rgba(23, 23, 43, .12);
background: #e3dce9;
}
.feature-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .5s ease;
}
.feature-media:hover img {
transform: scale(1.035);
}
.feature-media::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 26%;
background: linear-gradient(transparent, rgba(100, 25, 199, .09));
pointer-events: none;
}
.feature-copy {
max-width: 510px;
}
.kicker {
font-size: .72rem;
letter-spacing: .115em;
font-weight: 800;
text-transform: uppercase;
color: var(--secondary-color);
display: inline-flex;
gap: 9px;
align-items: center;
margin-bottom: 13px;
}
.kicker i {
color: var(--primary-color);
font-size: 1rem;
}
.feature-copy>p {
color: #72717b;
margin-bottom: 26px;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 32px;
}
.stat strong {
display: block;
color: var(--heading-color);
font-size: clamp(1.5rem, 2.7vw, 2.25rem);
line-height: 1.05;
font-weight: 500;
letter-spacing: -.05em;
}
.stat span {
display: block;
margin-top: 6px;
font-size: .69rem;
letter-spacing: .065em;
text-transform: uppercase;
color: #777482;
font-weight: 600;
}
.feature-row .feature-copy .support-card {
display: flex;
align-items: center;
gap: 14px;
border: 1px solid #e4dfea;
background: #fff;
padding: 16px 18px;
border-radius: 13px;
margin-top: 12px;
box-shadow: 0 3px 12px rgba(28, 37, 57, .025);
}
.feature-row .feature-copy .support-icon {
display: flex;
flex: 0 0 38px;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--secondary-color);
background: #f0e6ff;
font-size: 1.05rem;
}
.feature-row .support-icon.alt {
color: #8f00ca;
background: #f5e4ff;
}
.feature-row .support-card strong {
display: block;
color: var(--heading-color);
font-size: .89rem;
font-weight: 800;
margin-bottom: 3px;
}
.feature-row .support-card p {
margin: 0;
color: #75717d;
font-size: .75rem;
line-height: 1.55;
}
.accent-rule {
width: 40px;
height: 4px;
border-radius: 99px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
margin-bottom: 18px;
}
.section-pad {
padding: 85px 0
}
.comparison-section {
padding: 72px 0 85px;
background: var(--light-background);
}
.section-title {
color: var(--heading-color);
font-weight: 750;
letter-spacing: -.035em;
font-size: clamp(1.7rem, 3vw, 2.65rem);
line-height: 1.2
}
h2 span {
color: var(--primary-color)
}
.section-desc {
font-size: 1rem;
color: #596173;
max-width: 820px;
margin: 12px auto 0
}
.section-eyebrow {
color: var(--secondary-color);
text-transform: uppercase;
letter-spacing: .16em;
font-weight: 700;
font-size: .76rem;
margin-bottom: 12px
}
.table-container {
margin-top: 36px;
border: 1px solid #e5e2ea;
border-radius: 13px;
overflow: hidden;
box-shadow: 0 12px 36px rgba(28, 37, 57, .055)
}
.table-responsive {
margin: 0
}
.comparison-table {
margin: 0;
min-width: 900px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed
}
.comparison-table th,
.comparison-table td {
border-right: 1px solid #e6e4ea;
border-bottom: 1px solid #e6e4ea;
vertical-align: middle;
padding: 19px 18px;
line-height: 1.55;
font-size: .93rem
}
.comparison-table tr>*:last-child {
border-right: 0
}
.comparison-table tbody tr:last-child>* {
border-bottom: 0
}
.comparison-table thead th {
background: #f6edfc;
color: var(--heading-color);
font-size: 1.05rem;
font-weight: 750;
padding: 19px 18px
}
.comparison-table thead th:first-child {
width: 14%;
background: #f9f8fb
}
.comparison-table thead th:not(:first-child) {
width: 28.666%
}
.comparison-table thead th i {
color: var(--primary-color);
margin-right: 9px
}
.comparison-table tbody th {
font-weight: 700;
color: var(--heading-color);
background: #fcfbfe
}
.comparison-table tbody td {
background: #fff
}
.comparison-table tbody tr:nth-child(even) td {
background: #fcfbfd
}
.comparison-table tbody tr:hover td {
background: #faf4fe;
transition: background .2s
}
.compare-note {
margin-top: 18px;
color: #6a7080;
font-size: .82rem
}
.mobile-tip {
display: none;
font-size: .82rem;
color: var(--secondary-color);
margin-top: 12px
}
.mobile-tip i {
margin-right: 6px
}
.support-section {
background: var(--light-background)
}
.activities-section {
padding: 72px 0;
background: var(--light-background);
overflow: hidden;
}
.activities-title {
color: var(--heading-color);
font-size: clamp(26px, 3vw, 38px);
font-weight: 750;
letter-spacing: -.035em;
text-align: center;
}
.activities-title span {
color: var(--primary-color);
}
.activities-subtitle {
color: #667085;
font-size: 15px;
text-align: center;
}
.activities-viewport {
width: 100%;
overflow: visible;
}
.activities-track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
transform: none !important;
}
.activity-card {
overflow: hidden;
background: white;
border: 1px solid #e9e5ed;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(28, 37, 57, .04);
height: 100%;
}
.activity-card img {
display: block;
width: 100%;
height: 205px;
object-fit: cover;
background: #e8e7ea;
}
.activity-card-body {
padding: 12px 18px 13px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 43px;
text-align: center;
justify-content: center;
}
.activity-name {
font-size: 16px;
font-weight: 700;
line-height: 1.35;
color: var(--heading-color);
margin: 0;
}
.activity-icon {
color: var(--primary-color);
font-size: 19px;
flex: none;
}
.activities-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
margin-top: 26px;
font-size: 13px;
color: #667085;
}
.activities-dot {
width: 7px;
height: 7px;
border: 0;
border-radius: 20px;
background: #d6c6de;
transition: .2s;
padding: 0;
}
.activities-dot.active {
width: 23px;
background: var(--primary-color);
}
.support-card {
height: 100%;
padding: 32px;
border: 1px solid #e3e3e9;
border-radius: 18px;
background: #fff;
transition: transform .2s, box-shadow .2s
}
.support-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px #1c253912
}
.icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background: #f8ebff;
border: 1px solid #eedbfa;
border-radius: 13px;
color: var(--primary-color);
font-size: 21px;
margin-bottom: 24px
}
.support-card h3 { 
margin-bottom: 12px
}
.support-card p { 
color: #606775;
margin: 0
}
.support-title { 
margin: 52px 0 25px;
text-align: center
}
.service-pill {
min-height: 47px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 13px;
background: #fff;
border: 1px solid #dedee6;
border-radius: 9px;
font-size: 13px;
font-weight: 500;
color: var(--heading-color)
}
.service-pill i {
color: var(--primary-color);
font-size: 16px;
flex: none
} 
.testimonials-section {
background: #101018;
color: #fff
}
.testimonials-section h2 {
color: #fff;
}
.testimonials-section .subhead {
color: #b6b5c3;
max-width: 650px;
margin: 12px auto 44px
}
.review-card {
background: #1b1b25;
border: 1px solid #2b2a36;
border-radius: 15px;
padding: 25px;
height: 100%;
display: flex;
flex-direction: column;
transition: border-color .2s, transform .2s
}
.review-card:hover {
border-color: #a600e866;
transform: translateY(-3px)
}
.stars {
color: #d475f4;
letter-spacing: 2px;
font-size: 14px;
margin-bottom: 18px
}
.review-card blockquote {
font-size: 14px;
line-height: 1.7;
color: #efedf4;
margin: 0 0 28px;
flex: 1
}
.review-author {
border-top: 1px solid #34333f;
padding-top: 17px;
display: flex;
align-items: center;
gap: 11px
}
.review-avatar {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #592079;
color: #fff;
font-weight: 700
}
.review-author strong {
display: block;
color: #fff;
font-size: 13px
}
.review-author small {
color: #aaa8b6;
font-size: 12px
}
.button-brand {
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
border-radius: 100px;
padding: 12px 25px;
font-size: 14px;
font-weight: 650;
text-decoration: none;
display: inline-flex;
gap: 10px;
align-items: center;
transition: background .2s, transform .2s
}
.button-brand:hover {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: #fff;
transform: translateY(-2px)
}
.demo-note {
color: #aeaabb;
font-size: 12px;
margin-top: 16px
}
.sab-process {
padding: 78px 0 0;
overflow: hidden;
background: linear-gradient(180deg, #fff 0%, #fcfbfe 100%)
}
.sab-wrap {
max-width: 1050px
}
.sab-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: 30px;
background: #f6e9ff;
color: var(--secondary-color);
font-weight: 800;
font-size: 11px;
letter-spacing: .085em;
text-transform: uppercase
}
.sab-heading {
margin: 13px auto 10px;
max-width: 800px
}
.sab-highlight {
color: var(--primary-color)
}
.sab-subtitle {
color: #6d707a;
max-width: 565px;
margin: 0 auto
}
.sab-content {
max-width: 400px
}
.sab-number {
width: 49px;
height: 51px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 15px;
background: var(--primary-color);
box-shadow: 0 10px 18px rgba(166, 0, 232, .18);
color: white;
font-size: 24px;
font-weight: 800;
margin-bottom: 20px
}
.sab-number.outline {
background: #fff;
color: var(--primary-color);
border: 1px solid #d8b4f4;
box-shadow: none
}
.sab-step h3 {
margin-bottom: 16px
}
.sab-step p {
font-size: 15px;
line-height: 1.8;
color: #777985;
margin-bottom: 16px
}
.sab-step {
margin-top: 60px;
}
.sab-checks {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px
}
.sab-checks li {
font-size: 13px;
color: var(--heading-color);
display: flex;
align-items: center;
gap: 10px
}
.sab-checks i {
color: #18ae77;
font-size: 17px
}
.sab-visual {
min-height: 265px;
display: flex;
align-items: center;
justify-content: center
}
.sab-glow-purple {
background: radial-gradient(ellipse at center, rgba(166, 0, 232, .1) 0%, transparent 69%)
}
.sab-glow-green {
background: radial-gradient(ellipse at center, rgba(22, 163, 116, .12) 0%, transparent 70%)
}
.sab-demo-card {
background: #fff;
border: 1px solid #e4e2e9;
border-radius: 20px;
box-shadow: 0 22px 42px rgba(36, 31, 53, .13);
padding: 27px 29px;
max-width: 390px;
width: 100%
}
.sab-demo-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px
}
.sab-demo-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: #f2e4ff;
display: grid;
place-items: center;
color: var(--secondary-color);
font-size: 21px
}
.sab-demo-title {
font-size: 15px;
font-weight: 800;
color: var(--heading-color)
}
.sab-demo-muted {
font-size: 11px;
color: #93919b
}
.sab-demo-line {
font-size: 12px;
color: #777985;
display: flex;
gap: 9px;
align-items: center;
margin: 12px 0
}
.sab-demo-line i {
color: #18ae77
}
.sab-paper-icon {
font-size: 38px;
color: var(--primary-color);
display: block;
margin-bottom: 15px
}
.sab-paper-card {
max-width: 340px
}
.sab-paper-card h4 {
font-size: 17px;
margin-bottom: 18px
}
.sab-status {
display: flex;
align-items: center;
gap: 9px;
margin: 12px 0;
font-size: 12px;
color: #565d67
}
.sab-status i {
color: #18ae77
}
.sab-status.pending i {
color: #a0a2ae
}
.sab-photo {
max-width: 410px;
height: 275px;
width: 100%;
border-radius: 18px;
object-fit: cover;
box-shadow: 0 21px 45px rgba(24, 38, 51, .15)
}
.sab-photo-box {
position: relative;
max-width: 410px;
width: 100%;
margin: auto
}
.sab-photo-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: 0 0 18px 18px;
padding: 37px 20px 17px;
background: linear-gradient(0deg, rgba(18, 19, 35, .84), transparent);
color: #fff;
display: flex;
justify-content: space-between;
align-items: end
}
.sab-photo-caption strong {
font-size: 14px
}
.sab-photo-caption small {
display: block;
font-size: 11px;
opacity: .88
}
.sab-photo-caption .bi-check-circle-fill {
font-size: 30px;
color: #1dd39c
}
.sab-final-cta {
padding: 95px 20px;
color: #fff;
text-align: center
}
.sab-final-cta h2 {
color: white;
font-size: clamp(26px, 3vw, 38px);
line-height: 1.3;
max-width: 890px;
margin: 0 auto 22px
}
.sab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 50px;
background: var(--primary-color);
color: white;
text-decoration: none;
padding: 14px 28px;
font-size: 14px;
font-weight: 750;
transition: .2s ease
}
.sab-btn:hover {
background: var(--secondary-color);
color: #fff;
transform: translateY(-2px)
}
.faq-section {
background: #f8f9fb;
padding: 72px 0 85px
}
.faq-intro {
margin-bottom: 45px
}
.faq-container {
max-width: 790px
}
.accordion {
--bs-accordion-border-color: transparent;
--bs-accordion-bg: transparent;
--bs-accordion-btn-focus-box-shadow: none;
--bs-accordion-active-bg: #fff;
--bs-accordion-active-color: var(--heading-color)
}
.accordion-item {
border: 1px solid #e0e1e7 !important;
border-radius: 13px !important;
background: #fff;
box-shadow: 0 2px 3px rgba(28, 37, 57, .06);
margin-bottom: 10px;
overflow: hidden
}
.accordion-button {
font-size: .97rem;
font-weight: 650;
color: var(--heading-color);
padding: 20px 24px;
background: #fff
}
.accordion-button:not(.collapsed) {
box-shadow: none;
color: var(--secondary-color)
}
.accordion-button::after {
background-size: 1rem;
width: 1rem;
height: 1rem
}
.accordion-body {
padding: 0 24px 22px;
line-height: 1.75;
color: #596072;
font-size: .93rem
}
.launch-cta {
background: linear-gradient(120deg, var(--secondary-color), var(--primary-color));
padding: 95px 20px;
text-align: center;
color: #fff
}
.launch-cta h2 {
color: #fff;
font-size: clamp(2.35rem, 5vw, 4.2rem);
margin: 0 0 18px
}
.launch-cta p {
max-width: 540px;
margin: 0 auto 30px;
font-size: 1.08rem;
line-height: 1.65
}
.btn-white {
color: var(--secondary-color);
background: #fff;
border: 2px solid #fff;
font-weight: 700;
border-radius: 12px;
padding: 13px 23px
}
.btn-white:hover {
background: #f3e9fc;
border-color: #f3e9fc;
color: var(--secondary-color)
}
.btn-outline-white {
color: #fff;
background: transparent;
border: 2px solid #fff;
font-weight: 700;
border-radius: 12px;
padding: 13px 23px
}
.btn-outline-white:hover {
background: #fff;
color: var(--secondary-color)
}
.site-footer {
background: #f8f8fa;
padding: 65px 0 24px
}
.footer-brand {
font-weight: 850;
color: var(--heading-color);
font-size: 1.48rem;
letter-spacing: -.055em;
text-decoration: none
}
.footer-brand span {
color: var(--primary-color)
}
.site-footer p,
.site-footer address {
color: #6b6e79;
font-size: .93rem;
line-height: 1.8
}
.footer-heading {
font-size: .94rem;
font-weight: 750;
color: var(--heading-color);
margin-bottom: 17px
}
.footer-link {
color: #646876;
text-decoration: none
}
.footer-link:hover {
color: var(--primary-color)
}
.social-list {
display: flex;
gap: 14px;
flex-wrap: wrap
}
.social-list a {
font-size: 1.16rem;
color: #737682;
transition: color .2s
}
.social-list a:hover {
color: var(--primary-color)
}
.footer-bottom {
border-top: 1px solid #dadce2;
margin-top: 35px;
padding-top: 24px;
font-size: .81rem;
color: #757987
}
.footer-bottom a {
color: inherit;
text-decoration: none
}
.footer-bottom a:hover {
color: var(--secondary-color)
} .video-section .video-item,
.video-slider .video-item.slick-slide {
position: relative;
margin: 0 15px;
box-shadow: none
}
.video-slider .slick-slide img {
display: block;
width: 100%;
height: 250px
}
.video-slider .slick-slide:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #00000052;
z-index: 99999;
}
.video-section a.video-btn,
.video-slider a.video-btn {
position: absolute;
display: inline-flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
top: 80%;
left: 0;
right: 0;
z-index: 99999;
margin: 0 auto;
background: #fbeaff;
color: #a600e8;
text-decoration: none;
transform: translateY(-80%)
}
a.video-btn {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%
}
.video-popop span {
margin-left: 30px;
font-weight: 500;
color: #df0a0a
}
@keyframes pulse-border {
0% {
transform: translate(-50%, -50%) scale(.5);
opacity: 1
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0
}
}
a.video-btn::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 80px;
border: 2px solid #a600e8;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: 1.5s infinite pulse-border;
z-index: -1
}
.contact-hero .container,
.footer-widget,
.key-services-section .container,
.mv-container,
.pdf-content,
a.video-btn i {
position: relative;
z-index: 2
}
.modal-backdrop.show {
opacity: .8;
background: #000
}
#videoModal .modal-content {
background: 0 0;
border: 0;
box-shadow: none
}
.video-close {
position: absolute;
top: -40px;
right: 0;
z-index: 1060;
filter: invert(1);
opacity: 1
}
.banner-content,
.section-description,
.section-tag,
.section-title {
z-index: 1;
position: relative
}
#videoModal iframe {
border-radius: 10px
} .video-slider {
position: relative;
} .video-slider .slick-prev,
.video-slider .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #ddd;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0;
line-height: 0;
} .video-slider .slick-prev {
left: -22px;
} .video-slider .slick-next {
right: -22px;
} .video-slider .slick-prev:before,
.video-slider .slick-next:before {
font-family: Arial, sans-serif;
font-size: 25px;
font-weight: 400;
color: #222;
opacity: 1;
line-height: 1; 
}
.video-slider .slick-prev:before {
content: "\276E"; font-size: 21px;
}
.video-slider .slick-next:before {
content: "\276F"; font-size: 21px;
} .video-slider .slick-prev:hover,
.video-slider .slick-next:hover {
background: #222;
border-color: #222;
}
.video-slider .slick-prev:hover:before,
.video-slider .slick-next:hover:before {
color: #fff;
} .video-slider .slick-disabled {
opacity: 0.35;
cursor: not-allowed;
}  .creative-contact-dock {
position: fixed;
right: 22px;
bottom: 10%;
transform: translateY(-10%);
display: flex;
flex-direction: column;
gap: 18px;
z-index: 99999;
}
.dock-contact {
position: relative;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
text-decoration: none;
isolation: isolate;
transition: transform 0.4s ease, width 0.4s ease, border-radius 0.4s ease;
}
.dock-contact::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.22);
z-index: -1;
}
.whatsapp-dock::after,
.phone-dock::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
filter: blur(8px);
z-index: -2;
animation-duration: 2.2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.whatsapp-dock::after {
background: rgba(37, 211, 102, 0.30);
animation-name: whatsappGlow;
}
.phone-dock::after {
background: rgba(166, 0, 232, 0.35);
animation-name: phoneGlow;
}
.dock-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
z-index: 3;
background: rgb(255 255 255 / 0.12);
border: 1px solid rgb(255 255 255 / 0.28);
transition: transform 0.4s ease, background 0.4s ease;
color: #fff;
}
.dock-icon i {
font-size: 21px;
line-height: 1;
transition: transform 0.4s ease;
}
.dock-orbit {
position: absolute;
inset: -7px;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.55);
animation: orbitRotate 7s linear infinite;
pointer-events: none;
}
.dock-orbit::before {
content: "";
position: absolute;
width: 7px;
height: 7px;
top: 5px;
right: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 8px #fff, 0 0 15px currentColor;
}
.dock-label {
position: absolute;
right: 78px;
top: 50%;
transform: translateY(-50%) translateX(15px);
padding: 10px 17px;
border-radius: 30px;
white-space: nowrap;
font-size: 13px;
font-weight: 600;
color: #fff;
background: rgba(20, 20, 30, 0.85);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease, transform 0.35s ease;
}
.dock-label::after {
content: "";
position: absolute;
right: -6px;
top: 50%;
width: 11px;
height: 11px;
transform: translateY(-50%) rotate(45deg);
background: rgba(20, 20, 30, 0.85);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.dock-contact:hover {
transform: scale(1.12);
color: #fff;
text-decoration: none;
}
.dock-contact:hover .dock-icon {
transform: scale(1.08);
}
.dock-contact:hover .dock-icon i {
transform: scale(1.15) rotate(-8deg);
}
.dock-contact:hover .dock-label {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.whatsapp-dock {
color: #25D366;
}
.whatsapp-dock .dock-icon {
background: linear-gradient(145deg, #25D366, #16b957);
}
.phone-dock {
color: #a600e8;
}
.phone-dock .dock-icon {
background: linear-gradient(145deg, #a600e8, #6419c7);
}
@keyframes orbitRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes whatsappGlow {
0%, 100% {
transform: scale(0.95);
opacity: 0.45;
}
50% {
transform: scale(1.18);
opacity: 0.9;
}
}
@keyframes phoneGlow {
0%, 100% {
transform: scale(0.95);
opacity: 0.45;
}
50% {
transform: scale(1.18);
opacity: 0.9;
}
} @media (max-width: 991.98px) {
.page-hero {
padding: 54px 0;
}
.intro-col {
padding-top: 0;
margin-bottom: 45px;
}
.intro-col h1 {
max-width: 680px;
}
.trust-card {
max-width: 100%;
}
.intro {
padding: 65px 0 33px;
}
.feature-row {
padding: 12px 0 60px;
}
.feature-row+.feature-row {
padding: 0 0 75px;
}
.feature-copy {
max-width: none;
}
.feature-media {
max-width: 600px;
aspect-ratio: 1.25;
}
.activities-track {
grid-auto-columns: calc((100% - 20px) / 2);
gap: 20px;
}
.activity-card img {
height: 210px;
}
}
@media (min-width: 768px) {
.mb-btn {
display: none; 
}
}
@media (max-width: 767.98px) {
.mb-btn { position: fixed;
bottom: 0;
right: 0;
width: 100%;
border-radius: 0;
}
.header-wrap {
min-height: 65px;
}
.header-actions {
gap: 12px;
}
.header-note {
display: none;
}
.page-hero {
padding: 36px 0 52px;
}
.brand-name {
font-size: 17px;
}
.brand-caption {
font-size: 8px;
}
.btn-brand.header-cta {
padding: 10px 11px;
font-size: 11px;
}
.wa-link {
font-size: 0;
}
.wa-link i {
font-size: 20px;
}
.eyebrow {
font-size: 11px;
}
.hero-description {
line-height: 1.65;
}
.calculator-card {
padding: 23px 18px;
}
.step-heading {
font-size: 19px;
}
.trust-card {
padding: 20px;
}
.benefit-list {
gap: 14px;
margin-bottom: 29px;
}
.options-list {
max-height: 330px;
}
.micro-trust {
gap: 10px 15px;
}
.partner-strip {
padding: 24px 0;
}
.partner-item {
font-size: .82rem;
}
.partner-item.is-mark {
font-size: 1.3rem;
}
.partner-item i {
font-size: 1.1rem;
}
.partner-item small {
font-size: .54rem;
}
.intro {
padding: 52px 8px 34px;
}
.intro p {
font-size: .88rem;
}
.feature-copy h3 {
font-size: 2rem;
}
.feature-row {
padding-bottom: 55px;
}
.feature-row+.feature-row {
padding-bottom: 65px;
}
.feature-media {
aspect-ratio: 1.05;
}
.stat-grid {
gap: 22px 13px;
}
.stat span {
font-size: .59rem;
}
.support-card {
padding: 12px;
}
.section-pad {
padding: 52px 0
}
.support-card {
padding: 24px
}
.support-title {
margin: 36px 0 20px
}
.review-card {
padding: 22px
}
.sab-process {
padding: 56px 0 66px
}
.sab-steps {
margin-top: 38px
}
.sab-step {
margin-bottom: 58px
}
.sab-content {
max-width: none
}
.sab-visual {
min-height: 0;
margin-top: 25px
}
.sab-step:nth-child(2) .sab-visual {
margin-top: 0;
margin-bottom: 25px
}
.sab-demo-card {
padding: 23px
}
.sab-final-cta {
padding: 70px 18px
}
.sab-photo {
height: 240px
}
.faq-section {
padding: 65px 0 75px
}
.faq-intro {
margin-bottom: 30px
}
.accordion-button {
padding: 17px 18px;
font-size: .9rem
}
.accordion-body {
padding: 0 18px 18px
}
.launch-cta {
padding: 70px 16px
}
.launch-buttons .btn {
width: 100%
}
.site-footer {
padding: 48px 0 20px
}
.footer-bottom {
margin-top: 25px
}
.activities-section {
padding: 48px 0;
}
.activities-track {
grid-auto-columns: 100%;
gap: 16px;
}
.activity-card img {
height: 215px;
}
.activity-card-body {
padding: 17px 18px;
}
.activities-title {
font-size: 26px;
}
.video-slider .slick-prev {
left: 5px;
}
.video-slider .slick-next {
right: 5px;
}
.video-slider .slick-prev,
.video-slider .slick-next {
width: 35px;
height: 35px;
}
.activities-track {
grid-template-columns: calc((100% - 20px) / 2);
gap: 10px;
}
}
@media (max-width: 480px) {
.header-cta {
display: none;
}
.calculator-card {
padding: 19px 14px;
}
.choice {
padding: 10px;
}
.choice strong {
font-size: 11px;
}
.sab-heading {
font-size: 29px
}
.sab-demo-card {
padding: 18px
}
.sab-photo {
height: 205px
}
.activities-track {
grid-template-columns: calc((100% - 20px) / 1);
gap: 10px;
}
}
@media (prefers-reduced-motion:reduce) {
.feature-media img {
transition: none;
}
.activities-track {
transition: none;
}
}.sab-cf7-wizard {
font-family: Inter, system-ui, sans-serif;
max-width: 680px;
margin: 0 auto;
padding: clamp(20px, 4vw, 34px);
border: 1px solid #e4dfe9;
border-radius: 20px;
background: var(--background-color);
box-shadow: 0 18px 45px #24113510;
color: var(--text-color)
}
.sab-progress p{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-bottom: 12px
}
.sab-progress span {
height: 6px;
border-radius: 20px;
background: #f0e5f6
}
.sab-progress span.is-active {
background: var(--primary-color)
}
.sab-progress-label p {
display: flex;
justify-content: space-between;
color: #777;
font-size: 12px;
margin-bottom: 27px
}
.sab-current-step {
color: var(--secondary-color)
}
.sab-step-form {
display: none
}
.sab-step-form.is-active {
display: block
}
.sab-step-form h3 {
font-size: clamp(19px, 2.5vw, 23px);
font-weight: 800;
color: var(--heading-color);
margin: 0 0 9px
}
.sab-step-form>p {
font-size: 13px;
color: #797583;
line-height: 1.6;
margin: 0 0 20px
}
.sab-cf7-wizard .wpcf7-radio {
display: grid;
gap: 10px;
max-height: 350px;
overflow-y: auto;
padding: 2px 8px 2px 2px
}
.sab-cf7-wizard .wpcf7-list-item {
margin: 0;
display: block
}
.sab-cf7-wizard .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 11px;
min-height: 58px;
border: 1px solid #e0dfe4;
border-radius: 13px;
padding: 12px 14px;
background: #fff;
cursor: pointer;
transition: .2s
}
.sab-cf7-wizard .wpcf7-list-item label:hover,
.sab-cf7-wizard .wpcf7-list-item label:has(input:checked) {
border-color: var(--primary-color);
background: #fbf2ff;
box-shadow: 0 0 0 1px #a600e833
}
.sab-cf7-wizard .wpcf7-list-item input[type=radio] {
accent-color: var(--primary-color);
width: 16px;
height: 16px;
flex: none;
margin: 0
}
.sab-cf7-wizard .wpcf7-list-item-label {
font-size: 13px;
font-weight: 600;
color: var(--heading-color)
}
.sab-field-label {
display: block;
font-size: 12px;
font-weight: 700;
margin-bottom: 6px;
color: var(--heading-color)
}
.sab-cf7-wizard input[type=text],
.sab-cf7-wizard input[type=email],
.sab-cf7-wizard input[type=tel] {
width: 100%;
border: 1px solid #ddd7e3;
border-radius: 9px;
padding: 12px;
font-size: 14px;
background: #fff
}
.sab-cf7-wizard input:focus {
outline: 2px solid #a600e855;
outline-offset: 1px
}
.sab-acceptance {
font-size: 12px;
color: #666
}
.sab-acceptance .wpcf7-list-item {
display: inline
}
.sab-acceptance .wpcf7-list-item label {
min-height: unset;
border: 0;
padding: 0;
box-shadow: none !important;
background: transparent !important
}
.sab-acceptance input {
accent-color: var(--primary-color)
}
.sab-actions p, .sab-actions .blk {
display: flex;
gap: 10px; 
}
.sab-next,
.sab-submit {
flex: 1
}
.sab-next,
.sab-submit input[type=submit] {
width: 100%;
background: var(--primary-color);
border: 1px solid var(--primary-color);
color: #fff;
font-size: 13px;
font-weight: 700;
border-radius: 11px;
padding: 14px 18px;
cursor: pointer
}
.sab-next:hover,
.sab-submit input[type=submit]:hover {
background: var(--secondary-color)
}
.sab-back {
border: 1px solid #ddd5e3;
border-radius: 11px;
background: #fff;
color: var(--heading-color);
font-size: 13px;
font-weight: 700;
padding: 0 20px;
cursor: pointer
}
.sab-error {
color: #b42349;
font-size: 12px;
margin-top: 12px;
min-height: 16px
}
.sab-trust {
text-align: center;
color: #827c89;
font-size: 11px;
line-height: 1.9;
margin-top: 16px
}
.sab-trust p {
margin-bottom: 0;
}
.sab-cf7-wizard .wpcf7-not-valid-tip {
font-size: 12px
}
.sab-cf7-wizard .wpcf7-response-output {
margin: 16px 0 0 !important;
font-size: 13px;
border-radius: 8px
}
@media(max-width:575px) {
.sab-cf7-wizard {
padding: 20px 15px;
border-radius: 15px
}
.sab-cf7-wizard .wpcf7-radio {
max-height: 310px
}
.sab-back {
padding: 0 12px
}
}.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}