* {
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
font-family: 'Lexend', sans-serif;
margin: 0;
padding: 0;
color: #3B4D7D;
overflow-x: hidden;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: top center;
}
.top-bar .container {
padding: 0 24px;
}
.container {
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
.top-bar {
height: 38px;
position: relative;
border-bottom: 1px solid #8B5CF6;
z-index: 100;
}
.top-bar .container {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.top-bar a {
color: #234390;
font-size: 16px;
text-decoration: none;
font-family: "Quicksand", sans-serif;
font-weight: 500;
}
.align-center {
text-align: center;
}
.header {
height: 80px;
width: 100%;
z-index: 99;
position: relative;
left: 0;
background: #FFF;
color: #234390;
box-shadow: 0 4px 6px rgba(55, 181, 207, 0.3);
}
.header + script + main {
padding-top: 40px;
}
.header.fixed + script + main {
padding-top: 200px;
}
.header.fixed {
position: fixed;
top: 0;
}
.header .main-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80px;
}
.header nav {
flex-grow: 1;
}
.header nav ul {
display: flex;
flex-direction: row;
align-items: center;
gap: 32px;
}
.header nav ul li {
list-style: none;
}
.header nav ul li.active-link {
padding-bottom: 6px;
position: relative;
}
.header nav ul li.active-link::before {
content: '';
display: block;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
margin-top: 0;
height: 184px;
position: absolute;
top: 42px;
left: 50%;
width: 170px;
transform: translateX(-50%);
}
.header.fixed nav ul li.active-link::before {
top: 4px;
}
.header nav ul li.active-link::after {
content: '';
display: block;
height: 4px;
background: linear-gradient(135deg, #8B5CF6, #55B5CF);
margin-top: 0px;
}
.header nav ul li.active-link a {
font-weight: 600;
font-size: 30px;
}
.header .sub-header {
display: none;
}
.header.with-feature {
display: block;
height: 180px;
}
.header.with-feature .header1 {
box-shadow: 0 4px 6px rgba(55, 181, 207, 0.3);
}
.header.with-feature .sub-header {
display: block;
}
.header.with-feature .sub-header .container span {
padding-left: 10px;
}
.sub-header .container {
display: flex;
height: 100px;
flex-direction: row;
align-items: center;
/*justify-content: flex-end;*/
flex-wrap: nowrap;
white-space: nowrap;
font-family: 'Syne';
text-align: right;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 43px;
color: #55B5CF;
}
.header nav ul li a {
color: #234390;
font-size: 21px;
text-decoration: none;
font-family: "Rokkitt", sans-serif;
font-weight: 400;
}
.header nav ul li a:hover {
color: #084B8F;
}
/*.header nav ul li a::after {*/
/* content: "";*/
/* display: inline-block;*/
/* width: 13px;*/
/* height: 10px;*/
/* margin-left: 5px;*/
/* background-image: url('data:image/svg+xml,');*/
/* background-repeat: no-repeat;*/
/* background-position: center;*/
/* background-size: contain;*/
/*}*/
.header .header-buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.header .header-buttons a, .fill, .outlined, .fill-white, .outlined-empty-white {
font-size: 18px;
text-decoration: none;
font-family: "Rokkitt", sans-serif;
font-weight: 500;
padding: 10px 40px;
border-radius: 36px;
font-style: normal;
line-height: normal;
}
a.fill {
background: #8B5CF6;
color: #FFF;
}
a.outlined {
background: #FFF;
color: #8B5CF6;
border: 1px solid #8B5CF6;
}
a.fill-white {
background: #FFF;
color: #3B4D7D;
}
a.outlined-empty-white {
background: transparent;
color: #FFF;
border: 1px solid #FFF;
}
.header img {
width: 100%;
max-width: 204px;
}
.video .container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 48px 0 100px;
}
.video video {
display: none;
}
main {
padding-top: 118px;
font-family: "Syne", sans-serif;
}
h1 {
font-size: 48px;
}
.top-title {
font-family: 'Syne';
font-style: normal;
font-weight: 600;
font-size: 64px;
line-height: 64px;
text-align: center;
background: linear-gradient(
to right,
#084B8F 23%,
#55B5CF 57%,
#7030FF 89%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.top-title-2 {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 600;
font-size: 34px;
line-height: 41px;
text-align: center;
color: #00296B;
}
.pricing-heading {
display: flex;
flex-direction: column;
align-items: center;
}
.paragraph {
font-size: 24px;
font-weight: 300;
text-align: center;
margin-top: 16px;
}
.image {
display: flex;
justify-content: center;
margin-top: 40px;
}
.start-trial {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40px;
}
.gradient-button {
padding: 14px 64px;
box-sizing: border-box;
font-family: "Rokkitt", sans-serif;
font-weight: 700;
display: inline-block;
text-decoration: none;
text-size-adjust: none;
border: 0;
text-align: center;
color: rgb(255, 255, 255);
background: linear-gradient(to right, #55B5CF, #8B5CF6);
border-radius: 36px;
width: auto;
max-width: 100%;
word-break: break-word;
overflow-wrap: break-word;
font-size: 16px;
line-height: inherit;
cursor: pointer;
}
.button-info {
margin-top: 8px;
display: flex;
font-family: "Rokkitt", sans-serif;
align-items: center;
justify-content: center;
gap: 6px;
color: #4B5563;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.section-gradient {
padding: 48px 12px;
width: 100%;
background: linear-gradient(90.4deg, #9567FF 2.23%, #55B5CF 54.58%, #55B5CF 116.93%);
}
.two-columns {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
line-height: 2;
}
.col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #FFF;
}
.col .title {
font-size: 32px;
font-family: "Rokkitt", sans-serif;
font-weight: 300;
text-align: center;
}
.border-col {
border: 4px solid #FFF;
border-radius: 24px;
padding: 4px 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
margin-top: 20px;
}
.border-col .title {
margin-top: 8px;
width: 272px;
border-bottom: 4px solid #FFF;
}
.border-col ul {
margin-right: 64px;
padding-left: 0;
}
.col ul li {
list-style: none;
font-size: 18px;
font-weight: 300;
color: #FFF;
margin-top: 8px;
padding-left: 24px;
}
.col ul li::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 8px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.col .border-col ul li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 8px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.buttons {
margin-top: 32px;
}
.buttons a {
margin: 0 8px;
}
.subtitle {
font-size: 38px;
text-align: center;
font-family: 'Rokkitt', sans-serif;
}
.gradient-line {
width: 320px;
height: 5px;
background: linear-gradient(to right, #8B5CF6, #55B5CF);
margin: 0 auto;
}
.col {
font-family: "Rokkitt", sans-serif;
}
.non-border li {
padding-left: 0 !important;
border-bottom: 1px solid #FFF;
font-weight: 400;
}
.features {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.features .box {
background: #fff;
border-radius: 12px;
box-shadow: 0 5px 8px rgba(85, 181, 207, 0.50), -1px -1px 8px rgba(85, 181, 207, 0.50);
padding: 24px;
text-align: center;
}
.features .box-title {
display: flex;
flex-direction: row;
gap: 20px;
justify-content: start;
align-items: center;
height: 40px;
}
.features .icon {
width: 40px;
height: 40px;
}
.features .title {
text-align: left;
margin: 0;
font-size: 22px;
font-weight: 500;
font-family: 'Rokkitt', sans-serif;
}
.features .description {
padding-left: 2px;
margin-top: 12px;
font-size: 20px;
font-weight: 300;
text-align: justify;
color: #2563EB;
font-family: 'Rokkitt', sans-serif;
}
.end-button {
margin-top: 48px;
margin-bottom: 48px;
text-align: center;
}
.end-button svg {
margin-left: 4px;
transform: translateY(9px);
}
.section-title.section-title-left {
margin-top: 48px;
justify-content: start;
}
.gears-background {
background-image: url('data:image/svg+xml,'), linear-gradient(to right, #8B5CF6, #55B5CF);
background-repeat: no-repeat;
background-position: top right;
margin-top: 48px;
}
.rows {
justify-self: flex-start;
margin-top: 48px;
}
.more-features {
color: #3A4D7D;
text-align: center;
font-family: Rokkitt;
font-size: 16px;
font-style: normal;
font-weight: 500;
margin-right: 50px;
text-decoration: none;
line-height: 40px;
position: relative;
}
.more-features:after {
content: "";
display: inline-block;
width: 40px;
height: 40px;
position: absolute;
right: -52px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
.row {
margin-top: 16px;
display: flex;
gap: 16px;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0 12px;
border-bottom: 1px solid #FFF;
}
.row .title {
margin: 0;
font-family: Rokkitt, sans-serif;
font-size: 24px;
font-weight: 400;
color: #FFF;
}
.section-title {
display: flex;
margin-bottom: 20px;
align-items: center;
justify-content: center;
color: #FFF;
font-size: 32px;
gap: 12px;
font-weight: 700;
font-family: 'Rokkitt', sans-serif;
}
.section-single-color {
margin: 48px 0;
padding: 48px 12px;
background: #4EB3CE;
width: 100%;
}
.section-single-color .container {
display: flex;
gap: 32px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.section-single-color .buttons a {
padding: 10px 64px;
}
.section-single-color .buttons {
margin-top: 0;
}
.single-section-title {
color: #FFF;
font-size: 36px;
font-weight: 400;
font-family: 'Rokkitt', sans-serif;
text-align: center;
}
.single-section-desc {
color: #FFF;
font-size: 18px;
font-weight: 300;
font-family: 'Rokkitt', sans-serif;
text-align: center;
max-width: 600px;
}
.video {
/*display: none;*/
}
#video-overlay, #video-iframe {
border-radius: 20px;
overflow: hidden;
}
footer {
padding: 20px;
color: #2B395B;
text-align: center;
font-size: 16px;
font-weight: 300;
background: rgba(59, 77, 125, 0.03);
}
.button {
padding: 14px 20px;
box-sizing: border-box;
display: inline-block;
text-decoration: none;
text-size-adjust: none;
text-align: center;
color: rgb(255, 255, 255);
background: rgb(58, 174, 224);
border-radius: 36px;
width: auto;
max-width: 100%;
word-break: break-word;
overflow-wrap: break-word;
font-size: 16px;
line-height: inherit;
}
/* Mobile menu icon (kebab menu) */
.mobile-menu-icon {
display: none;
cursor: pointer;
width: 24px;
height: 32px;
position: relative;
}
.mobile-menu-icon span {
display: block;
width: 5px;
height: 5px;
background-color: #234390;
border-radius: 50%;
position: absolute;
}
.mobile-menu-icon span:nth-child(1) {
top: 6px;
left: 10px;
}
.mobile-menu-icon span:nth-child(2) {
top: 14px;
left: 10px;
}
.mobile-menu-icon span:nth-child(3) {
top: 22px;
left: 10px;
}
/* Mobile menu */
.mobile-menu {
display: none;
position: absolute;
top: 0;
right: 0;
width: 264px;
height: 100vh;
background-color: #FFF;
box-shadow: 0 4px 6px rgba(55, 181, 207, 0.3);
z-index: 1000;
}
.display-none {
display: none;
}
.mobile-menu ul {
display: flex;
flex-direction: column;
padding: 20px;
padding-left: 24px;
align-items: center;
margin: 0;
}
.mobile-menu ul li {
list-style: none;
margin: 10px 0;
}
.mobile-menu ul li a {
color: #234390;
text-decoration: none;
text-align: center;
font-family: Rokkitt;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.mobile-menu .mobile-menu-buttons {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-left: 24px;
gap: 10px;
justify-content: center;
}
.mobile-menu .mobile-menu-header {
box-shadow: 0 4px 6px rgba(55, 181, 207, 0.3);
height: 54px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
padding-right: 12px;
}
/*.mobile-menu ul li a::after {*/
/* content: "";*/
/* display: inline-block;*/
/* width: 13px;*/
/* height: 10px;*/
/* margin-left: 5px;*/
/* background-image: url('data:image/svg+xml,');*/
/* background-repeat: no-repeat;*/
/* background-position: center;*/
/* background-size: contain;*/
/*}*/
footer {
background-color: #FFF;
color: #0B0F15;
padding: 40px 60px;
font-family: "Quicksand", sans-serif;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.logo-section {
width: 280px;
}
.logo-section h1 {
font-size: 28px;
font-weight: bold;
}
.logo-section p {
font-size: 14px;
margin-top: 10px;
text-align: left;
color: #0B0F15;
}
.logo-section img {
width: 280px
}
.social-media-icons {
text-align: left;
}
.social-media-icons a {
display: inline-block;
margin-right: 10px;
}
.footer-links {
display: flex;
padding: 0 32px;
flex-grow: 2;
justify-content: space-between;
gap: 40px;
}
.footer-links > * {
min-width: 160px;
}
.footer-links h2 {
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
text-align: left;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links ul li {
margin-bottom: 10px;
text-align: left;
}
.footer-links ul li a {
font-size: 16px;
text-decoration: none;
color: #000;
}
.mobile-header {
display: none;
}
.footer-bottom {
font-weight: 500;
display: flex;
justify-content: space-between;
margin-top: 30px;
font-size: 14px;
border-top: 1px solid #000;
color: #000;
}
.footer-bottom ul {
margin-top: 10px;
list-style: none;
padding: 0;
display: flex;
gap: 20px;
}
.footer-bottom ul li a {
text-decoration: none;
color: #000;
}
.footer-bottom p {
text-align: right;
margin-top: 10px;
}
.button-box {
display: flex;
align-items: center;
justify-content: center;
}
.show-mobile {
display: none;
}
.feature-mobile-logo {
display: none;
}
@media (max-width: 768px) {
/* General layout adjustments */
body {
background-size: contain;
}
.button-info {
font-size: 10px;
}
.box-container {
flex-direction: column;
padding-left: 0;
}
.top-title {
padding: 0 10px;
font-size: 32px;
line-height: 32px;
}
.start-trial {
margin-top: 32px;
}
.image {
margin-top: 24px;
}
.paragraph.small-mobile {
font-size: 10px;
padding: 0 24px
}
.mobile-80 {
width: 80% !important;
padding: 16px;
}
.top-title-2 {
font-size: 16px;
padding: 0 20px;
font-weight: 400;
line-height: 24px;
}
.box-container .box {
margin: 0 16px;
width: calc(100% - 32px);
}
.text-boxes {
flex-direction: column;
padding: 0;
}
.text-boxes .text-box {
width: calc(100% - 32px);
margin: 0 16px;
}
/* Header adjustments */
.header {
height: auto;
box-shadow: none;
}
.section-title.section-title-left {
margin-top: 0;
}
.gears-background {
background: url('data:image/svg+xml,'), linear-gradient(to right, #8B5CF6, #55B5CF);
background-repeat: no-repeat;
background-position: bottom right;
padding-bottom: 220px !important;
}
.row {
padding-left: 0px;
gap: 8px;
}
.row .icon svg {
width: 32px;
height: 32px;
}
.row .title {
font-size: 16px;
}
.header .main-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
height: auto;
padding: 10px 0;
}
.header img {
max-width: 150px;
}
.header nav {
display: none;
}
.mobile-menu-icon {
display: block;
}
.header .header-buttons {
display: flex;
flex-direction: row;
width: auto;
gap: 10px;
flex-grow: 1;
padding: 0 16px;
}
.show-mobile {
display: block;
}
.header.with-feature {
height: 54px;
}
/*.header.with-feature .feature-mobile-logo {*/
/* display: block;*/
/*}*/
.header.with-feature .sub-header {
display: none;
}
.header.with-feature + script + main {
padding-top: 0;
}
#title-mobile {
display: none;
font-family: 'Rokkitt';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 31px;
color: #234390;
}
.header.with-feature .header-buttons {
/*display: none;*/
}
.header .logo {
height: 28px;
/*display: none;*/
}
.mobile-header {
background: linear-gradient(95deg, #55B5CF -1.64%, #8B5CF6 114.02%);
border-radius: 0px;
box-shadow: none;
}
.mobile-header .container span {
display: block;
padding-top: 12px;
text-align: left;
width: 100%;
}
mobile-header .container span.single {
padding: 24px 0;
}
.mobile-header .container span + span {
padding-top: 0;
text-align: right;
}
.mobile-header .container {
padding: 0 10px !important;
flex-flow: column;
font-family: 'Syne';
font-style: normal;
font-weight: 700;
height: 80px;
font-size: 18px;
line-height: 28px;
color: #FFFFFF;
}
.plan-desc {
font-family: 'Rokkitt';
font-style: italic;
font-weight: 300;
font-size: 16px;
line-height: 18px;
color: #00296B;
}
.plan-features li:before {
width: 22px !important;
height: 22px !important;
}
.header .header-buttons a, .fill, .outlined, .fill-white, .outlined-empty-white {
font-size: 16px;
padding: 8px 20px;
text-align: center;
flex-grow: 1;
}
main {
padding-top: 144px;
}
.container {
padding: 0 15px;
}
h1 {
font-size: 36px;
}
.image svg {
width: 92px;
height: auto;
}
.paragraph {
font-size: 12px;
}
.section-gradient {
border-top-left-radius: 24px;
border-top-right-radius: 24px;
padding: 24px 0;
}
.subtitle {
font-size: 28px;
}
/* Two columns section */
.two-columns {
flex-direction: column;
}
.hide-mobile {
display: none;
}
.section-single-color {
border-radius: 24px 24px 0 0;
margin: 10px 20px;
width: calc(100% - 40px);
}
.section-single-color .container {
padding: 0;
gap: 0;
}
.section-single-color .buttons a {
width: 100%;
padding: 12px;
}
.feature-row {
margin-bottom: 24px !important;
}
.hr-gradient {
margin: 4px 72px !important;
height: 4px !important;
}
.single-section-title {
font-size: 18px
}
.single-section-desc {
font-size: 12px
}
.mobile-rounded-container.mobile-margin-top {
margin-top: -66px;
}
.mobile-rounded-container {
border-top-left-radius: 24px;
border-top-right-radius: 24px;
margin-top: -24px;
padding-top: 24px;
background: #FFF;
}
.col {
margin-bottom: 24px;
width: 100%;
}
.col .title {
font-size: 26px;
}
.col ul {
padding-left: 16px;
}
.col ul li {
font-size: 14px;
}
.border-col {
padding-right: 0;
width: 100%;
}
.border-col ul {
padding-left: 0;
margin-right: 0;
}
.border-col ul li {
padding-left: 0;
font-size: 13px;
display: flex;
align-items: center;
}
.buttons {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
width: 100%;
}
.buttons a {
margin: 5px 0;
width: 80%;
text-align: center;
}
.gradient-button {
padding: 12px 48px;
font-size: 14px;
}
.video .container svg {
width: 100%;
height: auto;
}
/* Features grid */
.features {
grid-template-columns: 1fr;
}
.features .box {
margin-bottom: 16px;
}
.features .box.button-box {
box-shadow: none;
padding-top: 0;
margin-top: -16px;
justify-content: flex-end;
}
.features .box.button-box svg {
width: 144px;
}
.features .title {
font-size: 20px;
}
.features .description {
font-size: 16px;
}
/* Section titles */
.section-title {
font-size: 24px;
text-align: center;
}
/* Footer adjustments */
.footer-content {
flex-direction: column;
}
.logo-section {
width: 100%;
margin-bottom: 24px;
}
.footer-links {
width: 100%;
gap: 24px;
padding: 0;
}
.footer-bottom {
align-items: center;
flex-direction: column;
}
.footer-links > * {
min-width: 30%;
}
.footer-links h2 {
font-size: 13px;
}
.footer-links ul li a {
font-size: 12px
}
.footer-bottom ul {
flex-wrap: wrap;
justify-content: center;
}
footer {
padding: 12px 0;
}
.footer-bottom p {
width: fit-content;
text-align: center;
border-top: 1px solid #000;
padding-top: 8px;
margin-top: 0;
}
.logo-section {
width: 100% !important;
padding: 0 64px;
}
.logo-section p, .logo-section .social-media-icons {
text-align: center;
}
.logo-section img {
width: 100% !important;
}
}
@media (max-width: 400px) {
.header .subtitle {
font-size: 20px;
}
h1 {
font-size: 28px;
}
.paragraph {
font-size: 16px;
}
.gradient-line {
width: 80%;
}
.header img {
max-width: 120px;
}
.logo-section img {
width: 180px;
}
}
/** Features **/
.feature-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 64px;
flex-wrap: wrap;
}
.feature-row.reverse {
flex-direction: row-reverse;
}
.feature-row-content {
font-family: 'Rokkitt';
width: 600px; /* Fixed width */
min-width: 320px;
padding: 24px 32px;
flex: 0 0 600px; /* Prevent shrinking/growing */
}
.feature-row-title {
font-family: 'Rokkitt';
color: #3A4D7D;
font-weight: 400;
font-size: 36px;
width: fit-content;
}
.feature-row-paragraph {
color: #3A4D7D;
font-weight: 300;
font-size: 20px;
text-align: justify;
}
.feature-row-title::after {
content: '';
display: block;
height: 4px;
background: linear-gradient(135deg, #8B5CF6, #55B5CF);
margin-top: 8px;
}
.feature-row-slider {
flex: 1 1 0; /* Fill remaining space */
min-width: 320px;
display: flex;
justify-content: center;
align-items: center;
padding: 24px 32px;
}
.slider-container {
position: relative;
width: 100%;
}
.slider-image-wrapper {
border-radius: 16px;
padding: 8px;
background: linear-gradient(135deg, #7ddaff 0%, #eecfff 100%);
box-sizing: border-box;
overflow: hidden;
touch-action: pan-y;
user-select: none;
}
.slider-image {
width: 100%;
display: block;
border-radius: 8px;
object-fit: cover;
background: #f5f5f5;
user-drag: none;
user-select: none;
pointer-events: none;
}
.slider-dots {
display: flex;
justify-content: center;
margin-top: 12px;
gap: 8px;
}
.slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #D9D9D9;
cursor: pointer;
transition: background 0.2s;
border: none;
outline: none;
}
.slider-dot.active {
background: #55B5CF;
}
/* Remove slider-arrow styles */
.slider-arrow,
.slider-arrow.left,
.slider-arrow.right {
display: none !important;
}
@media (max-width: 900px) {
.feature-row, .feature-row.reverse {
flex-direction: column;
gap: 0;
}
.feature-row-content, .feature-row-slider {
padding: 16px 0;
}
.feature-row-content {
width: 100%;
flex: 1 1 100%;
min-width: 0;
}
.slider-container {
width: 100%;
max-width: 100%;
}
}
/* Pricing styles */
.mobile-plan-toggle {
display: none;
text-align: center;
margin-bottom: 10px;
gap: 4px;
}
.plan-toggle-btn {
background: #FFFFFF;
border: 1px solid #55B5CF;
color: #00296B;
padding: 10px 20px;
font-family: 'Rokkitt', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 16px;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
border-radius: 0;
}
.plan-toggle-btn:first-child {
border-radius: 8px 0 0 0;
}
.plan-toggle-btn:last-child {
border-radius: 0 8px 0 0;
}
.plan-toggle-btn.active {
background: linear-gradient(135deg, #8B5CF6, #55B5CF);
color: white;
border-color: transparent;
}
/* Price Cards Toggle Styles */
.price-cards-toggle {
display: none;
text-align: center;
gap: 8px;
align-items: center;
justify-content: center;
width: 100%;
max-width: 600px;
margin: 0 auto 15px;
}
/* Ensure price-cards-toggle is always visible, even on mobile */
@media (max-width: 768px) {
.price-cards-toggle {
display: flex;
}
}
.price-toggle-btn {
background: #FFFFFF;
border: 1px solid #55B5CF;
color: #00296B;
padding: 6px 24px;
font-family: 'Rokkitt', sans-serif;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
border-radius: 8px;
box-shadow: 0px 4.06255px 6.09382px rgba(85, 181, 207, 0.5), -1.01564px -1.01564px 15.2346px rgba(85, 181, 207, 0.5);
}
.price-toggle-btn.active {
color: white;
padding: 14px 24px;
border-radius: 12.188px;
background: linear-gradient(180deg, #55B5CF 0%, #8B5CF6 100%);
box-shadow: 0px 4.063px 6.094px 0px rgba(85, 181, 207, 0.50), -1.016px -1.016px 15.235px 0px rgba(85, 181, 207, 0.50);
}
.pricing-cards-row {
display: flex;
gap: 32px;
justify-content: center;
flex-wrap: wrap;
}
.pricing-card {
flex: 1 1 300px;
max-width: 388px;
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: box-shadow 0.2s, border 0.2s;
position: relative;
/* Free */
background: #FFFFFF;
box-shadow: 0px 4.06255px 6.09382px rgba(85, 181, 207, 0.5), -1.01564px -1.01564px 15.2346px rgba(85, 181, 207, 0.5);
border-radius: 12.1876px;
}
.pricing-card.subscribe-now::before {
position: absolute;
content: ' ';
top: 20px;
left: 140px;
width: 285px;
height: 172px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
}
.pricing-card a.gradient-button {
padding: 10px 16px;
}
.pricing-card .button-info {
width: 100%;
}
.pricing-card.featured {
border: 2px solid #8B5CF6;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
}
.plan-price {
color: #00296B;
margin-bottom: 8px;
font-family: 'Syne';
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 31px;
text-align: center;
}
.subscribe-now .plan-price {
opacity: 0.6;
}
.subscribe-now .dollar-price {
text-decoration: line-through;
}
.plan-title {
margin-bottom: 2px;
color: #00296B;
margin-top: 48px;
/* Ultimate */
font-family: 'Rokkitt';
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 37px;
text-align: center;
}
.plan-title::after {
content: '';
display: block;
height: 4px;
background: linear-gradient(135deg, #8B5CF6, #55B5CF);
margin-top: 4px;
}
.plan-desc {
margin-top: 24px;
color: #00296B;
margin-bottom: 18px;
text-align: left;
font-family: 'Rokkitt', 'Syne', sans-serif;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
}
.plan-features {
list-style: none;
padding: 0;
width: 100%;
margin-top: 78px;
}
.button-info + .plan-features {
margin-top: 50px;
}
.plan-features li {
margin-bottom: 6px;
padding-left: 0;
font-family: 'Rokkitt', 'Syne', sans-serif;
color: #3A4D7D;
position: relative;
display: flex;
flex-direction: row;
font-size: 22px;
}
.plan-features li:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 8px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.plan-features li.account:before {
background-image: url('data:image/svg+xml,')
}
/* Feature Comparison Table Styles */
.feature-comparison-title {
font-family: 'Rokkitt', sans-serif;
font-weight: 500;
font-size: 32px;
color: #00296B;
text-align: center;
margin-bottom: 30px;
}
.feature-comparison-table {
width: 100%;
overflow-x: auto;
}
.feature-comparison-table table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-family: 'Rokkitt', sans-serif;
}
.feature-comparison-table th {
padding: 15px 20px;
text-align: center;
font-weight: 500;
font-size: 30px;
color: #FFF;
box-sizing: border-box;
border: 4px solid #FFFFFF;
}
.feature-comparison-table th.heading-free {
background: rgba(85, 181, 207, 0.75);
border-top-left-radius: 12px;
}
.feature-comparison-table th.heading-ultimate {
background: rgba(85, 181, 207, 0.75);
}
.feature-comparison-table th.heading-enterprise {
background: rgba(85, 181, 207, 0.75);
border-top-right-radius: 12px;
}
.feature-comparison-table th:first-child {
text-align: left;
width: 40%;
border-top: 0;
border-left: 0;
}
.feature-comparison-table td {
border: 1px solid #CEF4FF;
padding: 12px 20px;
text-align: center;
font-size: 24px;
max-width: 275px;
color: #3A4D7D;
width: 20%;
border-bottom: 1px solid #e0e0e0;
}
.feature-comparison-table td:first-child {
text-align: left;
font-weight: 400;
max-width: initial;
width: 40%;
}
.feature-comparison-table tr.feature-group td {
background: linear-gradient(90deg, #55B5CF 43.12%, #8B5CF6 112.1%);
padding: 12px 20px;
text-align: left;
font-family: 'Rokkitt';
font-style: italic;
font-weight: 600;
font-size: 40px;
line-height: 51px;
color: #FFFFFF;
}
.feature-comparison-table tr .gradient-button {
padding: 8px 16px;
white-space: nowrap;
}
.check-icon, .x-icon {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.check-icon {
background-image: url('data:image/svg+xml,')
}
.x-icon {
background-image: url('data:image/svg+xml,');
}
/* Styles for selected plan in feature comparison table */
.feature-comparison-table .plan-col {
transition: all 0.3s ease;
}
.demo-container {
display: flex;
flex-direction: row;
gap: 16px;
}
.demo-text-container {
flex-grow: 1;
}
.demo-text-container p {
font-family: 'Syne';
margin-top: 48px;
padding-left: 32px;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
letter-spacing: 0.01em;
color: #3A4D7D;
}
.demo-text-container ul li {
margin-left: 86px;
}
.demo-text-container ul li {
padding-bottom: 26px;
list-style: none;
position: relative;
}
.demo-text-container ul li::before {
content: '';
display: block;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
margin-top: 0;
height: 20px;
position: absolute;
top: 2px;
left: -30px;
width: 20px;
}
.demo-form-container {
max-width: 672px;
min-width: 460px;
}
.demo-form-container p {
color: #6B7280;
text-align: justify;
font-family: Rokkitt;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
}
.demo-form-container a {
color: #6B7280;
font-family: Rokkitt;
text-decoration: none;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
.demo-calendly-container {
background: #FFFFFF;
box-shadow: 0px 4.96795px 7.45192px rgba(85, 181, 207, 0.5), -1.24199px -1.24199px 18.6298px rgba(85, 181, 207, 0.5);
border-radius: 16px;
overflow: hidden;
}
.demo-title {
margin: 0;
padding: 0;
font-family: 'Syne';
font-style: normal;
font-weight: 600;
font-size: 36px;
line-height: 48px;
text-align: center;
letter-spacing: 0.01em;
color: #55B5CF;
}
/* our story */
.our-story {
text-align: center;
font-family: Syne;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.4px;
margin-top: 0;
}
@media (max-width: 768px) {
.demo-container {
flex-direction: column;
}
.gradient-subcontainer {
background: linear-gradient(180deg, #55B5CF 0%, #8B5CF6 100%);
}
.demo-form-container {
min-width: calc(100% - 48px);
max-width: 100%;
}
/* Show mobile plan toggle */
.mobile-plan-toggle {
display: flex;
justify-content: space-between;
width: 100%;
gap: 4px;
}
.demo-text-container p {
margin-top: 16px;
color: #3A4D7D;
text-align: center;
font-family: Rokkitt;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.16px;
width: 100%;
padding: 0;
}
.demo-text-container ul li {
color: #3A4D7D;
font-family: Rokkitt;
font-size: 14px;
margin-left: 0;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.28px;
}
.demo-text-container ul li::before {
background-size: 10px;
}
.demo-form-container p {
padding: 0 12px;
color: #6B7280;
font-size: 16px;
font-weight: 400;
font-family: 'Rokkitt';
line-height: 15px;
}
.demo-form-container p a {
font-size: 16px;
font-weight: 700;
line-height: 15px;
}
.price-cards-toggle {
display: flex;
}
/* Mobile-specific toggle button styles */
.plan-toggle-btn {
border-radius: 0;
}
.plan-toggle-btn:first-child {
border-radius: 8px 0 0 0;
}
.plan-toggle-btn:last-child {
border-radius: 0 8px 0 0;
}
.plan-toggle-btn.active {
border-radius: 8px 8px 0 0;
height: 52px;
margin-top: -10px;
}
/* Hide table header on mobile */
.feature-comparison-table thead {
display: none;
}
/* Remove horizontal scroll on mobile */
.feature-comparison-table {
overflow-x: hidden;
}
.check-icon, .x-icon {
width: 32px !important;
height: 32px !important;
}
/* Note: Pricing cards visibility is now controlled by the price-cards-toggle JavaScript */
/* We keep the default display: flex from the desktop view */
/* Feature comparison table adjustments */
.feature-comparison-title {
font-size: 28px;
}
.feature-comparison-table th {
font-size: 18px;
padding: 12px 10px;
}
.feature-row-title::after {
display: none;
}
.feature-row-title {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.07em;
color: #3A4D7D;
text-align: center;
width: 100%;
}
.feature-comparison-table td {
font-size: 16px;
padding: 10px;
}
.feature-comparison-table tr.feature-group td {
font-size: 18px;
}
.check-icon, .x-icon {
width: 20px;
height: 20px;
}
/* Hide all plan columns except the first one (feature names) */
.feature-comparison-table .plan-col {
display: none;
}
/* Always show the first column (feature names) and make it grow */
.feature-comparison-table td:first-child,
.feature-comparison-table th:first-child {
display: table-cell;
width: 70%;
}
/* Show only the selected plan column */
.feature-comparison-table .plan-col.selected {
display: table-cell;
}
/* Hide buttons for non-visible plans in mobile view */
/* JavaScript will handle showing/hiding the buttons based on the selected plan */
/* Always show the first empty cell */
.feature-comparison-table table > tr[style*="border: none"] > td:first-child {
display: table-cell;
}
}
@media (max-width: 1100px) {
.pricing-cards-row {
flex-direction: column;
gap: 24px;
align-items: center;
}
.pricing-card {
max-width: 420px;
width: 100%;
}
}
/* Platform */
.platform-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 48px;
}
.platform-content {
font-family: 'Rokkitt';
max-width: 50%; /* Fixed width */
min-width: 320px;
padding: 24px 32px 24px 0;
}
.platform-title img {
width: 100%;
}
.platform-title {
font-family: 'Rokkitt';
color: #3A4D7D;
font-weight: 400;
font-size: 32px;
}
.platform-title::after {
content: '';
display: block;
height: 4px;
background: linear-gradient(135deg, #8B5CF6, #55B5CF);
margin-top: 4px;
}
.platform-subtitle {
font-family: 'Rokkitt';
color: #3A4D7D;
padding: 12px 0;
text-align: right;
font-size: 18px;
font-style: italic;
font-weight: 600;
line-height: normal;
}
.platform-paragraph {
padding-top: 24px;
color: #3A4D7D;
text-align: justify;
font-family: Rokkitt;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.platform-image {
max-width: 50%;
width: 100%;
height: auto;
}
/* Platform Cards Styles - Similar to Pricing Cards */
.platform-cards {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 32px;
margin: 48px 0;
}
.platform-card {
background: #fff;
box-shadow: 0px 4.06255px 6.09382px rgba(85, 181, 207, 0.5), -1.01564px -1.01564px 15.2346px rgba(85, 181, 207, 0.5);
padding: 24px 16px;
flex: 1 1 0;
max-width: 400px;
min-width: 260px;
display: flex;
flex-direction: column;
border-radius: 12px;
align-items: flex-start;
transition: box-shadow 0.2s, transform 0.2s;
}
.platform-card-title {
font-size: 24px;
font-family: 'Rokkitt', sans-serif;
font-weight: 400;
color: #3B4D7D;
margin-bottom: 12px;
width: fit-content;
}
.platform-card-title::after {
content: '';
display: block;
height: 2px;
background: linear-gradient(135deg, #8B5CF6, #55B5CF);
margin-top: 0px;
}
.platform-card-content {
font-size: 18px;
font-weight: 300;
color: #234390;
font-family: "Rokkitt", sans-serif;
line-height: 1.5;
}
@media (max-width: 900px) {
.platform-row {
flex-direction: column;
gap: 24px;
align-items: center;
}
.platform-content {
flex: 1 1 auto;
max-width: 100%;
padding: 24px 16px;
}
.platform-image {
max-width: 100%;
}
.platform-image img {
width: 100%;
}
.platform-title {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-size: 17px;
line-height: 20px;
letter-spacing: 0.07em;
color: #3A4D7D;
}
.feature-row-paragraph {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 300;
font-size: 14px;
padding: 0 12px;
line-height: 16px;
text-align: justify;
color: #3A4D7D;
}
.platform-subtitle {
font-family: 'Rokkitt';
font-style: italic;
font-weight: 600;
font-size: 15px;
line-height: 16px;
color: #3A4D7D;
}
.with-gradient-top {
}
.pricing-heading {
margin: 50px 0 !important;
}
.pricing-heading {
margin: 50px 0 !important;
}
.platform-paragraph {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: justify;
color: #3A4D7D;
}
.platform-cards {
flex-direction: column;
gap: 24px;
align-items: center;
}
.platform-card-title {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 25px;
color: #3A4D7D;
}
.platform-card-content {
font-family: 'Rokkitt';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #3A4D7D;
}
.platform-card {
max-width: 100%;
width: 100%;
}
}
.hr-gradient {
display: block;
height: 2px;
background: linear-gradient(135deg, #8B5CF6, #55B5CF);
width: calc(100% - 144px);
margin: 32px 72px;
}
/* Privacy Policy Styles */
.privacy-section {
margin-top: 56px;
}
.privacy-section-heading {
display: block;
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: #3A4D7D;
}
.privacy-section-content ul {
margin: 0;
list-style-type: square;
}
.privacy-section-content {
margin-bottom: 24px;
color: #3A4D7D;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 40px;
}
.privacy-subsection-heading {
display: block;
font-weight: 600;
margin-top: 20px;
margin-bottom: 12px;
}
li .privacy-subsection-heading {
font-weight: 400;
margin-top: 0;
margin-bottom: 0;
}
.privacy-subsection-content {
margin-bottom: 20px;
line-height: 1.5;
}
li .privacy-subsection-content {
margin-top: 0;
margin-bottom: 0;
}