.workflow-section {
position: relative;
}
/* Header */
.workflow-section .workflow-title {
background: linear-gradient(90deg, #141B5D 0%, #9810FA 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 150%;
letter-spacing: -1.92px;
}
.workflow-section .workflow-subtitle {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-weight: 700;
line-height: 150%;
letter-spacing: -1.92px;
}
.workflow-section .workflow-text {
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
font-size: 20px;
font-weight: 400;
line-height: 200%;
}
/* Vertical Line */
.workflow-section .timeline-wrapper {
position: relative;
margin-top: 60px;
}
.workflow-section .timeline-wrapper::before {
content: '';
position: absolute;
width: 3px;
background: linear-gradient(to bottom, #7b3cff, #4c2cff);
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* Dot Image */
.workflow-section .timeline-dot {
position: relative;
z-index: 2;
}
/* Content Card */
.workflow-section .timeline-content {
padding: 25px;
transition: 0.3s;
margin-bottom: 1.5rem;
}
.workflow-section .timeline-content h6 {
color: #060B13;
font-size: 24px;
font-weight: 600;
line-height: 39.6px;
}
.workflow-section .timeline-content p {
color: #4A5565;
font-size: 16px;
font-weight: 400;
line-height: 26px;
}
.workflow-section .timeline-content:hover {
transform: translateY(-5px);
}
.workflow-section .step-number {
color: #99A1AF;
font-size: 72px;
font-weight: 700;
line-height: 72px;
display: block;
margin-bottom: 8px;
}
/* Image Card */
.workflow-section .timeline-image {
padding: 15px;
transition: 0.3s;
margin-bottom: 1.5rem;
}
.workflow-section .timeline-image:hover {
transform: translateY(-5px);
}
.workflow-section .workflow-btn {
border-radius: 8px;
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.05) inset,
0 1px 3px 0 rgba(255, 255, 255, 0.12) inset,
0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(6px);
color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 700;
padding: 12px 16px;
}
.workflow-section .workflow-btn:hover {
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.05) inset,
0 1px 3px 0 rgba(255, 255, 255, 0.12) inset,
0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(6px);
color: #FFF;
}
/* Responsive */
@media (max-width: 991px) {
.workflow-section .timeline-wrapper::before {
left: 20px;
}
.workflow-section .timeline-row .row {
flex-direction: column;
}
.workflow-section .timeline-dot {
margin-left: -24px;
text-align: left;
}
.workflow-section .timeline-content,
.workflow-section .timeline-image {
text-align: left !important;
margin-bottom: 1.5rem;
}
}
.app-btn-icon {
    height: 60px;
    object-fit: contain;
}
/* Parent Scope */
.hst-partner-section {
padding: 80px 0;
}
/* Header */
.hst-partner-section .hst-subtitle {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
margin-bottom: 10px;
}
.hst-partner-section .hst-title {
background: var(--frre, linear-gradient(90deg, #141B5D 0%, #9810FA 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin-bottom: 15px;
}
.hst-partner-section .hst-description {
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
leading-trim: both;
text-edge: cap;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
.hst-partner-section .hst-btn {
border-radius: 8px;
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 3px 0 rgba(255, 255, 255, 0.12) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(6px);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 10px 22px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
transition: 0.3s;
}
.hst-partner-section .hst-btn:hover {
opacity: 0.9;
color: #fff;
}
/* Feature Cards */
.hst-partner-section .hst-feature {
padding: 16px 20px;
border-radius: 16px;
border: 0.8px solid #E8E8F0;
background: #FFF;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);;
gap: 15px;
display: flex;
align-items: center;
}
.hst-partner-section .hst-feature small {
margin-top: 10px;
color: #6A7282;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 21px; /* 150% */
}
.hst-partner-section .hst-feature p {
margin: 0;
color: #202020;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 180% */
}
/* Icon */
.hst-partner-section .hst-icon {
width: 80px;
height: 80px;
object-fit: contain;
}
/* Main Image */
.hst-partner-section .hst-main-img {
max-width: 100%;
height: auto;
}
/* Responsive */
@media (max-width: 991px) {
.hst-partner-section .hst-title {
font-size: 26px;
}
.hst-partner-section .hst-feature {
padding: 14px;
}
}
@media (max-width: 576px) {
.hst-partner-section .hst-description {
font-size: 14px;
}
.hst-partner-section .hst-title {
font-size: 22px;
}
}
.pricing-ai-section {
padding: 80px 0;
}
/* Typography */
.pricing-ai-section__subtitle {
color: var(--Colors-Neutral-1000, #333);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
margin-bottom: 10px;
}
.pricing-ai-section__title {
background: var(--frre, linear-gradient(90deg, #141B5D 0%, #9810FA 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin-bottom: 15px;
}
.pricing-ai-section__description {
color: var(--Colors-Neutral-900, #4A4A4A);
leading-trim: both;
text-edge: cap;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
/* Cards */
.pricing-ai-section__card {
border-radius: 20px;
border: 0.8px solid #E5E5E5;
background: #FFF;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
padding: 25px;
}
.pricing-ai-section__card--primary {
border: 2px solid #6f42c1;
}
.pricing-ai-section__card-title {
color: #141B5D;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 42px; /* 150% */
margin-bottom: 10px;
}
/* Price */
.pricing-ai-section__price {
color: #141B5D;
font-size: 56px;
font-style: normal;
font-weight: 700;
line-height: 56px; /* 100% */
margin-bottom: 20px;
}
.pricing-ai-section__price span {
font-size: 1rem;
font-weight: 400;
color: #6c757d;
}
/* Included Text */
.pricing-ai-section__included {
font-size: 2rem;
font-weight: 700;
margin-bottom: 20px;
}
/* List */
.pricing-ai-section__list {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-ai-section__list li {
position: relative;
padding-left: 18px;
margin-bottom: 10px;
color: #333;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22.5px; /* 150% */
}
.pricing-ai-section__list li::before {
content: "•";
position: absolute;
left: 0;
color: #6f42c1;
font-size: 1.2rem;
}
/* Image */
.pricing-ai-section__image {
max-width: 100%;
}
/* Responsive */
@media (max-width: 991px) {
.pricing-ai-section__title {
font-size: 1.8rem;
}
.pricing-ai-section__price {
font-size: 2rem;
}
.pricing-ai-section__included {
font-size: 1.6rem;
}
}
@media (max-width: 576px) {
.pricing-ai-section {
text-align: center;
}
.pricing-ai-section__description {
margin-left: auto;
margin-right: auto;
}
}
/* Section */
.access-points-section {
padding: 80px 0;
}
/* Header */
.access-points-section__subtitle {
color: var(--Colors-Neutral-1000, #333);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
margin-bottom: 10px;
}
.access-points-section__title {
background: var(--frre, linear-gradient(90deg, #141B5D 0%, #9810FA 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 150%;
margin-bottom: 15px;
}
.access-points-section__description {
color: var(--Colors-Neutral-900, #4A4A4A);
text-align: center;
leading-trim: both;
text-edge: cap;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
/* Button */
.access-points-section__btn {
border-radius: 8px;
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 3px 0 rgba(255, 255, 255, 0.12) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(6px);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 10px 22px;
text-decoration: none;
}
.access-points-section__btn:hover {
border-radius: 8px;
background: linear-gradient(0deg, #141B5D 0%, #141B5D 100%), rgba(255, 255, 255, 0.02);
box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 3px 0 rgba(255, 255, 255, 0.12) inset, 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.16) inset;
backdrop-filter: blur(6px);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 10px 22px;
}
/* Phone Images */
.access-points-section__phone {
max-width: 260px;
}
/* Content Blocks */
.access-points-section__block {
position: relative;
padding-left: 20px;
}
.access-points-section__block::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 3px;
height: 25px;
background: #6f42c1;
}
.access-points-section__block-title {
background: var(--frre, linear-gradient(90deg, #141B5D 0%, #9810FA 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 36px */
margin-bottom: 10px;
}
/* List */
.access-points-section__block ul {
padding-left: 18px;
margin: 0;
}
.access-points-section__block ul li {
margin-bottom: 8px;
color: var(--Colors-Neutral-900, #4A4A4A);
leading-trim: both;
text-edge: cap;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 200%; /* 40px */
}
/* Responsive */
@media (max-width: 991px) {
.access-points-section__phone {
max-width: 220px;
}
.access-points-section__title {
font-size: 1.8rem;
}
}
@media (max-width: 576px) {
.access-points-section {
text-align: center;
}
.access-points-section__block {
padding-left: 0;
}
.access-points-section__block::before {
display: none;
}
.access-points-section__block ul {
padding-left: 0;
list-style: none;
}
}