/* Font start */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/* Font End */
:root {
/* Background Colors */
--bg-primary: #7300ff;
--bg-secondary: #478aff;
--bg-tertiary: #7375ff;
--bg-light: #d2affc;
--bg-extra-light: #d2d3ff;
/* Text Colors */
--text-primary: #7300ff;
--text-accent: #7bd1ff;
--text-dark: #212844;
--text-secondary: #333333;
--text-muted: #717276;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-padding-top: 80px;
}
body {
font-family: "Poppins", sans-serif;
background: #f6f5ff;
}
.custom-container {
padding-inline: 15px;
width: 100%;
margin-inline: auto;
max-width: 100%;
}
.sec-py {
padding-block: 75px;
}
.sec-bg {
background-color: #eceaff;
}
.each-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: linear-gradient(90deg, #25009b 0%, #0901fe 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: var(--text-dark);
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
.blue-text {
color: #5043da;
}
}
.para {
color: var(--text-secondary);
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
span {
font-weight: 500;
}
}
&:not(.no-line)::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: linear-gradient(90deg, #25009b 0%, #0901fe 100%);
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.label {
text-align: left !important;
}
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 767px) {
&.left-in-tab {
align-items: start !important;
text-align: left !important;
.label {
text-align: left !important;
}
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-tab::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 0) {
&.left-in-mob {
align-items: start !important;
text-align: left !important;
.label {
text-align: left !important;
}
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-mob::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.text-underline {
font-weight: 700;
text-decoration: underline;
}
.extra-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 767px) {
&.left-in-tab {
align-items: start !important;
text-align: left !important;
.label {
text-align: left !important;
}
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-tab::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 0px) {
&.left-in-mob {
align-items: start !important;
text-align: left !important;
.label {
text-align: left !important;
}
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-mob::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.simple-btn {
position: relative;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
color: #4512b4;
font-size: 18px;
font-weight: 500;
width: fit-content;
img {
position: relative;
left: 0;
top: 1px;
transition: all 0.5s ease-in-out;
}
&:hover {
img {
left: 5px;
}
}
}
.simple-btn-cta {
position: relative;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
color: #b491ff;
font-size: 18px;
font-weight: 500;
width: fit-content;
img,
svg {
position: relative;
left: 0;
top: 1px;
transition: all 0.5s ease-in-out;
}
&:hover {
img,
svg {
left: 5px;
}
}
}
.rounded-btn {
position: relative;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
padding: 0px;
width: fit-content;
overflow: hidden;
transition: all 0.25s ease-in-out;
span {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
border-radius: 0;
background: linear-gradient(135deg, #5043da, #943cff);
padding: 14px 30px;
color: #fff;
font-size: 1rem;
font-weight: 500;
z-index: 2;
transition: all 0.25s ease-in-out;
text-align: center;
@media (max-width: 567px) {
padding: 12px 20px;
}
&.blue {
background: #25009b;
&:hover {
background: #19006c;
}
}
&.purple {
background: #7300ff;
&:hover {
background: #5c00cc;
}
}
}
&:hover {
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
span {
background: linear-gradient(135deg, #5d4bff, #a55bff);
transform: translateY(-1px);
}
}
}
.simple-btn-black {
display: block;
border: 1px solid #000000;
padding: 13px 15px;
border-radius: 5px;
color: #000000;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
width: fit-content;
transition: all 0.25s ease-in-out;
span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
&:hover {
background-color: #000000;
color: #fff;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
}
.simple-btn-white {
display: block;
border: 1px solid #ffffff;
padding: 13px 15px;
border-radius: 5px;
color: #ffffff;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
width: fit-content;
transition: all 0.25s ease-in-out;
span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
&:hover {
background-color: #fff;
color: #0901fe;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
svg path {
fill: #000;
}
}
}
/* Navbar Start */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
transition: top 0.5s ease-in-out;
padding: 5px;
.navbar-nav {
margin-right: 10px;
align-items: center;
gap: 5px;
.nav-item {
a.nav-link {
color: #fff;
text-align: center;
font-size: 1rem;
font-weight: 400;
&.active,
&:hover {
color: var(--text-accent);
}
}
.nav-dropdown {
position: absolute;
top: 18px;
right: 0;
z-index: 10;
max-width: 320px;
width: 90vw;
visibility: hidden;
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.25s ease,
transform 0.25s ease;
ul {
list-style: none;
margin: 35px 0 0 0;
padding: 8px 0;
background: #ffffff;
border-radius: 14px;
box-shadow:
0 20px 40px rgba(15, 23, 42, 0.18),
0 6px 12px rgba(15, 23, 42, 0.08);
overflow: hidden;
li {
a {
position: relative;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
padding: 14px 16px 14px 56px;
font-size: 14.5px;
font-weight: 500;
color: var(--text-dark);
transition:
background 0.25s ease,
color 0.25s ease;
span {
display: block;
font-size: 12px;
font-weight: 400;
color: #6b7280;
margin-top: 2px;
}
&:hover {
background: linear-gradient(90deg, rgba(91, 92, 255, 0.12), rgba(91, 92, 255, 0.04));
.link-icon-div {
background: linear-gradient(135deg, #7a2cff, #5b5cff);
img {
filter: brightness(0) invert(1);
}
}
}
.link-icon-div {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: #eef0ff;
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.25s ease,
box-shadow 0.25s ease;
img {
width: 18px;
height: 18px;
}
}
}
&:not(:last-child) a {
border-bottom: 1px solid #eef0ff;
}
}
}
}
/* Show dropdown on hover */
.nav-item:hover > .nav-dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
/* Optional arrow indicator */
.nav-dropdown::before {
content: "";
position: absolute;
top: 29px;
right: 24px;
width: 12px;
height: 12px;
background: #ffffff;
transform: rotate(45deg);
box-shadow: -3px -3px 6px rgba(15, 23, 42, 0.04);
}
&:hover .nav-dropdown {
visibility: visible;
opacity: 1;
.link-icon-div {
background-color: #fff;
}
}
}
}
.nav-contact-btn {
span {
padding: 8px 30px;
}
}
&.home-nav {
background: #2a327a;
position: relative;
}
&.scrolled {
position: fixed;
background: #2a327a;
border-bottom: 1px solid #8462ff63;
animation: navScrolled 0.5s ease forwards;
}
}
/* Mobile offcanvas navbar start */
.open-nav-icon {
background: transparent;
border: 0;
color: #000;
font-weight: 700;
margin-top: 2rem;
margin-left: 2rem;
font-size: 1rem;
letter-spacing: 0.5rem;
}
.open-nav-icon i {
font-size: 2rem;
vertical-align: middle;
}
#navOfcanvas .btn-close {
/* position: absolute; */
right: -32px;
top: 6px;
font-size: 1.2rem;
background-color: #ffffff;
box-shadow: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
outline: none;
box-shadow: none;
opacity: 1;
}
#navOfcanvas .btn-close:hover {
background-color: var(--bg-extra-light);
}
.offcanvas-body {
padding-top: 0;
}
.offcanvas-body p.intro {
font-size: 0.8rem;
}
.main-nav {
margin-left: -16px;
margin-right: -16px;
border-radius: 0;
}
.list-group {
border-radius: 0;
}
.list-group.sub-content {
display: none;
}
.list-group li a {
padding-top: 6px;
padding-bottom: 6px;
display: block;
text-decoration: none;
color: var(--text-secondary);
}
.list-group li.sub-nav {
position: relative;
}
.list-group li.sub-nav::after {
content: url('data:image/svg+xml,');
display: block;
position: absolute;
right: 16px;
top: 16px;
width: 20px;
height: 20px;
transition: all 0.25s ease-in-out;
}
.list-group li.sub-nav:hover::after {
right: 10px;
}
.list-group-item {
border-bottom: 1px solid #f4f5f5;
}
.list-group-item:hover {
background-color: #f4f5f5;
border-radius: 0;
}
#nav_sub {
max-width: 100%;
border: none;
@media screen and (max-width: 567px) {
width: 100%;
}
}
#nav_sub .offcanvas-header {
justify-content: space-between;
flex-direction: row-reverse;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-block: 10px;
h5 {
font-size: 20px;
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
}
#nav_sub .offcanvas-header button {
border: 0;
background: transparent;
box-shadow: none;
margin: 0;
}
#nav_sub .list-group {
margin-left: -16px;
margin-right: -16px;
}
#nav_sub .list-group.sub-content {
display: block;
}
#navOfcanvas {
max-width: 100%;
border: none;
@media screen and (max-width: 567px) {
width: 100%;
}
}
#navOfcanvas .offcanvas-header {
padding-block: 8px;
}
.sub-catecory-each-list {
padding: 1rem;
&.only-links {
li a {
border-bottom: 1px solid #eceeff;
padding-block: 15px;
&:hover {
color: var(--bg-primary);
filter: unset;
}
}
}
&.list-style-none {
list-style-type: none;
}
}
.sub-catecory-each-list p {
color: var(--text-dark);
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
.sub-catecory-each-list {
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
li {
a {
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
font-weight: 400;
color: var(--text-dark);
text-decoration: none;
transition: all 0.5s ease-in-out;
div {
background: rgb(236, 239, 255);
border-radius: 50%;
width: 32px;
height: 32px;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
&:hover {
filter: grayscale(100);
}
}
}
}
}
/* Mobile offcanvas navbar end */
.mega-dropdown-menu {
position: absolute;
left: 0;
top: 50px;
z-index: 1000;
width: 100%;
padding-top: 25px;
display: none;
max-height: calc(100vh - 100px);
.menu-inner-div {
width: 100%;
overflow: auto;
background-color: #fff;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
border-radius: 10px;
padding: 25px;
}
.head {
position: relative;
color: var(--text-dark);
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
.each-dropdown-ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
a {
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
font-weight: 400;
color: var(--text-dark);
text-decoration: none;
transition: all 0.5s ease-in-out;
div {
background: rgb(236, 239, 255);
border-radius: 50%;
width: 32px;
height: 32px;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
&:hover {
filter: grayscale(100);
}
}
}
}
}
.nav-item:hover {
cursor: pointer;
.mega-dropdown-menu {
display: block;
}
}
/* Navbar End */
/* Home Hero Start */
.hero-section {
position: relative;
width: 100%;
overflow: hidden;
&::before {
content: "";
background-image: url("../images/hero-bg-pattern.svg");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
display: block;
background: linear-gradient(180deg, #222a71 0%, #2a2757 46.63%, #1a0f2b 100%);
padding-block: 60px;
@media (max-width: 768px) {
padding-block: 35px;
}
.custom-container {
position: relative;
z-index: 1;
display: block;
.label {
display: block;
color: #fff;
font-family: "PT Serif", serif;
font-size: 28px;
font-weight: 400;
margin-bottom: 10px;
}
.head {
color: #fff;
font-family: "Ubuntu", sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.2;
margin: 0;
span {
color: var(--text-accent);
}
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
line-height: 1.5;
max-width: 991px;
margin: 0 auto;
margin-block: 15px 50px;
@media (max-width: 768px) {
margin-block: 15px 30px;
}
span {
font-weight: 600;
}
}
.hero-btn {
span {
padding: 12px 25px;
font-size: 1rem;
@media (max-width: 567px) {
padding: 12px 20px;
}
}
}
.hero-btn-white {
display: block;
border: 1px solid #fff;
padding: 11px 25px;
border-radius: 5px;
color: #fff;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
margin-inline: auto;
transition: all 0.25s ease-in-out;
span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
&:hover {
background-color: #fff;
color: #000;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
}
}
.hero-bottom-part {
border-top: 1px solid #504588;
padding-top: 20px;
margin-top: 30px;
.para-1 {
color: #c6cdd9;
font-size: 16px;
font-weight: 400;
margin-bottom: 8px;
}
.para-2 {
color: #fff;
font-size: 16px;
font-weight: 500;
margin: 0;
}
}
.hero-thunder-part {
display: flex;
gap: 8px;
color: #fff;
font-size: 16px;
font-style: italic;
font-weight: 500;
}
.hero-right-small-card {
border-radius: 20px;
background: #fff;
box-shadow: 0 4px 4px 0 rgba(255, 255, 255, 0.25);
padding: 15px 15px;
max-width: 315px;
width: 100%;
position: absolute;
left: 5%;
bottom: -30px;
.head {
display: flex;
align-items: center;
gap: 5px;
color: #333;
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.para {
color: #333;
font-size: 12px;
font-weight: 400;
margin: 0;
}
}
.hero-list-para {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
}
.hero-list {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 6px;
li {
color: #fff;
font-size: 16px;
font-weight: 400;
}
}
.hero-extra-part {
color: #e6e7ff;
text-align: center;
font-size: 14px;
font-style: italic;
font-weight: 400;
margin: 0;
}
.ungap-photo {
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
width: calc(100% + 100px);
}
@media (max-width: 1400px) {
.cloud-hero-img {
object-fit: cover;
background-position: center;
}
}
}
.hero-section-home {
position: relative;
width: 100%;
overflow: hidden;
&::before {
content: "";
background-image: url("../images/hero-bg-pattern.svg");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
display: block;
background: linear-gradient(180deg, #222a71 0%, #2a2757 46.63%, #1a0f2b 100%);
padding-block: 60px;
@media (max-width: 768px) {
padding-block: 35px;
}
.custom-container {
position: relative;
z-index: 1;
display: block;
.label {
display: block;
color: #fff;
font-family: "PT Serif", serif;
font-size: 28px;
font-weight: 400;
margin-bottom: 10px;
}
.head {
color: #fff;
font-family: "Ubuntu", sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.2;
margin: 0;
span {
color: #caccff;
text-decoration: underline;
text-underline-offset: 5px;
}
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
line-height: 1.5;
max-width: 991px;
margin: 0 auto;
margin-block: 15px 50px;
@media (max-width: 768px) {
margin-block: 15px 30px;
}
span {
font-weight: 600;
}
}
.hero-btn {
span {
padding: 12px 25px;
font-size: 1rem;
@media (max-width: 567px) {
padding: 12px 20px;
}
}
}
.hero-btn-white {
display: block;
border: 1px solid #fff;
padding: 11px 25px;
border-radius: 5px;
color: #fff;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
margin-inline: auto;
transition: all 0.25s ease-in-out;
span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
&:hover {
background-color: #fff;
color: #000;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
}
}
}
.hero-highlighted-div {
background: #2f2266;
padding-block: 25px;
.para {
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 500;
margin: 0;
span {
font-weight: 600;
}
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
width: fit-content;
margin-inline: auto;
li {
position: relative;
color: #fff;
font-size: 16px;
font-weight: 400;
padding-left: 33px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
top: -2px;
left: 0;
}
}
}
.list-2 {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
width: fit-content;
margin-inline: auto;
li {
position: relative;
color: #fff;
font-size: 16px;
font-weight: 400;
padding-left: 22px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
top: -1px;
left: 0;
}
}
}
}
.hero-highlighted-div-2 {
background: #2f2266;
padding-block: 25px;
.para {
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 500;
margin: 0;
span {
font-weight: 600;
}
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
width: fit-content;
margin-inline: auto;
li:first-child {
color: #fff;
font-size: 16px;
font-weight: 600;
text-align: center;
@media (max-width: 767px) {
width: 100%;
}
}
li:not(:first-child) {
position: relative;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 5px 15px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.15);
}
}
}
.all-clients-section {
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.all-clients {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
z-index: 1;
padding-block: 15px;
.trusted-text {
color: #fff;
text-align: center;
font-size: 20px;
font-weight: 600;
white-space: nowrap;
margin: 0;
@media (max-width: 420px) {
white-space: wrap;
}
}
.swiper {
position: relative;
.swiper-pagination,
.swiper-button-next,
.swiper-button-prev {
display: none !important;
}
}
}
@keyframes navScrolled {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
/* Home Hero End */
/* About hero start */
.about-hero-section {
position: relative;
width: 100%;
overflow: hidden;
&::before {
content: "";
background-image: url("../images/about-hero-bg.webp");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 101%;
height: 100%;
}
display: block;
padding-block: 60px;
@media (max-width: 768px) {
padding-block: 35px;
}
.custom-container {
position: relative;
z-index: 1;
display: block;
.head {
color: #fff;
font-family: "Ubuntu", sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 1.2;
margin: 0;
span {
color: #8273ff;
}
}
.para {
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 1.5;
max-width: 991px;
margin: 0 auto;
margin-block: 15px 20px;
@media (max-width: 768px) {
margin-block: 15px 30px;
}
span {
font-weight: 600;
}
}
.hero-btn {
span {
padding: 12px 25px;
font-size: 1rem;
@media (max-width: 567px) {
padding: 12px 20px;
}
}
}
.hero-btn-white {
display: block;
border: 1px solid #fff;
padding: 11px 25px;
border-radius: 5px;
color: #fff;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
margin-inline: auto;
transition: all 0.25s ease-in-out;
span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
&:hover {
background-color: #fff;
color: #000;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
}
.highlighted-area {
border-radius: 15px;
background: #1d1733;
padding: 20px;
max-width: 1050px;
width: 100%;
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0 auto 0 auto;
}
.bottom-para {
color: #e6e7ff;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-block: 20px 30px;
}
}
}
/* About hero end */
/* Epixel Details Start */
.we-buid-for-section {
.epixel-title {
background: linear-gradient(90deg, #6c47e5 13.96%, #4889ff 87.17%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
}
.epixel-sub-title {
color: #464646;
text-align: center;
font-size: 24px;
font-weight: 700;
margin-bottom: 15px;
}
.epixel-para {
color: #333;
font-size: 18px;
font-weight: 400;
max-width: 1200px;
margin-inline: auto;
margin-bottom: 0;
span {
font-weight: 600;
}
}
a {
text-decoration: none;
}
.each-service-card {
border-radius: 10px;
background: #f6f5ff;
padding: 25px 20px;
display: flex;
flex-direction: column;
gap: 15px;
border: 1px solid var(--bg-light);
border-top: 4px solid var(--bg-primary);
height: 100%;
@media screen and (max-width: 567px) {
flex-direction: column;
align-items: center;
padding-inline: 15px;
}
&:hover {
border-color: #333;
}
.img-div div {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.content-div {
display: flex;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
&:not(.bg-white) .each-service-card {
background-color: #fff;
}
}
.we-buid-for-section-2 {
.each-service-card {
border-radius: 20px;
background: #fff;
overflow: hidden;
.img-div {
width: 100%;
width: auto;
img {
width: 100%;
width: 100%;
object-fit: cover;
}
}
.content-div {
padding: 20px 15px;
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Epixel Details End */
/* Case Study Start */
.casestudy-section {
.case-study-img {
border-radius: 15px;
background: #fff;
padding: 10px;
width: 100%;
max-height: calc(100vh - 100px);
height: 100%;
position: sticky;
top: 90px;
.img-inner {
position: relative;
background: #eeebf1;
border-radius: 10px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 200px;
height: 200px;
background-color: #e8dcd100;
border-radius: 50%;
}
&::after {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 205px;
height: 205px;
border: 1px solid #e8dcd1;
border-radius: 50%;
}
&.wondergo {
background-color: #fff;
border: 1px solid var(--bg-primary);
&::before {
content: none;
background-color: transparent;
}
&::after {
content: none;
border-color: transparent;
}
}
}
}
.case-study-content {
position: relative;
height: 100%;
padding-bottom: 60px;
.case-study-title {
color: var(--text-dark);
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
span {
color: #5043da;
font-size: 28px;
font-weight: 700;
}
}
.case-study-para {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
line-height: 1.4;
margin: 0;
}
.case-study-delivers {
color: var(--text-secondary);
font-size: 18px;
font-weight: 600;
margin-block: 20px 0;
}
.case-study-list {
padding: 0;
margin: 0;
margin-block: 12px;
list-style: none;
display: flex;
justify-content: center;
flex-direction: column;
gap: 15px;
li {
display: flex;
gap: 5px;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin: 0;
.left-part {
position: relative;
display: flex;
align-items: center;
justify-content: center;
top: 2.5px;
}
.right-part {
display: flex;
justify-content: center;
flex-direction: column;
gap: 5px;
.para-1 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
line-height: 1.2;
}
.para-2 {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
line-height: 1.3;
margin: 0;
}
}
}
}
.casestudy-btn {
white-space: nowrap;
position: absolute;
bottom: 0;
}
@media screen and (max-width: 991px) {
.casestudy-btn {
left: 50%;
transform: translateX(-50%);
}
}
}
.case-study-tabs {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
overflow-x: auto;
max-width: 100%;
margin-inline: auto;
width: fit-content;
scrollbar-width: none;
-ms-overflow-style: none;
/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
&::-webkit-scrollbar {
display: none;
}
button {
padding: 8px 20px;
border: 2px solid #e7e7e7;
background: none;
border-radius: 5px;
box-shadow: none;
outline: none;
img {
width: auto;
height: 35px;
}
&:hover {
border-color: #c1c1c1;
}
&.active {
border-color: #261859;
}
}
}
.outcome-highlight {
border-radius: 15px;
border: 1px solid #ccd8ff;
background: #f2f0ff;
padding: 15px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
.head {
color: #3e32a7;
text-align: center;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}
.para {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
.case-badges {
display: flex;
gap: 10px;
margin: 10px 0 18px;
.badge {
font-size: 14px;
padding: 6px 15px;
border-radius: 20px;
background: var(--bg-primary);
color: #fff;
font-weight: 600;
display: inline-flex;
align-items: center;
border: 1px solid #e2d8ff;
}
.badge-sector {
background: #f1eeff;
color: var(--bg-primary);
border-color: #ccefff;
}
.badge-region {
background: var(--bg-primary);
color: #fff;
}
}
}
/* Case Study End */
/* Services Start */
.services-section-home {
.service-card-row {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: #fff;
}
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #fff;
}
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #fff;
}
.top-liner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
.bottom-liner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
.service-card-column {
border: 1px solid #f5ecff;
padding: 0;
&:hover {
background-color: #f8f8f8;
}
@media screen and (max-width: 767px) {
&:nth-child(even) {
background-color: #f8f8f8;
}
}
}
}
.service-card {
padding: 25px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 15px;
.service-card-img {
margin-bottom: 10px;
}
.service-card-content {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
.head {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
.para {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
&:not(.bg-white) {
.service-card-column {
border: 1px solid #f2e6ff;
padding: 0;
}
}
.closing-para {
color: #5043da;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 600;
margin: 0;
}
}
/* Services End */
/* Services Start Home */
.services-section-home-2 {
.service-card-row {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: #fff;
}
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #fff;
}
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #fff;
}
.top-liner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
.bottom-liner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
.service-card-column {
border: 1px solid #f5ecff;
padding: 0;
&:hover {
background-color: #f8f8f8;
}
@media screen and (max-width: 767px) {
&:nth-child(even) {
background-color: #f8f8f8;
}
}
}
}
.service-card {
padding: 25px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 15px;
.service-card-img {
div {
width: 65px;
height: 65px;
border-radius: 5px;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
display: flex;
align-items: center;
justify-content: center;
}
}
.service-card-content {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
.head {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
.para {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
span {
border-radius: 5px;
background: #f1f5f9;
padding: 2px 10px;
color: #212844;
text-align: center;
font-size: 14px;
font-weight: 500;
}
}
}
}
&:not(.bg-white) {
.service-card-column {
border: 1px solid #f2e6ff;
padding: 0;
}
}
.closing-para {
color: #5043da;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 600;
margin: 0;
}
}
/* Services End Home */
/* How We Work Start */
.how-we-work-section-home {
.work-process-img {
position: sticky;
max-height: 100%;
top: 90px;
}
.how-we-work-process {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
li {
position: relative;
display: flex;
gap: 15px;
padding-bottom: 20px;
height: 100%;
&::before {
content: "";
position: absolute;
top: 0;
left: 21px;
width: 1px;
height: 100%;
border-left: 2px dashed #000;
z-index: -1;
}
&.last-li::before {
display: none;
}
.left-part {
div {
border-radius: 50%;
width: 42px;
height: 42px;
border: 1px solid #383972;
background: #f6f2fb;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
}
.right-part {
display: flex;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
margin: 0;
line-height: 1.2;
}
}
}
}
.each-mob-steps-card {
padding-bottom: 25px;
.header-div {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
margin: 0;
}
}
}
/* How We Work End */
/* Tech We Use Start */
.tech-we-use-section {
.tech-tabs {
display: flex;
align-items: center;
overflow-x: auto;
margin-inline: auto;
max-width: fit-content;
width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
&::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 991px) {
justify-content: center;
flex-wrap: wrap;
}
button {
position: relative;
color: #4a4363;
font-size: 18px;
font-weight: 500;
/* text-transform: uppercase; */
padding: 10px 18px;
border-bottom: 1px solid #e5e5e5;
transition: all 0.5s ease-in-out;
box-shadow: none;
outline: none;
white-space: nowrap;
background: transparent;
&.active,
&:hover {
color: #1013af;
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: transparent;
border-radius: 100px;
transition: all 0.5s ease-in-out;
}
&.active::before {
background: #1013af;
}
}
}
.all-tech-list {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
li {
display: flex;
align-items: center;
gap: 8px;
border-radius: 100px;
border: 1px solid var(--bg-tertiary);
background: #fff;
padding: 5px;
padding-right: 20px;
}
.icon-div {
width: 42px;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
border: 1px solid #7375ff;
background: #eeefff;
img {
width: 26px;
height: 26px;
}
}
.tech-name {
color: #7375ff;
font-size: 18px;
font-weight: 500;
margin: 0;
}
}
/* @media (min-width: 767px) and (max-width: 991px) {
.tech-middle-part {
display: flex;
gap: 25px;
.tech-tabs {
display: block;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 10px;
max-width: unset;
width: 300px;
max-height: calc(100vh - 90px);
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
& button {
width: 100%;
text-align: left;
border-bottom: none;
&.active {
background-color: #d7d7ff;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: transparent;
border-radius: 100px;
transition: all 0.5s ease-in-out;
}
&.active::before {
background: #1013af;
}
}
}
.tab-content {
flex: 1;
}
}
} */
}
/* Tech We Use End */
/* Industry We Serve Start */
.industry-we-serve-section {
a {
text-decoration: none;
}
.industry-card {
border-radius: 15px;
border: 1px solid #e3e6ff;
background: #fff;
padding: 25px 15px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
height: 100%;
.industry-card-img {
div {
border: 3px solid #383972;
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-inline: auto;
}
}
.industry-card-content {
display: flex;
justify-content: center;
flex-direction: column;
gap: 5px;
.head {
color: #383972;
text-align: center;
font-size: 20px;
font-weight: 600;
margin: 0;
}
.para {
color: #383972;
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin: 0;
}
}
}
.each-industry-col-1 .industry-card,
.each-industry-col-3 .industry-card,
.each-industry-col-6 .industry-card,
.each-industry-col-8 .industry-card {
background: linear-gradient(180deg, #cbd1ff 0%, #fffcfd 100%) !important;
}
&.home {
@media (min-width: 991px) {
.each-industry-col-1 .industry-card,
.each-industry-col-3 .industry-card,
.each-industry-col-5 .industry-card,
.each-industry-col-7 .industry-card {
background: linear-gradient(180deg, #cbd1ff 0%, #fffcfd 100%) !important;
}
.each-industry-col-6 .industry-card,
.each-industry-col-8 .industry-card {
background: transparent !important;
}
}
@media (min-width: 769px) and (max-width: 991px) {
.each-industry-col-2 .industry-card,
.each-industry-col-3 .industry-card,
.each-industry-col-5 .industry-card,
.each-industry-col-6 .industry-card,
.each-industry-col-8 .industry-card {
background: #fff !important;
}
.each-industry-col-1 .industry-card,
.each-industry-col-4 .industry-card,
.each-industry-col-6 .industry-card,
.each-industry-col-7 .industry-card {
background: linear-gradient(180deg, #cbd1ff 0%, #fffcfd 100%) !important;
}
}
}
@media (min-width: 769px) and (max-width: 991px) {
.each-industry-col-2 .industry-card,
.each-industry-col-4 .industry-card,
.each-industry-col-5 .industry-card,
.each-industry-col-6 .industry-card,
.each-industry-col-8 .industry-card {
background: #fff !important;
}
.each-industry-col-1 .industry-card,
.each-industry-col-3 .industry-card,
.each-industry-col-5 .industry-card,
.each-industry-col-7 .industry-card {
background: linear-gradient(180deg, #cbd1ff 0%, #fffcfd 100%) !important;
}
}
@media (min-width: 578px) and (max-width: 768px) {
.each-industry-col-2 .industry-card,
.each-industry-col-3 .industry-card,
.each-industry-col-6 .industry-card,
.each-industry-col-7 .industry-card {
background: #fff !important;
}
.each-industry-col-1 .industry-card,
.each-industry-col-4 .industry-card,
.each-industry-col-5 .industry-card,
.each-industry-col-8 .industry-card {
border: 1px solid #e3e6ff;
background: linear-gradient(180deg, #cbd1ff 0%, #fffcfd 100%) !important;
}
}
@media screen and (max-width: 576px) {
.each-industry-col-2 .industry-card,
.each-industry-col-4 .industry-card,
.each-industry-col-6 .industry-card,
.each-industry-col-8 .industry-card {
background: #fff !important;
}
.each-industry-col-1 .industry-card,
.each-industry-col-3 .industry-card,
.each-industry-col-5 .industry-card,
.each-industry-col-7 .industry-card {
background: linear-gradient(180deg, #cbd1ff 0%, #fffcfd 100%) !important;
}
}
}
/* Industry We Serve End */
/* CTA Start */
.cta-section {
position: relative;
border-radius: 30px;
padding: 50px 5%;
background-image: url("../images/icons/cta-bg.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 50px 50px;
@media screen and (max-width: 991px) {
border-radius: 15px;
padding: 50px 20px;
}
&::before {
position: absolute;
top: 0;
right: 0;
}
.cta-content {
position: relative;
display: flex;
justify-content: center;
gap: 10px;
flex-direction: column;
z-index: 1;
.head {
color: #fff;
font-size: 30px;
font-weight: 600;
margin-bottom: 0;
font-style: italic;
span {
font-weight: 600;
}
}
.para {
color: #fff;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.cta-btn {
border: 1px solid #3d4a7d;
background: #3d4a7d;
margin-top: 45px;
&::before {
content: "";
background: #3d4a7d;
}
span {
background: #3d4a7d;
}
&:hover {
span {
opacity: 0.8;
}
&::before {
height: 100%;
}
}
}
.cta-white-btn {
display: block;
border: 1px solid #ffffff;
padding: 13px 15px;
border-radius: 5px;
color: #ffffff;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
width: fit-content;
transition: all 0.25s ease-in-out;
span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 5px;
}
&:hover {
background-color: #fff;
color: #000;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
span {
svg path {
stroke: #000;
}
}
}
}
}
.no-obligation-text {
font-size: 16px;
color: #fff;
font-weight: 400;
margin-block: 10px 0;
span {
font-weight: 600;
}
}
@media (min-width: 991px) {
.cta-btn-white,
.rounded-btn {
max-width: 375px;
width: 100%;
}
}
.cta-btn-white {
display: block;
border: 1px solid #ffffff;
background: #fff;
padding: 11px 23px;
border-radius: 5px;
text-align: center;
color: #0901fe;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
width: fit-content;
transition: all 0.25s ease-in-out;
&:hover {
background-color: transparent;
color: #fff;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
}
}
/* CTA End */
/* Testimonial Start */
.testimonial-section {
.testimonial-card {
position: relative;
border-radius: 24px;
height: 100%;
border: 1px solid #e9eff5;
padding-top: 30px !important;
.testimonial-head {
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #e9eff5;
padding-bottom: 25px;
margin-bottom: 25px;
.testimonial-img {
div {
width: 56px;
height: 56px;
border-radius: 50%;
overflow: hidden;
border: 1px solid #eaeaea;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.testimonial-content {
display: flex;
flex-direction: column;
gap: 1px;
.name {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
.position {
color: #717276;
font-size: 16px;
font-weight: 500;
margin: 0;
}
}
}
.testimonial-body {
.Stars {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
font-size: 28px;
line-height: 1;
&::before {
content: "★★★★★";
letter-spacing: 3px;
background: linear-gradient(90deg, var(--bg-primary) var(--percent), #dabbff var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.comment {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
@media screen and (max-width: 567px) {
& {
border: 1px solid #eee;
background: #fefefe;
padding: 10px;
}
}
.testimonial-tag {
position: absolute;
right: 8px;
top: 8px;
padding: 3px 10px;
font-size: 12px;
font-weight: 600;
background-color: #eaebff;
color: var(--bg-primary);
border-radius: 20px;
}
}
.testimonial-swipper-btn {
position: relative;
display: flex;
align-items: center;
gap: 15px;
.swiper-button-prev {
position: unset;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--bg-primary);
@media screen and (max-width: 991px) {
width: 36px;
height: 36px;
}
@media screen and (max-width: 767px) {
width: 32px;
height: 32px;
}
&:hover {
background-color: #841fff24;
}
&:after {
position: relative;
content: url('data:image/svg+xml,');
font-size: unset;
top: 2px;
}
}
.swiper-button-next {
position: unset;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--bg-primary);
@media screen and (max-width: 991px) {
width: 36px;
height: 36px;
}
@media screen and (max-width: 767px) {
width: 32px;
height: 32px;
}
&:hover {
background-color: #841fff24;
}
&:after {
position: relative;
content: url('data:image/svg+xml,');
font-size: unset;
top: 2px;
}
}
}
.swiper-pagination {
position: static;
margin-top: 35px;
.swiper-pagination-bullet {
position: relative;
width: 16px;
height: 16px;
background: transparent;
border: 1px solid #ededed;
opacity: 1;
overflow: hidden;
}
.swiper-pagination-bullet-active {
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #bbb;
}
}
}
}
/* Testimonial End */
/* About Us Start */
.about-us-section {
.details-para {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
margin-bottom: 15px;
line-height: 1.4;
}
.core-head {
position: relative;
color: #00014d;
font-size: 20px;
font-weight: 700;
&:before {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 35px;
height: 2px;
background: #9e9e9e;
}
}
.core-each-item {
position: relative;
padding-left: 28px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
.head {
color: var(--text-dark);
font-size: 18px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 5px;
}
.para {
color: #212844;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
margin: 0;
}
}
.recognization-head {
color: #00014d;
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
}
.about-row {
display: flex;
gap: 35px;
.left-part {
max-height: calc(100vh - 90px);
}
.right-part {
width: 100%;
flex: 1;
}
}
}
/* About Us End */
/* Blog Start */
.blog-section {
.blog-card {
border-radius: 15px;
overflow: hidden;
border: 2px solid transparent;
.blog-img {
width: 100%;
height: 225px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.blog-content {
padding: 20px 15px;
.blog-head {
display: flex;
align-items: center;
gap: 25px;
label {
display: flex;
align-items: center;
gap: 5px;
color: #666;
font-size: 14px;
font-weight: 400;
}
}
.title,
.title a {
text-decoration: none;
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin-block: 15px 10px;
}
.description {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.45;
margin-block: 0 20px;
padding-bottom: 20px;
border-bottom: 1px solid #d8d8d8;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
p *,
p *,
h2 *,
h3 *,
h4 *,
h5 *,
ul* {
font-family: "Poppins", sans-serif !important;
color: var(--text-secondary) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
}
p,
h2,
h3,
h4,
h5,
ul {
display: none;
margin: 0;
font-family: "Poppins", sans-serif !important;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.45;
&:first-child {
display: block;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
&:hover {
border: 2px solid #4e69ff;
.title , .title a{
color: #5043da !important;
}
}
}
}
/* Blog End */
/* FAQ Start */
.faq-section {
.accordion-item {
margin-bottom: 15px;
background-color: transparent;
border: none;
border-radius: 10px;
overflow: hidden;
border-radius: 16px;
border: 1px solid #fbfbfe;
background: #fff;
box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.06);
@media screen and (max-width: 567px) {
border-radius: 8px;
}
}
&.bg-white .accordion-item {
border: 1px solid #ededed;
}
.accordion-header {
background: transparent;
}
.info-div {
position: absolute;
top: 20px;
left: 25px;
border-radius: 50px;
background: #f2f2f2;
width: 28px;
height: 28px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
img {
filter: grayscale(100%) brightness(2);
}
@media screen and (max-width: 767px) {
display: none;
}
}
.accordion-button {
background-color: transparent;
box-shadow: none;
border: none;
outline: none;
color: var(--text-dark);
font-size: 18px;
font-weight: 600;
padding: 20px 20px 20px 58px;
transition: all 0.25s ease-in-out;
gap: 10px;
@media screen and (max-width: 767px) {
padding: 20px 10px;
}
}
.accordion-button::after {
content: "\002B";
font-size: 24px;
font-weight: 400;
color: #fff;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: linear-gradient(193deg, #897fff 5.92%, #4a3aff 89.21%);
box-shadow:
0px -1px 1px 0px rgba(0, 0, 0, 0.12) inset,
0px 1px 1.5px 0px rgba(255, 255, 255, 0.25) inset,
0px 2px 6px 0px rgba(74, 58, 255, 0.1);
}
.accordion-button:not(.collapsed)::after {
content: "\2212";
font-size: 24px;
font-weight: 400;
color: #fff;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: linear-gradient(193deg, #897fff 5.92%, #4a3aff 89.21%);
box-shadow:
0px -1px 1px 0px rgba(0, 0, 0, 0.12) inset,
0px 1px 1.5px 0px rgba(255, 255, 255, 0.25) inset,
0px 2px 6px 0px rgba(74, 58, 255, 0.1);
}
.accordion-button:not(.collapsed) {
padding-bottom: 0 !important;
.info-div {
background-color: #fff;
img {
filter: unset;
}
}
}
.accordion-item:has(.accordion-button:not(.collapsed)) {
background: linear-gradient(243deg, #fafbff 33.93%, #e5ebff 85.45%);
border-color: #e3e7ff;
}
.accordion-body {
background-color: transparent;
color: #000;
font-size: 16px;
font-weight: 400;
padding: 10px 20px 15px 58px;
@media screen and (max-width: 767px) {
padding-inline: 10px;
}
ul {
color: #000;
font-size: 16px;
font-weight: 400;
padding-left: 20px;
}
}
.accordion-body a {
color: #1e6ca4;
}
}
/* FAQ End */
/* Footer Start */
.footer {
background-image: url("../images/footer-bg.webp");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
.header-part {
padding-bottom: 45px;
margin-bottom: 45px;
border-bottom: 1px solid #3e1279;
@media screen and (max-width: 767px) {
border: none;
margin-bottom: 15px;
}
}
.footer-description {
color: #fff;
font-size: 18px;
font-weight: 400;
margin-block: 25px 0;
max-width: 1074px;
margin-inline: auto;
}
button.link-group-head {
position: relative;
background: transparent;
border: none;
padding: 0;
padding-bottom: 12px;
text-align: start;
border-bottom: 1px solid #341c61;
&.collapsed {
margin-bottom: 0;
transition: all 0.25s ease-in-out;
}
&::before {
content: url('data:image/svg+xml,');
transform: rotate(0deg);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: 4px;
transition: all 0.25s ease-in-out;
}
&:not(.collapsed)::before {
transform: rotate(90deg);
}
}
.link-group-head {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.all-links {
display: flex;
justify-content: center;
flex-direction: column;
gap: 15px;
list-style: none;
margin: 0;
padding: 0;
li {
a {
text-decoration: none;
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
display: flex;
gap: 8px;
transition: all 0.25s ease-in-out;
&:hover {
color: var(--text-accent);
}
}
}
}
.social-links {
display: flex;
align-items: center;
gap: 10px;
a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid #ffffff25;
&:hover {
background: var(--bg-secondary);
}
}
}
.bottom-part {
background: linear-gradient(165deg, #3000b6 12.14%, #150050 91.33%);
padding-block: 16px;
p {
color: #fff;
font-size: 14px;
font-weight: 400;
margin: 0;
}
}
}
/* Footer Start */
/* Services Hero Start */
.services-hero-section {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #222a71 0%, #2a2757 46.63%, #1a0f2b 100%);
padding-block: 75px;
@media (min-width: 768px) {
min-height: 100vh;
}
.custom-container.hero-content {
position: relative;
z-index: 1;
padding-block: 50px 90px;
display: block;
.label {
display: block;
color: #fff;
font-family: "PT Serif", serif;
font-size: 28px;
font-weight: 400;
margin-bottom: 10px;
}
.head {
color: #fff;
font-family: "Ubuntu", sans-serif;
font-size: 52px;
font-weight: 700;
line-height: 1.2;
margin: 0;
max-width: 1250px;
margin-inline: auto;
span {
color: var(--text-accent);
}
}
.para {
color: #fff;
font-size: 24px;
font-weight: 400;
line-height: 1.5;
max-width: 950px;
margin: 0 auto;
margin-block: 15px 35px;
}
.hero-btn {
span {
padding: 12px 50px;
font-size: 1.125rem;
@media (max-width: 567px) {
padding: 12px 20px;
}
}
}
.hero-btn-white {
display: block;
border: 1px solid #fff;
padding: 12px 25px;
border-radius: 5px;
color: #fff;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
margin-inline: auto;
max-width: 395px;
width: 100%;
transition: all 0.25s ease-in-out;
&:hover {
background-color: #fff;
color: #000;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
}
}
&::before {
content: "";
background-image: url("../images/hero-bg-pattern.svg");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-stats {
display: flex;
align-items: center;
justify-content: center;
max-width: 800px;
margin-inline: auto;
padding: 15px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 35px;
div {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
&:last-child {
border-right: none;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 400;
margin: 0;
}
.para-2 {
color: #c5c9ff;
text-align: center;
font-size: 20px;
font-weight: 700;
margin: 0;
}
}
}
}
/* Service Hero End */
/* Service We Provide Start */
.service-section {
.each-service-card {
border-radius: 10px;
background: #f6f5ff;
padding: 25px 20px;
display: flex;
gap: 15px;
border: 1px solid #f6f5ff;
height: 100%;
@media screen and (max-width: 991px) {
flex-direction: column;
}
@media screen and (max-width: 567px) {
flex-direction: column;
align-items: center;
padding-inline: 15px;
}
&:hover {
border: 1px solid var(--bg-light);
}
.img-div div {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
border: 5px solid #dfdbff;
display: flex;
align-items: center;
justify-content: center;
}
.number-div {
border-radius: 50%;
width: 40px;
height: 40px;
flex: none;
border: 0.8px solid #3f32c2;
background: #e6e3ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
color: #3f32c2;
}
.content-div {
display: flex;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
&:not(.bg-white) .each-service-card {
background-color: #fff;
}
.bottom-para-text {
color: #5043da;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 600;
.red {
color: #ff5757;
}
.blue {
color: #383972;
}
}
}
/* Service We Provide End */
/* Services Benifits Start */
.service-benifits-section {
.benifit-card-row {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: #f6f2fb;
}
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #f6f2fb;
}
.top-liner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #f6f2fb;
}
.bottom-liner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #f6f2fb;
}
.benifit-card-column {
border: 1px solid #eddfff;
padding: 0;
&:hover {
background-color: #f8f8f8;
}
@media screen and (max-width: 767px) {
&:nth-child(odd) {
background-color: #f8f8f8;
}
}
}
}
.benifit-card {
padding: 35px 25px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 15px;
.benifit-card-img {
border-radius: 50%;
width: 50px;
height: 50px;
margin-bottom: 5px;
}
.benifit-card-content {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
.head {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
.para {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Services Benifits End */
/* Service CTA Start */
.services-cta-section {
background: #212844;
padding-block: 50px;
.para-1 {
color: #fff;
font-size: 26px;
font-weight: 600;
margin-bottom: 10px;
line-height: 1.3;
}
.para-2 {
color: #fff;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.cta-btn {
border: 1px solid #3d4a7d;
background: #3d4a7d30;
&::before {
content: "";
background: #3d4a7d;
}
&:hover {
&::before {
height: 100%;
}
}
span {
background: #3d4a7d;
/* white-space: nowrap; */
}
}
}
/* Services CTA End */
/* Why EPS Start */
.why-eps-section {
.why-eps-card {
border-radius: 10px;
display: flex;
gap: 15px;
height: 100%;
@media screen and (max-width: 768px) {
flex-direction: column;
align-items: center;
padding: 25px 15px;
border: 1px dashed var(--bg-light);
}
.img-div div {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.content-div {
display: flex;
flex-direction: column;
gap: 5px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Why EPS End */
/* Service How We Work Start */
.service-how-we-work-section {
.work-process-img {
position: sticky;
max-height: 100%;
top: 90px;
}
.how-we-work-process {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
li {
position: relative;
display: flex;
gap: 20px;
padding-bottom: 30px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
top: 48px;
left: 16px;
}
&.last-li::before {
display: none;
}
.left-part {
z-index: 1;
position: relative;
div {
border-radius: 50%;
width: 50px;
height: 50px;
border-radius: 100px;
border: 3px dashed #444;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
color: #444;
text-align: center;
font-size: 24px;
font-weight: 500;
}
}
.right-part {
display: flex;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
margin: 0;
line-height: 1.2;
min-height: 42px;
}
}
}
}
}
/* Service How We Work End */
/* Service Form Start */
.service-form-section {
position: relative;
background: linear-gradient(180deg, #232a6e 0%, #1c1334 100%);
overflow: hidden;
&::before {
content: url(../images/icons/form-bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.service-form-header-part {
position: relative;
display: flex;
justify-content: center;
gap: 10px;
flex-direction: column;
margin-bottom: 50px;
.label {
background: linear-gradient(90deg, #dacfff 0%, #8e8aff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "PT Serif", serif;
font-size: 24px;
font-weight: 400;
margin: 0;
}
.head {
color: var(--text-dark);
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
.para {
color: var(--text-secondary);
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 875px;
line-height: 1.4;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
}
}
.form-inp-div {
position: relative;
input {
border-radius: 5px;
border: 1px solid #3167e5;
background: rgba(0, 76, 255, 0.09);
width: 100%;
padding: 12px 15px 12px 45px;
color: #fff;
font-size: 14px;
font-weight: 400;
&::placeholder {
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
font-weight: 400;
}
&:focus {
outline: none;
border: 1px solid #3167e5;
background: transparent;
}
/* &:not(:placeholder-shown){
background: transparent;
} */
}
select {
border-radius: 5px;
border: 1px solid #3167e5;
background: rgba(0, 76, 255, 0.09);
width: 100%;
padding: 12px 15px 12px 45px;
color: #fff;
font-size: 14px;
font-weight: 400;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: calc(100% - 15px) 50%;
option {
position: relative;
background-color: #3167e5;
color: #fff;
font-size: 16px;
font-weight: 400;
padding: 0;
}
&::placeholder {
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
font-weight: 400;
}
&:focus {
outline: none;
border: 1px solid #3167e5;
background-color: transparent;
}
/* &:not(:placeholder-shown){
background: transparent;
} */
}
textarea {
border-radius: 5px;
border: 1px solid #3167e5;
background: rgba(0, 76, 255, 0.09);
width: 100%;
padding: 12px 15px 12px 15px;
color: #fff;
font-size: 16px;
font-weight: 400;
&::placeholder {
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
font-weight: 400;
padding-left: 30px;
transition: all 0.25s ease-in-out;
}
&:focus {
outline: none;
border: 1px solid #3167e5;
background: transparent;
&::placeholder {
color: transparent;
}
}
&:not(:placeholder-shown) + .inp-icon,
&:focus + .inp-icon {
opacity: 0;
}
}
.inp-icon {
position: absolute;
top: 22px;
left: 15px;
transform: translateY(-50%);
transition: all 0.25s ease-in-out;
}
}
.form-ratings-div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
border: 1px solid #8147ff;
border-radius: 15px;
padding: 15px;
.each-ratings {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 5px;
width: 100%;
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
white-space: nowrap;
}
}
.seperator-div {
width: 1px;
height: 50px;
background: #3d3b9f;
}
}
.form-awards-div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
max-width: 500px;
margin-inline: auto;
div {
display: flex;
justify-content: center;
align-items: center;
}
}
.form-bottom-exra {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 10px;
margin-top: 45px;
border-top: 1px solid #4b3aa8;
padding-top: 35px;
.para-1 {
color: #c6c2ff;
text-align: center;
font-size: 24px;
font-weight: 600;
margin: 0;
}
.para-2 {
color: #c6c2ff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0;
}
}
#progressBar {
font-size: 18px;
color: #fff;
}
.progress-container {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 2em;
max-width: 100%;
width: 350px;
}
.progress-container::before {
content: "";
background-color: var(--line-border-empty);
height: 4px;
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%); /*Positioning bar exactly in the middle of the number*/
z-index: -1;
}
.progress-bar {
background-color: var(--line-border-fill);
height: 4px;
width: 0%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: -1;
transition: 0.4s ease;
}
.circle {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #fff;
color: #190482;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease;
}
.circle.active {
border: 3px solid var(--line-border-fill);
background-color: var(--line-border-fill);
color: #fff;
}
}
/* Service Form End */
/* Fixed Hire Team Button Start */
.fixed-hire-team-btn {
text-decoration: none;
position: fixed;
right: -45px;
top: 145px;
z-index: 10;
transform: rotate(-90deg);
border-radius: 10px 10px 0px 0px;
background: #d9baff;
box-shadow: -2px 0px 6px 0px rgba(0, 0, 0, 0.2);
padding: 6px 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
color: #4a00a4;
font-size: 16px;
font-weight: 500;
/* display: none; */
&:hover {
background: #d4b3fc;
}
}
/* Fixed Hire Team Button Start */
/* Solution Start */
.solution-section {
.each-solution-card {
border-radius: 10px;
border: 1px dashed #c5bfff;
padding: 25px 20px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
.img-div div {
border-radius: 100px;
background: #efedff;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
.solution-section-new {
.each-new-solution-card {
position: relative;
border-radius: 15px;
border: 1px solid #e1e7ff;
background: #fafbff;
padding: 25px 20px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 5px;
height: 100%;
.bg-image {
position: absolute;
right: 0;
top: 0;
height: 100%;
}
h3 {
color: var(--text-dark);
font-size: 24px;
font-weight: 600;
margin: 0;
}
.para-1 {
color: var(--text-muted);
font-size: 16px;
font-weight: 500;
margin: 0;
}
.para-2 {
color: var(--text-secondary);
font-size: 16px;
font-weight: 500;
margin-block: 10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
li {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-dark);
font-size: 16px;
font-weight: 400;
}
}
}
}
/* Solution end */
/* Engagement Start */
.engagement-section {
.engagement-tabs {
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
max-width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
border-radius: 100px;
border: 1px solid #e7e7e7;
padding: 5px;
max-width: 767px;
margin-inline: auto;
/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
&::-webkit-scrollbar {
display: none;
}
button {
padding: 8px 25px;
width: 100%;
background: none;
border-radius: 100px;
box-shadow: none;
outline: none;
white-space: nowrap;
img {
width: auto;
height: 35px;
}
&.active {
background-color: #261859;
color: #fff;
}
}
}
.engagement-content {
h3 {
color: var(--text-dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
}
.para-1 {
color: var(--text-muted);
font-size: 18px;
font-weight: 400;
margin-bottom: 20px;
}
.para-2 {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
li {
position: relative;
display: flex;
align-items: center;
gap: 10px;
color: var(--text-dark);
font-size: 18px;
font-weight: 400;
padding-left: 20px;
&::before {
position: absolute;
content: "";
left: 0;
top: 5px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #77f;
}
span {
font-weight: 500;
}
}
}
}
}
/* Engagement Start */
/* Founder Support Start */
.founder-support-section {
.side-heading {
color: #000;
font-size: 20px;
font-weight: 600;
}
.side-para-1 {
color: #000;
font-size: 18px;
font-weight: 400;
margin-bottom: 5px;
}
.side-para-2 {
color: #000;
font-size: 18px;
font-weight: 400;
margin-bottom: 30px;
span {
font-weight: 600;
}
}
.side-list {
margin: 0;
padding: 0;
list-style: none;
margin-top: 30px;
li {
display: flex;
gap: 20px;
color: #000;
font-size: 16px;
font-weight: 400;
margin-top: 15px;
.img-div {
div {
border-radius: 100px;
border: 1px solid #7065cc;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
}
.content-div {
.head {
color: #000;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
}
ul {
list-style-type: circle;
margin: 0;
padding: 0;
li {
position: relative;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
padding-left: 20px;
&::before {
position: absolute;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
left: 0;
top: 7px;
}
}
}
}
}
}
.promise-div {
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #f7f9ff;
padding: 20px;
.para-1 {
color: #3e32a7;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.para-2 {
color: #333;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
.bottom-part {
position: relative;
padding-top: 30px;
border-top: 1px solid #d3d3d3;
p {
color: #000;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 30px;
}
label {
display: block;
color: #000;
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
}
}
/* Founder Support End */
/* Transparent Pricing Start */
.transparent-pricing-section {
.each-transparent-price {
position: relative;
border: 2px solid #fff;
padding: 35px 15px;
border-radius: 10px;
border: 3px solid #a4afed;
background: linear-gradient(90deg, #fff 0%, #e5f0ff 47.6%, #fff 100%);
min-height: 165px;
height: 100%;
.line-1 {
position: absolute;
left: -3px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 65%;
background: #fff;
}
.line-2 {
position: absolute;
right: -3px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 65%;
background: #fff;
}
.line-3 {
position: absolute;
left: 50%;
top: -3px;
transform: translateX(-50%);
width: 65%;
height: 3px;
background: #fff;
}
.line-4 {
position: absolute;
left: 50%;
bottom: -3px;
transform: translateX(-50%);
width: 65%;
height: 3px;
background: #fff;
}
.img-div {
position: absolute;
left: 50%;
top: -50px;
transform: translateX(-50%);
z-index: 1;
}
.head {
color: var(--text-dark);
text-align: center;
font-size: 20px;
font-weight: 600;
margin-block: 20px 10px;
}
.para {
color: var(--text-secondary);
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0;
}
}
.hiring-para-text {
color: var(--text-secondary);
text-align: center;
font-size: 18px;
font-weight: 600;
max-width: 1050px;
margin-inline: auto;
margin-top: 60px;
}
}
/* Transparent Pricing End */
/* Capablity Start */
.capablity-section {
.each-capablity {
border-radius: 15px;
border: 1px solid #e1e7ff;
background: linear-gradient(180deg, #fafbff 0%, #f1f4ff 100%);
padding: 35px 25px;
.header-part {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 20px;
display: flex;
gap: 15px;
.content-div {
h3 {
color: #212844;
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
}
p {
color: #333;
font-size: 16px;
font-weight: 500;
margin: 0;
}
}
}
.all-list {
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
margin-top: 25px;
padding: 0;
li {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
gap: 5px;
padding-left: 25px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
.para-1 {
color: #333;
font-size: 16px;
font-weight: 600;
margin: 0;
}
.para-2 {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
}
/* Capablity End */
/* Why Matter Start */
.why-matter-section {
.left-head-para {
color: #000;
font-size: 20px;
font-weight: 500;
margin: 0;
margin-bottom: 25px;
}
.each-matters {
display: flex;
padding: 20px 15px;
gap: 10px;
border-radius: 10px;
background: #e8edff;
height: 100%;
.para {
color: #333;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.img-div {
margin-top: 2px;
}
}
}
/* Why Matter Start */
/* Key Features Start */
.key-features-section {
.key-features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
li {
position: relative;
color: var(--text-dark);
font-size: 18px;
font-weight: 500;
padding-left: 40px;
margin-bottom: 25px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: -2px;
}
}
}
}
/* Key features End */
.cookie-alert {
position: fixed;
left: 15px;
bottom: 25px;
width: 320px;
z-index: 999;
background-color: #fff;
padding: 0;
border: 1px solid #ddd;
text-align: start;
border-radius: 5px;
animation: leftToRight 1s linear;
z-index: 999;
}
@keyframes leftToRight {
0% {
left: -335px;
}
100% {
left: 15px;
}
}
.btn-toolbar {
display: flex;
justify-content: start;
}
.card-title {
font-size: 1.2rem;
font-weight: 500;
}
.card-text {
font-size: 14px;
}
.back-link {
text-decoration: none;
font-size: 18px;
}
/* Blog Start */
.hero-section-blog {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #222a71 0%, #2a2757 46.63%, #1a0f2b 100%);
padding-block: 75px 50px;
.custom-container.hero-content {
position: relative;
z-index: 1;
padding-block: 50px 0;
display: block;
.label {
display: block;
color: #fff;
font-family: "PT Serif", serif;
font-size: 28px;
font-weight: 400;
margin-bottom: 10px;
}
.head {
color: #fff;
font-family: "Ubuntu", sans-serif;
font-size: 52px;
font-weight: 700;
line-height: 1.2;
margin: 0;
max-width: 1250px;
margin-inline: auto;
span {
color: var(--text-accent);
}
}
.para {
color: #fff;
font-size: 24px;
font-weight: 400;
line-height: 1.5;
max-width: 950px;
margin: 0 auto;
margin-block: 15px 35px;
}
.hero-btn {
span {
padding: 12px 50px;
font-size: 1.125rem;
@media (max-width: 567px) {
padding: 12px 20px;
}
}
}
}
&::before {
content: "";
background-image: url("../images/hero-bg-pattern.svg");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-stats {
display: flex;
align-items: center;
justify-content: center;
max-width: 800px;
margin-inline: auto;
padding: 15px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 35px;
div {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
&:last-child {
border-right: none;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 400;
margin: 0;
}
.para-2 {
color: #c5c9ff;
text-align: center;
font-size: 20px;
font-weight: 700;
margin: 0;
}
}
}
}
.blog-middle-section {
margin-bottom: 50px;
.blog-relate-to-head {
color: var(--text-dark);
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.2;
}
.each-blog-card {
display: flex;
flex-direction: column;
height: 100%;
.title,
.title a {
text-decoration: none;
color: #212844;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.blog-img {
position: relative;
width: 100%;
height: 225px;
border-radius: 12px;
overflow: hidden;
img.blog-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.total-views {
position: absolute;
right: 10px;
top: 10px;
background: #000;
padding: 2px 10px;
border-radius: 25px;
display: flex;
align-items: center;
gap: 3px;
color: #fff;
text-align: center;
font-size: 12px;
font-weight: 600;
}
}
.blog-details {
display: flex;
align-items: center;
gap: 8px;
margin-block: 15px;
.seperator-div {
width: 0.5px;
height: 12px;
background: #999;
}
.each-details,
.each-details a {
text-decoration: none;
display: flex;
align-items: center;
gap: 3px;
margin: 0;
color: var(--text-muted);
font-size: 14px;
font-weight: 400;
}
}
.description {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.45;
margin-block: 0 20px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
p *,
p *,
h2 *,
h3 *,
h4 *,
h5 *,
ul* {
font-family: "Poppins", sans-serif !important;
color: var(--text-secondary) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
}
p,
h2,
h3,
h4,
h5,
ul {
display: none;
margin: 0;
font-family: "Poppins", sans-serif !important;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.45;
&:first-child {
display: block;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
.read-more-btn {
position: relative;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
color: #4512b4;
font-size: 18px;
font-weight: 500;
width: fit-content;
img {
position: relative;
left: 0;
top: 1px;
transition: all 0.5s ease-in-out;
}
&:hover {
img {
left: 5px;
}
}
}
}
.pagination-section {
margin-top: 10px;
.pagination {
gap: 10px;
& .page-item {
.page-link {
padding: 6px 12px !important;
background-color: transparent !important;
border: 1px solid #c4c4c4 !important;
color: var(--text-dark);
font-size: 14px;
font-weight: 500;
border-radius: 5px !important;
box-shadow: none !important;
outline: none !important;
}
&.active .page-link {
background-color: var(--bg-primary) !important;
color: #fff;
border: 1px solid var(--bg-primary) !important;
}
}
& .page-item:first-child {
.page-link {
background-color: #000 !important;
font-size: 0;
display: flex;
align-items: center;
gap: 2px;
&::after {
content: "← Prev";
color: #fff;
font-size: 14px;
font-weight: 500;
}
}
&.disabled {
opacity: 0.2;
cursor: not-allowed;
}
}
& .page-item:last-child {
.page-link {
background-color: #000 !important;
font-size: 0;
display: flex;
align-items: center;
gap: 2px;
&::after {
content: "Next →";
color: #fff;
font-size: 14px;
font-weight: 500;
}
}
&.disabled {
opacity: 0.2;
cursor: not-allowed;
}
}
}
}
.blog-right-each-part {
border-radius: 15px;
background: #fff;
padding: 15px;
.head {
color: var(--text-dark);
font-size: 18px;
font-style: normal;
font-weight: 700;
margin-bottom: 10px;
}
.search-input-group {
border-radius: 5px;
border: 1px solid #dfdfdf;
padding: 3px;
display: flex;
gap: 5px;
input {
border: none;
outline: none;
box-shadow: none;
&::placeholder {
color: #bbb !important;
font-weight: 400 !important;
}
}
.search-btn {
border-radius: 5px;
background: #4512b4;
padding: 4px;
height: 100%;
}
}
.category-list {
display: flex;
justify-content: center;
gap: 5px;
list-style: none;
margin: 0;
padding: 0;
flex-direction: column;
li {
display: flex;
justify-content: space-between;
gap: 15px;
border-bottom: 1px dashed #d1e7e5;
padding-bottom: 10px;
margin-top: 10px;
&:last-child {
border-bottom: none;
margin-bottom: 0;
}
a {
text-decoration: none;
color: #1c1c1c;
font-size: 15px;
font-weight: 400;
margin: 0;
&:hover {
color: var(--bg-primary);
}
}
span.count {
width: 28px;
height: 28px;
border-radius: 20px;
background: #f1f3ff;
display: flex;
justify-content: center;
align-items: center;
color: #4512b4;
text-align: center;
font-size: 14px;
font-weight: 500;
}
}
}
.blog-card {
overflow: hidden;
display: block;
text-decoration: none;
.blog-img {
width: 100%;
overflow: hidden;
border-radius: 15px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.blog-content {
padding: 10px 0;
.blog-head {
display: flex;
align-items: center;
gap: 25px;
label {
display: flex;
align-items: center;
gap: 5px;
color: #666;
font-size: 12px;
font-weight: 400;
}
}
.title,
.title a {
text-decoration: none;
color: var(--text-dark);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
margin-block: 10px 0;
}
}
&:hover .title {
color: var(--bg-primary);
}
}
}
.signle-blog-content {
display: flex;
flex-direction: column;
.title,
.title a {
text-decoration: none;
color: #212844;
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
.blog-img {
position: relative;
width: 100%;
border-radius: 12px;
overflow: hidden;
img.blog-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.total-views {
position: absolute;
right: 10px;
top: 10px;
background: #000;
padding: 2px 10px;
border-radius: 25px;
display: flex;
align-items: center;
gap: 3px;
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 600;
}
}
.share-and-details-div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
.social-icon {
display: flex;
align-items: center;
gap: 15px;
list-style: none;
padding: 0;
margin: 0;
li {
color: #000;
font-size: 16px;
font-weight: 500;
}
}
}
.blog-details {
display: flex;
align-items: center;
gap: 8px;
.seperator-div {
width: 0.5px;
height: 12px;
background: #999;
}
.each-details,
.each-details a {
text-decoration: none;
display: flex;
align-items: center;
gap: 3px;
margin: 0;
color: var(--text-muted);
font-size: 14px;
font-weight: 400;
}
}
.description {
color: var(--text-secondary);
font-size: 18px;
font-weight: 400;
& p {
color: var(--text-secondary);
margin: 10px 0;
}
& h2,
& h3,
& h4,
& h5,
& h6 {
color: var(--text-dark);
}
& h2 {
font-size: 24px;
}
& h3 {
font-size: 20px;
}
}
.read-more-btn {
position: relative;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
color: #4512b4;
font-size: 18px;
font-weight: 500;
width: fit-content;
img {
position: relative;
left: 0;
top: 1px;
transition: all 0.5s ease-in-out;
}
&:hover {
img {
left: 5px;
}
}
}
}
.author-details {
.heading {
color: #000;
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
}
.pro-img-div {
width: fit-content;
height: auto;
overflow: hidden;
border-radius: 10px;
}
.author-name,
.author-name a {
text-decoration: none;
color: var(--text-dark);
font-size: 20px;
font-weight: 500;
margin: 0;
}
.about-author {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
.author-view-more-link {
color: var(--bg-primary);
text-decoration: none;
}
}
}
.popular-tag-list {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
li {
a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
border-radius: 4px;
border: 1px solid #f1f3ff;
background: #f1f3ff;
padding: 2px 10px;
color: var(--bg-primary);
font-size: 15px;
font-weight: 400;
}
}
}
}
/* Blog Start */
/* About Us Start */
.about-hero-stats {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 800px;
margin-inline: auto;
padding: 15px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 35px;
.each-stat {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-inline: 25px;
&:nth-child(2) {
width: 33.33%;
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
&:first-child {
padding-left: 0;
}
.img-div {
div {
width: 55px;
height: 55px;
border-radius: 50%;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
}
}
.state-content {
display: flex;
align-items: start;
justify-content: center;
flex-direction: column;
gap: 5px;
@media (max-width: 767px) {
align-items: center;
text-align: center;
}
.para-1 {
color: #fff;
font-size: 24px;
font-weight: 700;
margin: 0;
}
.para-2 {
color: #fff;
font-size: 14px;
font-weight: 400;
margin: 0;
}
}
@media (max-width: 767px) {
padding-inline: 15px;
.img-div {
display: none;
}
}
}
}
.about-story-section {
.left-part,
.right-part {
height: 100%;
}
.left-head {
color: var(--text-dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.left-para {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin-bottom: 8px;
}
.rating-div {
display: flex;
align-items: center;
gap: 25px;
.each-rating-div {
display: flex;
justify-content: center;
gap: 5px;
flex-direction: column;
.para-1 {
color: #212844;
font-size: 18px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
}
}
.para-2 {
color: #333;
font-size: 14px;
font-weight: 400;
margin: 0;
}
}
.seperator-div {
background: #dadada;
width: 1px;
height: 68px;
}
}
.right-head {
color: #000;
font-size: 24px;
font-weight: 600;
margin-bottom: 30px;
}
.right-lists {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 20px;
height: calc(100% - 50px);
li {
display: flex;
gap: 10px;
.img-div {
div {
width: 60px;
height: 60px;
border-radius: 100px;
border: 1px solid #7065cc;
display: flex;
align-items: center;
justify-content: center;
}
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* About Us Start */
/* About Why Epixel Start */
.about-why-eps-section {
.right-head {
color: var(--text-secondary);
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 15px;
}
.right-para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
.each-why-eps-card {
border-radius: 15px;
border: 2px dashed #fff;
background: #fff;
width: 100%;
height: 100%;
display: flex;
gap: 15px;
padding: 25px 15px;
.numbering {
color: var(--text-dark);
font-size: 36px;
font-style: italic;
font-weight: 700;
line-height: 1;
margin: 0;
}
.head {
color: #212844;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 5px;
}
.para {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
/* About Why Epixel End */
/* Leader and Culture Start */
.leader-culture-section {
.first-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
li {
position: relative;
color: #000;
font-size: 16px;
font-weight: 400;
padding-left: 50px;
min-height: 50px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 0;
}
}
}
.team-heighlight-para {
color: #000;
font-size: 18px;
font-weight: 600;
margin-block: 35px 20px;
}
.second-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
flex-direction: column;
gap: 15px;
li {
display: flex;
gap: 10px;
}
}
}
/* Leader and Culture End */
/* Certification Start */
.about-certification-section {
position: relative;
.certification-div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
max-width: 965px;
margin-inline: auto;
margin-bottom: 75px;
}
.about-partners {
background: #5b5b5b;
margin-top: 65px;
}
}
/* Certification End */
/* Our Approch Start */
.about-approch-section {
.our-approch-card {
border-radius: 10px;
display: flex;
gap: 15px;
height: 100%;
@media screen and (max-width: 768px) {
flex-direction: column;
align-items: center;
padding: 25px 15px;
border: 1px dashed var(--bg-light);
}
.img-div div {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.content-div {
display: flex;
flex-direction: column;
gap: 5px;
@media screen and (max-width: 768px) {
text-align: center;
}
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.bottom-para {
color: #000;
font-size: 16px;
font-style: italic;
font-weight: 400;
margin-block: 0;
@media screen and (max-width: 768px) {
text-align: center;
}
}
}
/* Our Approch End */
/* Career Start */
.about-career-section {
background-color: #212844;
.inner-div {
max-width: 1118px;
margin-inline: auto;
}
.heading {
color: #fff;
text-align: center;
font-size: 30px;
font-weight: 600;
margin-bottom: 8px;
}
.haading-para {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.long-para {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.cta-part-div {
border-radius: 15px;
border: 1px solid #7e88ae;
padding: 30px 10px;
.para-1 {
color: #fff;
font-size: 26px;
font-weight: 600;
margin-bottom: 10px;
line-height: 1.3;
}
.para-2 {
color: #fff;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.cta-btn {
border: 1px solid #3d4a7d;
background: #3d4a7d30;
&::before {
content: "";
background: #3d4a7d;
}
&:hover {
&::before {
height: 100%;
}
}
span {
background: #3d4a7d;
/* white-space: nowrap; */
}
}
}
.bottom-para {
color: #9cb0ff;
text-align: center;
font-size: 16px;
font-weight: 400;
margin-block: 35px 0;
}
}
/* Career End */
/* Contact Start */
.contact-area {
border-radius: 15px;
background: #fff;
max-width: 80%;
width: 100%;
display: flex;
margin-inline: auto;
overflow: hidden;
@media (max-width: 1200px) {
max-width: 100%;
}
@media (max-width: 767px) {
flex-direction: column-reverse;
gap: 20px;
background: transparent;
}
.left-part {
background-color: var(--bg-primary);
width: 400px;
padding: 35px 3%;
flex: none;
border-radius: 15px;
@media (max-width: 1200px) {
padding: 35px 15px;
width: 375px;
}
@media (max-width: 991px) {
padding: 35px 20px;
width: 300px;
}
@media (max-width: 767px) {
width: 100%;
}
.head {
color: #fff;
font-size: 24px;
font-weight: 600;
margin-bottom: 6px;
}
.head-para {
color: #fff;
font-size: 18px;
font-weight: 400;
margin: 0;
line-height: 1.3;
}
.each-contact-details {
display: flex;
gap: 10px;
}
.content-div {
label {
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
a {
text-decoration: none;
display: block;
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
&:hover {
opacity: 0.8;
}
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.right-part {
padding: 35px 5%;
@media (max-width: 767px) {
background: #fff;
border-radius: 15px;
}
.contact_inputs_div_new {
label {
color: #8d8d8d;
font-family: Poppins;
font-size: 14px;
font-weight: 500;
}
input {
border: none;
border-radius: 0;
border-bottom: 1px solid #8d8d8d;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 10px 0;
font-size: 16px;
color: var(--text-dark);
font-weight: 400;
&::placeholder {
font-size: 16px;
color: #bbb;
font-weight: 400;
}
}
select {
border: none;
border-radius: 0;
border-bottom: 1px solid #8d8d8d;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 10px 0;
&::placeholder {
font-size: 16px;
color: #bbb;
font-weight: 400;
}
}
textarea {
border: none;
border-radius: 0;
border-bottom: 1px solid #8d8d8d;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 10px 0;
&::placeholder {
font-size: 16px;
color: #bbb;
font-weight: 400;
}
}
}
}
}
/* Contact End */
/* Portfolio Start */
.hero-with-img-section {
position: relative;
width: 100%;
overflow: hidden;
display: none;
&::before {
content: "";
background-image: url("../images/hero-bg-pattern.svg");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&.hero-1 {
display: block;
background: linear-gradient(180deg, #2a327a 0%, #2e2b5e 46.63%, #4a2684 100%);
padding-block: 75px 0;
.custom-container.hero-1-content {
position: relative;
z-index: 1;
padding-block: 50px 50px;
display: block;
.label {
display: block;
color: #fff;
font-family: "PT Serif", serif;
font-size: 28px;
font-weight: 400;
margin-bottom: 10px;
}
.head {
color: #fff;
font-family: "Ubuntu", sans-serif;
font-size: 60px;
font-weight: 700;
line-height: 1.2;
margin: 0;
span {
color: var(--text-accent);
}
}
.para {
color: #fff;
font-size: 24px;
font-weight: 400;
line-height: 1.5;
max-width: 648px;
margin: 0 auto;
margin-block: 15px 50px;
}
.hero-btn {
span {
padding: 12px 30px;
font-size: 1.125rem;
@media (max-width: 567px) {
padding: 12px 20px;
}
}
}
}
}
}
.tab-btns-section {
.tab-btns {
display: flex;
align-items: center;
justify-content: center;
margin-inline: auto;
border: 1px solid var(--bg-primary);
max-width: 500px;
width: 100%;
padding: 5px;
border-radius: 5px;
.work_all_btns,
.mobile_apps_btn,
.websites_btn {
width: 100%;
}
.btn {
width: 100%;
white-space: nowrap;
padding: 10px 15px;
font-size: 14px;
font-weight: 500;
color: var(--text-dark);
box-sizing: none;
outline: none;
border: none;
&:hover {
color: var(--bg-primary);
}
&.active {
background: var(--bg-primary);
font-size: 14px;
font-weight: 500;
color: #fff;
}
}
}
}
.portfolio-container {
border-radius: 5px;
padding: 20px 1rem;
overflow: hidden;
}
.portfolio-container .row {
display: flex;
align-items: center;
}
.portfolio-container.ashan {
background-color: #f9eaea;
}
.portfolio-container.ashan2 {
background-color: #e0fef2;
}
.portfolio-container.swissta {
background-color: #e9ecf5;
}
.portfolio-container.festa {
background-color: #e9ecf5;
}
.portfolio-container.dover {
background-color: #f1f1f1;
}
.portfolio-container.militakiri {
background-color: #fdf4ec;
}
.portfolio-container.cleanplast {
background-color: #fbfeef;
}
.portfolio-container.lita1 {
background-color: #fdeff3;
}
.portfolio-container.lita2 {
background-color: #e7feef;
}
.portfolio-container.cme {
background-color: #edf0ff;
}
.portfolio-container.pg {
background-color: #e7f3ff;
}
.portfolio-container.gig {
background-color: #fbfeef;
}
.portfolio-container.steel-plastic {
background-color: #fdeff3;
}
.portfolio-container.fleetng {
background-color: #eaeeff;
}
.portfolio-container.WealthLogix {
background-color: #e7feef;
}
.portfolio-container.finvario {
background-color: #f1f1f1;
}
.project-name-heading {
font-size: 36px;
font-weight: 700;
color: #1e70b8;
position: relative;
}
.project-name-heading::before {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 50px;
height: 5px;
border-radius: 15px;
background-color: #383838;
}
@media (min-width: 991px) {
.content-portfolio.left {
padding-left: 5rem;
padding-right: 3rem;
}
}
@media (min-width: 991px) {
.content-portfolio.right {
padding-right: 5rem;
}
}
.project-sub-para {
font-weight: 500;
font-size: 20px;
padding-top: 1.35rem;
}
.project-para {
padding-top: 1rem;
font-size: 17px;
}
/* Portfolio End */
/* Policy Start */
.policy-section {
padding: 40px 0;
.policy-heading {
font-size: 20px;
font-weight: 600;
margin: 25px 0 10px;
color: var(--text-dark);
}
p {
margin-bottom: 12px;
font-size: 16px;
color: var(--text-secondary);
font-weight: 400;
&.head-part {
font-size: 20px;
}
}
a {
color: var(--bg-primary);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.policy-list {
list-style: disc;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin-block: 10px;
li {
margin-bottom: 8px;
}
}
}
/* Policy End */
/* Career Start */
.current-job-head {
position: relative;
color: var(--text-dark);
font-size: 28px;
font-weight: 700;
line-height: 1.2;
&::before {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
border-radius: 50px;
background: linear-gradient(90deg, #25009b 0%, #0901fe 100%);
opacity: 0.5;
}
}
.job-summary {
padding: 25px 25px;
position: relative;
background-color: var(--bg-primary);
height: 100%;
border-radius: 10px 0 0 10px;
@media (max-width: 767px) {
border-radius: 10px 10px 0 0;
padding: 25px 15px;
}
.common-heading {
font-size: 24px;
font-weight: 600;
color: #fff;
text-decoration: none;
}
.job-content {
margin: 0;
padding: 0;
}
.job-content li {
list-style: none;
margin-bottom: 5px;
margin-top: 10px;
color: #fff;
font-size: 18px;
}
}
.job-details {
min-height: 270px;
font-size: 18px;
padding: 25px 30px;
border: 1px solid #d8b8ff;
height: 100%;
border-radius: 0 10px 10px 0;
@media (max-width: 767px) {
padding: 25px 15px;
}
@media (max-width: 767px) {
border-radius: 0 0 10px 10px;
}
.job-details ul {
margin: 0;
padding: 0;
li {
list-style: none;
margin-bottom: 10px;
}
}
.common-heading {
display: block;
font-size: 24px;
font-weight: 600;
color: var(--text-dark);
text-decoration: none;
margin-bottom: 15px;
line-height: 1.2;
}
.read-more-btn {
background: #0769ad;
color: #fff;
padding: 6px 25px;
margin-top: 20px;
display: inline-block;
border: none;
&:hover {
background: #337ab7;
color: #fff;
}
&:focus {
background: #337ab7;
color: #fff;
}
}
}
.job-description-content {
.post-heading {
position: relative;
display: block;
font-size: 24px;
font-weight: 600;
color: var(--text-dark);
text-decoration: none;
line-height: 1.2;
&::before {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
border-radius: 50px;
background: linear-gradient(90deg, #25009b 0%, #0901fe 100%);
opacity: 0.5;
}
}
.common-heading {
display: block;
font-size: 20px;
font-weight: 600;
color: var(--text-dark);
text-decoration: none;
margin-bottom: 15px;
line-height: 1.2;
}
.job-detail-list {
margin: 0;
p {
color: var(--text-secondary);
font-size: 16px;
}
ul {
margin: 0;
li {
color: var(--text-secondary);
font-size: 16px;
margin-top: 5px;
}
}
}
}
/* Career End */
/* Author details start */
.author-details-section {
position: relative;
width: 100%;
overflow: hidden;
display: none;
&::before {
content: "";
background-image: url("../images/hero-bg-pattern.svg");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&.hero-1 {
display: block;
background: linear-gradient(180deg, #2a327a 0%, #2e2b5e 46.63%, #4a2684 100%);
padding-block: 75px 0;
.custom-container.hero-1-content {
position: relative;
z-index: 1;
padding-block: 50px 50px;
display: block;
.label {
display: block;
color: #fff;
font-family: "PT Serif", serif;
font-size: 28px;
font-weight: 400;
margin-bottom: 10px;
}
.head {
color: #fff;
font-family: "Ubuntu", sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.2;
margin: 0;
span {
color: var(--text-accent);
}
}
.para {
color: #fff;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
max-width: 648px;
margin: 0 auto;
margin-block: 15px 50px;
}
.hero-btn {
span {
padding: 12px 30px;
font-size: 1.125rem;
@media (max-width: 567px) {
padding: 12px 20px;
}
}
}
}
}
.author-image-box {
div {
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 10px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.blog-card {
position: relative;
border-radius: 15px;
overflow: hidden;
border: none;
background-color: #fff;
.blog-latest-label {
position: absolute;
right: 5px;
top: 5px;
background: #000000;
padding: 3px 12px;
font-size: 13px;
font-weight: 500;
color: #fff;
border-radius: 50px;
}
.blog-img {
width: 100%;
height: 225px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.blog-content {
padding: 20px 15px;
.blog-head {
display: flex;
align-items: center;
gap: 25px;
label {
display: flex;
align-items: center;
gap: 5px;
color: #666;
font-size: 14px;
font-weight: 400;
}
}
.title,
.title a {
text-decoration: none;
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin-block: 15px 10px;
}
.description {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.45;
margin-block: 0 20px;
padding-bottom: 20px;
border-bottom: 1px solid #d8d8d8;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
p *,
p *,
h2 *,
h3 *,
h4 *,
h5 *,
ul* {
font-family: "Poppins", sans-serif !important;
color: var(--text-secondary) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
}
p,
h2,
h3,
h4,
h5,
ul {
display: none;
margin: 0;
font-family: "Poppins", sans-serif !important;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.45;
&:first-child {
display: block;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
}
.author-blogs-row {
.blog-card {
border-radius: 15px;
overflow: hidden;
border: 2px solid transparent;
background-color: #fff;
&:hover {
border: 2px solid #4e69ff;
}
.blog-img {
width: 100%;
height: 225px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.blog-content {
padding: 20px 15px;
.blog-head {
display: flex;
align-items: center;
gap: 25px;
label {
display: flex;
align-items: center;
gap: 5px;
color: #666;
font-size: 14px;
font-weight: 400;
}
}
.title,
.title a {
text-decoration: none;
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin-block: 15px 10px;
}
.description {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.45;
margin-block: 0 20px;
padding-bottom: 20px;
border-bottom: 1px solid #d8d8d8;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
p *,
p *,
h2 *,
h3 *,
h4 *,
h5 *,
ul* {
font-family: "Poppins", sans-serif !important;
color: var(--text-secondary) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
}
p,
h2,
h3,
h4,
h5,
ul {
display: none;
margin: 0;
font-family: "Poppins", sans-serif !important;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.45;
&:first-child {
display: block;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
}
/* Author details end */
/* Upward Arrow Start */
.upward-arrow {
display: none;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
border-radius: 50%;
position: fixed;
bottom: 100px;
right: 16px;
text-align: center;
line-height: 59px;
background-color: #270c73;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 999;
cursor: pointer;
}
.upward-arrow:hover {
transform: rotate(-360deg);
transition: 1s;
}
.upward-arrow img {
width: 15px;
display: inline-block;
}
.section-for-arrow {
position: relative;
background-color: #f4f4f4;
}
.upward-arrow.home-upward-arrow {
position: sticky;
margin-left: auto;
margin-top: 150px;
}
/* Upward Arrow End */
.pagination-section {
margin-top: 10px;
.pagination {
gap: 10px;
& .page-item {
.page-link {
padding: 6px 12px !important;
background-color: transparent !important;
border: 1px solid #c4c4c4 !important;
color: var(--text-dark);
font-size: 14px;
font-weight: 500;
border-radius: 5px !important;
box-shadow: none !important;
outline: none !important;
}
&.active .page-link {
background-color: var(--bg-primary) !important;
color: #fff;
border: 1px solid var(--bg-primary) !important;
}
}
& .page-item:first-child {
.page-link {
background-color: #000 !important;
font-size: 0;
display: flex;
align-items: center;
gap: 2px;
&::after {
content: "← Prev";
color: #fff;
font-size: 14px;
font-weight: 500;
}
}
&.disabled {
opacity: 0.2;
cursor: not-allowed;
}
}
& .page-item:last-child {
.page-link {
background-color: #000 !important;
font-size: 0;
display: flex;
align-items: center;
gap: 2px;
&::after {
content: "Next →";
color: #fff;
font-size: 14px;
font-weight: 500;
}
}
&.disabled {
opacity: 0.2;
cursor: not-allowed;
}
}
}
}
/* Accelarator Start */
.accelerators-section {
.each-accelerator-card {
position: relative;
display: flex;
gap: 15px;
align-items: flex-start;
background: #ffffff;
border: 1px solid #efecff;
padding: 20px 15px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(22, 18, 58, 0.03);
overflow: hidden;
cursor: pointer;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
/* HOVER STATE */
&:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(80, 67, 218, 0.12);
border-color: #dcd6ff;
&::before {
opacity: 1;
transform: scaleY(1);
}
.card-number {
div {
box-shadow: 0 0 0 8px rgba(80, 67, 218, 0.15);
}
}
.card-content {
h3 {
color: #5043da;
}
}
}
/* MOBILE STACK */
@media (max-width: 576px) {
flex-direction: column;
}
}
.card-number {
display: flex;
align-items: flex-start;
div {
width: 40px;
height: 40px;
border-radius: 50%;
background: #5043da;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 18px;
font-weight: 600;
transition:
background 0.3s ease,
box-shadow 0.3s ease;
}
}
.card-content {
h3 {
font-size: 20px;
font-weight: 600;
color: var(--text-dark);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
transition: color 0.25s ease;
.duration {
font-size: 13px;
color: var(--text-primary);
font-weight: 600;
background: #f3eeff;
padding: 4px 10px;
border-radius: 20px;
}
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
transition: text-decoration 0.25s ease;
}
}
}
@media (prefers-reduced-motion: reduce) {
.each-accelerator-card {
transition: none;
&:hover {
transform: none;
box-shadow: 0 6px 20px rgba(22, 18, 58, 0.03);
}
}
}
}
/* Accelarator End */
.highlighting-area {
padding: 10px 20px;
background: #383972;
max-width: fit-content;
width: 100%;
border-radius: 20px;
margin-bottom: 25px;
color: #fff;
font-size: 16px;
font-weight: 500;
text-align: center;
span {
font-weight: 600;
}
}
/* Extra section 1 start */
.extra-section-1 {
.bleeding-neck-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 500;
}
.extra-section-card {
border-radius: 30px;
border: 1.5px dashed #e4e4e7;
padding: 25px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #fff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(80, 67, 218, 0.12);
.img-div div {
background-color: rgba(80, 67, 218, 0.03);
border-radius: 50%;
}
.content-div h3 {
color: #5043da;
}
}
@media (prefers-reduced-motion: reduce) {
.extra-section-card {
transition: none;
&:hover {
transform: none;
box-shadow:
inset 0 0 0 0.5px rgba(209, 213, 219, 0.9),
0 6px 16px rgba(22, 18, 58, 0.04);
}
}
}
}
.seperator-line {
border: 1px solid #7c7cff80;
padding: 0;
}
.bottom-highlighted-para {
border-radius: 15px;
background: #5043da;
color: #ccd8ff;
text-align: center;
font-size: 18px;
font-weight: 600;
padding: 30px 20px;
.white-text {
color: #fff;
}
}
.bottom-para {
border-radius: 15px;
border-top: 5px solid #fcd9d9;
background: #fff;
padding: 20px;
color: #000;
text-align: center;
font-size: 20px;
font-weight: 500;
margin: 0;
}
.bottom-blue-div {
border-radius: 15px;
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
padding: 30px 20px;
.head {
color: #ccd8ff;
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 30px;
}
.content-div {
max-width: 885px;
width: 100%;
margin: 0 auto;
.each-points {
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 500;
}
}
}
.highlighted-img-div {
position: relative;
width: 100%;
height: 215px;
border-radius: 20px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
p {
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-size: 24px;
font-weight: 700;
margin: 0;
padding: 20px;
span {
color: #ccd8ff;
font-weight: 600;
}
}
}
.bottom-blue-para {
color: #5043da;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 600;
margin: 0;
}
}
/* Entra section 1 end */
/* Entra section 1 end */
.extra-section-2 {
.extra-section-card {
border-radius: 30px;
background: #fff;
box-shadow: 0 10px 40px 3px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
overflow: hidden;
.top-part {
display: flex;
flex-direction: column;
gap: 15px;
padding: 30px 30px 0 30px;
@media (max-width: 767px) {
padding: 25px 15px 0 15px;
}
.icon-div {
div {
width: 50px;
height: 50px;
border-radius: 10px;
background: #eff6ff;
display: flex;
justify-content: center;
align-items: center;
}
}
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 500;
margin: 0;
span {
font-weight: 600;
}
img {
position: relative;
margin-right: 5px;
top: -2px;
}
}
}
.middle-para {
color: #333;
font-size: 18px;
font-weight: 400;
margin: 0;
padding: 0 30px 0 30px;
@media (max-width: 767px) {
padding: 0 15px;
}
}
.highlited-area {
background: #f8fafc;
padding: 0 30px 30px 30px;
@media (max-width: 767px) {
padding: 0 15px 25px 15px;
}
.included-para {
color: #7b87ac;
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
text-transform: uppercase;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
li {
position: relative;
color: #333;
font-size: 16px;
font-weight: 400;
padding-left: 28px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
}
}
}
/* Entra section 2 end */
/* Slider start */
.extra-slider-outer {
overflow: hidden;
}
/* Swiper slide ko flex banaya */
.extra-mobile-slider {
position: relative;
overflow: hidden;
.swiper-wrapper {
align-items: stretch;
}
.swiper-slide {
display: flex;
height: auto;
}
.swiper-nav-bottom {
position: relative;
width: fit-content;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 25px;
z-index: 10;
margin-top: 25px;
padding-block: 15px;
&.ms-auto {
left: unset;
right: 0;
transform: unset;
}
}
.swiper-button-prev,
.swiper-button-next {
position: relative !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 8px;
background: #ffffff;
color: #3a3a3a !important;
border-radius: 999px;
border: 1px solid #e4e7ff;
box-shadow: 0 6px 18px rgba(20, 20, 60, 0.12);
transition: all 0.25s ease;
opacity: 1;
visibility: visible;
&::after {
font-size: 10px;
font-weight: 700;
}
&:hover {
background: var(--bg-primary) !important;
border-color: var(--bg-primary) !important;
color: #ffffff !important;
box-shadow: 0 10px 26px rgba(91, 92, 255, 0.35);
}
&.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
}
}
/* Slider end */
/* Extra section 3 start*/
.extra-section-3 {
.each-card-div {
border-radius: 30px;
border: 1.5px solid #e4e4e7;
background: #fff;
padding: 25px;
display: flex;
flex-direction: column;
gap: 25px 20px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.content-div {
display: flex;
flex-direction: column;
gap: 5px;
h3 {
color: #212844;
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: #333;
font-size: 18px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Extra section 3 end*/
/* Extra section 4 start */
.extra-section-4 {
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
.extra-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 75px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 767px) {
&.left-in-tab {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-tab::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.extra-section-card {
border-radius: 30px;
border: 1px solid rgba(152, 153, 255, 0.25);
background: rgba(255, 255, 255, 0.05);
padding: 35px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.quote-para {
color: #fff;
font-size: 20px;
font-style: italic;
font-weight: 500;
margin: 0;
}
.para-1 {
color: #fff;
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}
.para-2 {
color: #fff;
font-size: 18px;
font-weight: 400;
margin-bottom: 0;
}
}
.extra-mobile-slider {
position: relative;
overflow: visible !important;
.swiper-nav-bottom {
position: relative;
width: fit-content;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 25px;
z-index: 10;
margin-top: 25px;
padding-block: 15px;
&.ms-auto {
left: unset;
right: 0;
transform: unset;
}
}
.swiper-button-prev,
.swiper-button-next {
position: relative !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #3a226a;
color: #fff !important;
border-radius: 999px;
border: 1px solid #fff;
box-shadow: 0 6px 18px rgba(20, 20, 60, 0.12);
transition: all 0.25s ease;
opacity: 1;
visibility: visible;
padding: 4px;
&:hover {
background: transparent !important;
border-color: #fff !important;
color: #ffffff !important;
box-shadow: 0 10px 26px rgba(91, 92, 255, 0.35);
}
&.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
}
.swiper-button-prev::after {
content: url('data:image/svg+xml,');
position: absolute;
font-size: 20px;
font-weight: 700;
color: #fff;
top: 3px;
left: 3px;
}
.swiper-button-next::after {
content: url('data:image/svg+xml,');
position: absolute;
font-size: 20px;
font-weight: 700;
color: #fff;
top: 3px;
left: 3px;
}
}
}
/* Extra secion 4 end */
/* Extra section 5 start */
.extra-section-5 {
.bleeding-neck-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 500;
}
.extra-section-card {
height: 100%;
display: flex;
gap: 20px;
@media (max-width: 991px) {
flex-direction: column;
}
.img-div div {
width: 75px;
height: 75px;
border-radius: 10px;
background: #e4e1ff;
display: flex;
justify-content: center;
align-items: center;
}
.content-div {
display: flex;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Entra section 5 end */
/* Process start */
.tree-type-process-section {
.timeline {
position: relative;
overflow: hidden;
max-width: 1300px;
margin-inline: auto;
/* Center vertical line */
&::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 100%;
background: #ccd8ff;
transform: translateX(-50%);
}
@media (max-width: 767px) {
.col-md-2 {
display: none !important;
}
}
}
.timeline {
.timeline-row {
position: relative;
/* Horizontal line (desktop only) */
&::before {
content: url('data:image/svg+xml,');
position: absolute;
top: 50%;
width: 50%;
right: 0;
z-index: 0;
@media (max-width: 1299px) {
width: unset;
}
@media (max-width: 991px) {
display: none;
}
}
}
& .timeline-row:nth-child(even) {
&::before {
content: url('data:image/svg+xml,');
position: absolute;
top: 50%;
width: 50%;
left: 0;
right: unset;
z-index: 0;
@media (max-width: 1299px) {
width: unset;
}
@media (max-width: 991px) {
display: none;
}
}
}
& .timeline-row:last-child {
&::before {
content: none;
}
}
}
.timeline-dot {
width: 36px;
height: 36px;
background: #9899ff;
border-radius: 50%;
position: relative;
z-index: 2;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
/* Inner ring */
.timeline-dot::before {
content: "";
position: absolute;
width: 32px;
height: 32px;
background: #5043da;
border: 3px solid #fff;
border-radius: 50%;
z-index: 2;
}
/* Center dot */
.timeline-dot::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
z-index: 3;
}
/* Pulse animation using box-shadow */
.timeline-dot {
animation: pulse-ring 2.4s infinite ease-out;
}
.process-card {
border-radius: 15px;
border-bottom: 5px solid #b4bdff;
background: #fff;
padding: 25px;
position: relative;
@media (max-width: 1399px) {
padding: 25px 15px;
}
@media (max-width: 767px) {
margin-bottom: 20px;
}
label.count {
position: absolute;
right: 20px;
top: 0;
color: #ededed;
font-size: 48px;
font-weight: 700;
}
small {
display: block;
color: #7300ff;
font-weight: 600;
margin-bottom: 8px;
text-transform: uppercase;
}
h5 {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
}
}
.timeline-dot {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
}
}
/* Keyframes */
@keyframes pulse-ring {
0% {
box-shadow: 0 0 0 0 rgba(80, 67, 218, 0.45);
}
70% {
box-shadow: 0 0 0 16px rgba(80, 67, 218, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(80, 67, 218, 0);
}
}
/* Process end */
/* New FAQ Start */
.new-faq-section {
.faq-wrapper {
max-width: 900px;
margin: 0 auto;
border-radius: 15px;
background: #fff;
overflow: hidden;
padding: 30px;
@media (max-width: 576px) {
padding: 25px 15px;
}
/* Accordion item */
.accordion-item {
border: none;
border-bottom: 1px solid #eceaff;
padding-block: 25px;
}
/* Header button */
.accordion-button {
font-weight: 600;
font-size: 18px;
padding: 0;
color: #212844;
font-size: 20px;
font-weight: 500;
box-shadow: none;
background: none;
}
/* Arrow icon */
.accordion-button::after {
background-size: 16px;
}
/* Body text */
.accordion-body {
padding: 0;
padding-top: 10px;
color: #333;
font-size: 18px;
font-weight: 400;
}
/* Remove last border */
.accordion-item:first-child {
padding-top: 0;
}
.accordion-item:last-child {
border-bottom: none;
}
}
}
.new-cta-section {
.main-div {
border-radius: 50px;
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
padding: 50px 25px;
@media (max-width: 576px) {
padding: 50px 15px;
border-radius: 30px;
}
.content-div {
max-width: 1022px;
margin: 0 auto;
.head {
color: #fff;
text-align: center;
font-size: 30px;
font-weight: 600;
margin-bottom: 15px;
text-align: center;
line-height: 1.4;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 35px;
}
.para-2 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 600;
}
}
}
}
.new-cta-section-2 {
.main-div {
position: relative;
border-radius: 30px;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
padding: 50px 25px;
@media (max-width: 576px) {
padding: 50px 15px;
border-radius: 30px;
}
.content-div {
max-width: 1022px;
margin: 0 auto;
.head {
color: #fff;
text-align: center;
font-size: 30px;
font-weight: 600;
margin-bottom: 15px;
text-align: center;
line-height: 1.4;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 35px;
}
.para-2 {
color: #fff;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 400;
}
.seperator {
width: 100%;
height: 1px;
border-top: 1px solid #a6aedd;
margin-block: 25px;
margin-block: 25px;
}
}
.cta-design-absolute {
position: absolute;
right: 0;
top: 0;
}
}
}
.new-cta-section-3 {
.main-div {
border-radius: 30px;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
padding: 50px 25px;
@media (max-width: 576px) {
padding: 50px 15px;
border-radius: 30px;
}
.content-div {
max-width: 1022px;
margin: 0 auto;
.head {
color: #fff;
text-align: center;
font-size: 30px;
font-weight: 600;
margin-bottom: 15px;
text-align: center;
line-height: 1.4;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 35px;
}
.para-2 {
color: #fff;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 400;
}
.extra-para {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 35px;
}
.seperator {
width: 100%;
height: 1px;
border-top: 1px solid #a6aedd;
margin-block: 25px;
margin-block: 25px;
}
}
.col-border {
border-right: 2px solid #9899ff;
@media (max-width: 767px) {
border-bottom: 2px solid #9899ff;
padding-bottom: 25px;
}
}
.button-para {
color: #fff;
text-align: center;
font-size: 16px;
font-style: italic;
font-weight: 400;
margin: 0;
}
.middle-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
li {
position: relative;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 400;
width: fit-content;
padding-left: 15px;
&::before {
display: none;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 7.5px;
left: 0;
}
}
}
}
}
.extra-highlighted-section {
.inner-div {
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #e4e1ff;
padding: 20px 15px;
.para-1 {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
}
.para-2 {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 600;
margin: 0;
}
}
}
/* Extra section 6 start */
.extra-section-6 {
.extra-section-card {
border-radius: 12px;
background: #fff;
overflow: hidden;
height: 100%;
.img-div {
width: 100%;
height: auto;
img {
width: 100%;
height: auto;
}
}
.inner-part {
padding: 30px;
@media (max-width: 576px) {
padding: 30px 15px;
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.para {
color: #333;
font-size: 18px;
font-weight: 400;
margin-bottom: 20px;
}
.list-para {
color: #333;
font-size: 16px;
font-weight: 600;
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
li {
position: relative;
color: #333;
font-size: 16px;
font-weight: 400;
padding-left: 28px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
.highlight-area {
border-radius: 10px;
background: #eeecff;
padding: 20px;
color: #333;
font-size: 16px;
font-weight: 500;
margin-top: 18px;
label {
color: #5043da;
font-size: 16px;
font-weight: 500;
display: block;
margin-bottom: 5px;
}
}
}
}
.bottom-blue-div {
border-radius: 15px;
background: #5043da;
padding: 30px 20px;
.head {
color: #fff;
text-align: center;
font-size: 28px;
font-weight: 600;
margin-bottom: 20px;
}
.each-card {
border-radius: 15px;
border: 1px solid #a6aedd;
padding: 30px 15px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
h4 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 0;
}
p {
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 500;
margin: 0;
}
}
.bottom-para {
color: #ccd8ff;
text-align: center;
font-size: 18px;
font-weight: 600;
}
}
}
/* Extra section 6 end */
/* Extra section 7 start */
.extra-section-7 {
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
.extra-header-part {
position: relative;
display: flex;
justify-content: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
@media (max-width: 576px) {
left: 50%;
transform: translateX(-50%);
}
}
}
.left-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 25px;
justify-content: space-between;
height: 100%;
li {
display: flex;
gap: 25px;
@media (max-width: 576px) {
flex-direction: row;
gap: 15px;
}
.icon-div {
div {
width: 75px;
height: 75px;
border-radius: 10px;
border-radius: 10px;
background: #3e4390;
display: flex;
justify-content: center;
align-items: center;
@media (max-width: 576px) {
width: 42px;
height: 42px;
img {
width: 26px;
height: 26px;
}
}
}
}
.content-div {
h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
.right-div {
border-radius: 30px;
border: 1px solid #9899ff;
padding: 35px 30px;
display: flex;
flex-direction: column;
gap: 25px;
height: 100%;
.seperator {
width: 100%;
height: 1px;
background: #6162f3;
}
.head {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.sub-para {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
color: #fff;
font-size: 16px;
font-weight: 400;
padding-left: 28px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
.bottom-para {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
}
}
}
}
/* Extra section 7 end */
/* Extra section 8 start */
.extra-section-8 {
.extra-section-card {
border-radius: 15px;
border: 1px solid #d6d6d6;
background: #fff;
padding: 30px 20px;
height: 100%;
transition: all 0.3s ease-in-out;
.label {
color: var(--bg-primary);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-block: 10px 15px;
}
.seperator {
background: #e2e2e2;
width: 100%;
height: 1px;
}
.desc-para {
color: #333;
font-size: 16px;
font-weight: 400;
margin-block: 15px 20px;
}
ul {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}
.output-para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
}
}
}
}
/* Extra section 8 end */
/* Extra section 9 start */
.extra-section-9 {
.head-para {
color: #000;
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
li {
position: relative;
color: #fff;
font-size: 16px;
font-weight: 400;
padding-left: 65px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
h3 {
color: #000;
font-size: 18px;
font-weight: 500;
margin-bottom: 5px;
& .red {
color: #ff5757;
}
& .blue {
color: #0e01eb;
}
}
p {
color: #000;
font-size: 18px;
font-weight: 400;
margin-bottom: 0;
}
}
}
}
/* Extra section 9 end */
/* Trust section start */
.trust-section {
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
.extra-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 767px) {
&.left-in-tab {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-tab::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.trust-highlight-box {
max-width: 991px;
margin: 0 auto;
padding: 32px 36px;
border-radius: 30px;
border: 1px solid #9899ff;
@media (max-width: 767px) {
padding: 26px 15px;
}
.box-title {
font-size: 20px;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
li {
position: relative;
padding-left: 22px;
font-size: 18px;
color: #fff;
padding-bottom: 15px;
&::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #4fa4ff;
}
&::after {
content: "";
position: absolute;
left: 3px;
top: 8px;
width: 1px;
height: 100%;
border-radius: 50%;
background: #4fa4ff;
}
&:last-child {
padding-bottom: 0;
&::after {
display: none;
}
}
}
}
}
}
/* Trust section end */
/* Proven compliance start */
.extra-section-10 {
.label {
font-family: "PT Serif", serif;
background: linear-gradient(90deg, #25009b 0%, #0901fe 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.para {
color: #333;
font-size: 18px;
font-weight: 400;
margin-bottom: 10px;
}
.highlighted-area {
border-radius: 10px;
background: #eeecff;
padding: 15px 20px;
color: #333;
font-size: 16px;
font-weight: 500;
}
}
/* Proven compliance */
/* Accelator workflow start */
.accelerator-workflow {
.row {
align-items: stretch;
}
.timeline-step {
display: flex;
flex-direction: column;
gap: 35px;
height: 100%;
@media (max-width: 991px) {
gap: 0;
}
}
.timeline-card {
flex: 1;
display: flex;
flex-direction: column;
}
h2 {
color: #0f172a;
}
p {
font-size: 15px;
}
.timeline-line {
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
right: 0;
height: 4px;
width: 80%;
background: #e6e3ff;
z-index: 0;
}
.timeline-step {
position: relative;
z-index: 1;
text-align: center;
.timeline-dot {
width: 50px;
height: 50px;
background: #e6e3ff;
border-radius: 50%;
position: relative;
z-index: 2;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
color: #3f32c2;
text-align: center;
font-size: 20px;
font-weight: 600;
@media (max-width: 991px) {
margin-block: 30px;
}
}
/* Pulse animation using box-shadow */
.timeline-dot {
animation: pulse-ring 2.4s infinite ease-out;
}
.timeline-card {
position: relative;
border-radius: 15px;
border-top: 5px solid #b4bdff;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
padding: 25px 15px;
height: 100%;
&::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 20px;
background-color: #b4bdff;
border-radius: 14px;
}
@media (max-width: 991px) {
&:not(.last-step)::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 20px;
background-color: #b4bdff;
border-radius: 14px;
}
}
h3 {
color: #000;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: #333;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
.timeline-icon {
font-size: 26px;
color: #5b5cff;
margin-bottom: 12px;
}
}
}
/* accelator workflow end */
/* Digital transformation start */
.digital-section {
.each-header-part {
&::before {
display: none;
}
}
.img-div {
border-radius: 30px;
max-width: 1024px;
height: auto;
margin: 0 auto;
overflow: hidden;
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
}
/* Digital transformation end */
/* CTA start */
.cta-scale-section {
.cta-scale-wrapper {
background-color: #e4e1ff;
border-radius: 24px;
overflow: hidden;
}
.cta-image {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.cta-content {
padding: 40px 48px;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
@media (max-width: 767px) {
padding: 30px 15px;
}
h3 {
color: #000;
font-size: 30px;
font-weight: 700;
margin-bottom: 20px;
}
.cta-desc {
font-size: 16px;
color: #333;
margin-bottom: 20px;
}
.cta-buttons {
margin-bottom: 16px;
}
.cta-footnote {
color: #202020;
font-size: 18px;
font-style: italic;
font-weight: 400;
margin: 0;
}
}
}
/* CTA end */
/* Glowing CTA start */
.glowing-cta-section {
.inner-div {
border-radius: 30px;
border: 1px solid #f1f5f9;
padding: 50px 5%;
background-image: url("../images/icons/cta-bg.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
.head {
color: #fff;
font-size: 28px;
font-style: italic;
font-weight: 600;
margin-bottom: 10px;
}
.para {
color: #fff;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.cta-btn-white {
display: block;
border: 1px solid #ffffff;
background: #fff;
padding: 13px 25px;
border-radius: 5px;
text-align: center;
color: #0901fe;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
width: fit-content;
transition: all 0.25s ease-in-out;
&:hover {
background-color: transparent;
color: #fff;
transform: translateY(-2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
}
}
}
/* Glowing CTA end */
/* Extra section 11 */
.extra-section-11 {
.label {
font-family: "PT Serif", serif;
background: linear-gradient(90deg, #25009b 0%, #0901fe 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin-bottom: 15px;
text-transform: uppercase;
}
.head {
color: var(--text-dark);
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.2;
}
.para {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin-bottom: 15px;
line-height: 1.4;
span {
font-weight: 600;
}
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
color: #333;
font-size: 16px;
font-weight: 400;
padding-left: 32px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
}
/* Extra section 11 */
/* Extra section 12 start */
.extra-section-12 {
.extra-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 767px) {
&.left-in-tab {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-tab::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.inner-div {
border-radius: 50px;
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
padding: 50px 5%;
@media (max-width: 767px) {
border-radius: 25px;
}
.extra-section-card {
border-radius: 30px;
border: 1px solid #9899ff;
padding: 25px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div div {
width: 75px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #3e4390;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
}
/* Extra section 12 end */
/* Extra section 13 start */
.extra-section-13 {
.plug-para {
color: #333;
text-align: center;
font-size: 24px;
font-weight: 500;
margin-bottom: 25px;
}
.price-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
border: 1px solid #dedede;
background: #dedede;
padding: 13px 15px;
border-radius: 5px;
color: #000;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
width: fit-content;
transition: all 0.25s ease-in-out;
width: calc(100% - 40px);
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
&:hover {
background-color: transparent;
border-color: #000;
color: #000;
transform: translate(-50%, -2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
&.active {
border: 1px solid var(--bg-primary);
background: var(--bg-primary);
color: #fff;
&:hover {
background-color: transparent;
color: var(--bg-primary);
}
&:hover {
background-color: transparent;
border-color: var(--bg-primary);
color: var(--bg-primary);
transform: translate(-50%, -2px);
box-shadow:
0 14px 32px rgba(80, 67, 218, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.15);
&::before {
left: 120%;
}
}
}
}
.extra-section-card {
position: relative;
border-radius: 15px;
border: 1px solid #d6d6d6;
background: #fff;
padding: 30px 20px;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
.label {
color: var(--bg-primary);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-block: 10px 15px;
}
.seperator {
background: #e2e2e2;
width: 100%;
height: 1px;
}
.desc-para {
color: #333;
font-size: 16px;
font-weight: 400;
margin-block: 15px 20px;
span {
font-weight: 600;
}
}
.you-get-para {
color: #333;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
}
.desc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
li {
position: relative;
color: #333;
font-size: 16px;
font-weight: 400;
padding-left: 32px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
.output-head {
color: #333;
font-size: 16px;
font-weight: 600;
margin-block: 15px 10px;
}
.output-para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
}
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
margin-block: 15px 18px;
li {
position: relative;
color: #333;
font-size: 16px;
font-weight: 400;
padding-left: 28px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 5px;
}
}
}
.bottom-highlighted-div {
border-radius: 5px;
background: #e6e3ff;
padding: 15px 25px;
margin-bottom: 65px;
p {
color: #5043da;
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
}
ul {
display: flex;
flex-direction: column;
gap: 5px;
padding-left: 20px;
margin: 0;
li {
color: #000;
font-size: 14px;
font-weight: 400;
&::marker {
font-size: 20px;
color: #5043da;
}
}
}
}
&.active {
overflow: visible;
border-color: var(--bg-primary);
.recommended-label {
position: absolute;
top: -15px;
right: 20px;
border-radius: 26px;
padding: 5px 15px;
background: var(--bg-primary);
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 600;
}
}
}
.bottom-imp-para {
color: #5043da;
text-align: center;
font-size: 18px;
font-weight: 500;
font-style: italic;
margin-block: 35px 0;
span {
font-weight: 600;
}
}
}
/* Extra section 13 end */
/* Extra section 14 start */
.extra-section-14 {
.header-part {
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #beb6ff;
margin-bottom: 30px;
.icon-div {
div {
width: 75px;
height: 75px;
border-radius: 10px;
background: #dfdcff;
display: flex;
justify-content: center;
align-items: center;
}
}
.content-div {
h3 {
color: #212844;
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: #7300ff;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
margin: 0;
}
}
}
.extra-section-card {
border-radius: 30px;
border: 1.5px solid #e4e4e7;
padding: 25px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #fff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h4 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Extra section 14 end */
/* Extra section 15 start */
.extra-section-15 {
.card {
padding: 30px 25px;
border-radius: 30px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
@media (max-width: 767px) {
padding: 30px 15px;
}
h3 {
color: #212844;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 0;
}
p {
color: #333;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
}
&.part-1 {
background: #eceaff;
}
&.part-2 {
background: #e4e7ff;
}
&.part-3 {
background: #efe3ff;
}
}
}
/* Extra section 15 start */
/* Extra section 16 start */
.extra-section-16 {
.each-extra-card {
position: relative;
display: flex;
gap: 15px;
align-items: flex-start;
background: #ffffff;
border: 1px solid #efecff;
padding: 20px 15px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(22, 18, 58, 0.03);
overflow: hidden;
cursor: pointer;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
/* HOVER STATE */
&:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(80, 67, 218, 0.12);
border-color: #dcd6ff;
&::before {
opacity: 1;
transform: scaleY(1);
}
.card-content {
h3 {
color: #5043da;
}
}
}
/* MOBILE STACK */
@media (max-width: 576px) {
flex-direction: column;
}
}
.card-icon {
div {
width: 40px;
height: 40px;
border-radius: 10px;
background: #ccd8ff;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 18px;
font-weight: 600;
transition:
background 0.3s ease,
box-shadow 0.3s ease;
}
}
.card-content {
h3 {
font-size: 20px;
font-weight: 600;
color: var(--text-dark);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
transition: color 0.25s ease;
.duration {
font-size: 13px;
color: var(--text-primary);
font-weight: 600;
background: #f3eeff;
padding: 4px 10px;
border-radius: 20px;
}
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
transition: text-decoration 0.25s ease;
}
}
}
@media (prefers-reduced-motion: reduce) {
.each-accelerator-card {
transition: none;
&:hover {
transform: none;
box-shadow: 0 6px 20px rgba(22, 18, 58, 0.03);
}
}
}
.impact-para {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.testimonial-card {
position: relative;
border-radius: 15px;
border-left: 5px solid #9899ff;
background: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
.testimonial-text {
color: #333;
font-size: 18px;
font-style: italic;
font-weight: 400;
span {
font-weight: 600;
}
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
.author-name {
color: #101828;
font-size: 18px;
font-weight: 500;
}
.author-role {
color: #667085;
font-size: 16px;
font-weight: 400;
}
}
}
}
/* Extra section 16 end */
/* Risk free roadmap start */
.roadmap-section {
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
.extra-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 767px) {
&.left-in-tab {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-tab::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.roadmap-row {
position: relative;
}
.roadmap-line {
position: absolute;
top: 25px;
left: 15px;
right: 12px;
height: 1px;
background: rgba(255, 255, 255, 0.25);
width: calc(100% - 20%);
}
.roadmap-step {
position: relative;
margin-bottom: 40px;
.step-badge {
width: 50px;
height: 50px;
background: #7300ff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
color: #fff;
margin-bottom: 20px;
}
h4 {
font-size: 20px;
font-weight: 600;
color: #fff;
margin-bottom: 10px;
}
p {
font-size: 18px;
color: #ccd8ff;
font-weight: 400;
margin: 0;
}
}
/* Mobile adjustments */
@media (max-width: 991px) {
.roadmap-line {
display: none;
}
.roadmap-step {
display: flex;
gap: 15px;
.step-badge {
flex: none;
width: 40px;
height: 40px;
font-size: 24px;
}
.step-badge {
margin-inline: auto;
}
}
}
}
/* Risk free roadmap end */
/* Public sector end */
.extra-section-17 {
.inner-div {
border-radius: 30px;
background: #eceaff;
padding: 50px 30px;
@media (max-width: 767px) {
padding: 40px 15px;
}
.gov-list {
.para {
color: #333;
font-size: 16px;
font-weight: 600;
margin-block: 25px 10px;
}
ul {
padding-left: 18px;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
color: #333;
font-size: 16px;
font-weight: 400;
&::marker {
color: #5043da;
font-size: 16px;
}
}
}
}
/* Right side cards */
.info-card {
background: #ffffff;
border: 1px solid #eaecf0;
padding: 20px;
border-radius: 8px;
.card-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
ul {
padding-left: 18px;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
color: #333;
font-size: 16px;
font-weight: 400;
&::marker {
color: #5043da;
font-size: 20px;
}
}
}
}
.info-highlight {
padding: 20px;
background: #ccd8ff;
border-radius: 12px;
color: #5043da;
font-size: 16px;
font-weight: 400;
span {
font-weight: 600;
}
}
}
}
/* Public sector end */
/* CTA section start */
.gov-cta-section {
position: relative;
width: 100%;
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
overflow: hidden;
.content-part {
color: #ffffff;
padding-block: 50px;
h2 {
font-size: 30px;
font-weight: 600;
margin-bottom: 25px;
}
.lead {
font-size: 18px;
color: #e5e7ff;
font-weight: 400;
margin-bottom: 25px;
}
hr {
border-color: #685dad;
margin: 25px 0;
}
}
.ungap-photo {
position: absolute;
right: -80px;
top: 0;
}
.ungap-photo-2 {
position: absolute;
left: -80px;
top: 0;
}
.gov-cta-image {
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.middle-list-area {
padding-top: 35px;
border-top: 1px solid #685dad;
margin-top: 35px;
p {
color: #fff;
font-size: 18px;
font-weight: 400;
}
ul {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
li {
color: #fff;
font-size: 16px;
font-weight: 400;
}
}
}
.side-para {
color: #fff;
font-size: 14px;
font-style: italic;
font-weight: 400;
margin: 0;
}
}
/* CTA section end */
/* Extra section 18 start */
.extra-section-18 {
.side-heading {
color: #000;
font-size: 18px;
font-weight: 400;
margin-bottom: 20px;
span {
font-weight: 500;
}
}
.side-list {
margin: 0;
padding: 0;
list-style: none;
li {
display: flex;
gap: 10px;
color: #000;
font-size: 16px;
font-weight: 400;
margin-top: 20px;
.img-div {
div {
border-radius: 100px;
background: #efedff;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
}
.content-div {
.para {
color: #333;
font-size: 18px;
font-weight: 400;
margin: 0;
}
}
}
}
.promise-div {
border-radius: 15px;
border: 1px solid #9899ff;
background: #eeecff;
padding: 15px 20px;
.para-1 {
color: #333;
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
display: flex;
gap: 10px;
}
.para-2 {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
/* Extra section 18 end */
/* Extra section 19 end */
.extra-section-19 {
.bleeding-neck-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 500;
}
.extra-section-card {
border-radius: 30px;
padding: 25px 30px;
display: flex;
align-items: center;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #eff7ff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.number-div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #5043da;
color: #fff;
font-size: 28px;
font-weight: 700;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Extra section 19 end */
/* Extra section 20 start */
.extra-section-20 {
.cloud-nav {
border: none;
.nav-item {
margin-bottom: 16px;
}
.nav-link {
border: 1px solid #c6cdd9;
border-radius: 25px;
background: transparent;
padding: 20px 35px;
display: flex;
align-items: center;
gap: 14px;
color: #475569;
font-weight: 500;
transition: all 0.3s ease;
width: 100%;
text-align: left;
@media (max-width: 767px) {
padding: 15px 15px;
}
&:hover {
background: #ffffff;
}
.icon-box {
width: 65px;
height: 65px;
background: #cbd5e1;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
&.active {
background: #ffffff;
border-color: var(--bg-primary);
box-shadow: 0 10px 25px rgba(91, 92, 255, 0.15);
color: #000;
.icon-box {
background: #dfdcff;
svg path {
stroke: var(--bg-primary);
}
&.fill {
svg path {
stroke: unset;
fill: var(--bg-primary);
}
}
}
}
}
}
.cloud-tab-content {
border-radius: 15px;
border-top: 5px solid #5043da;
background: #fff;
padding: 35px 35px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px !important;
}
.eyebrow {
position: relative;
display: inline-block;
color: var(--bg-primary);
font-family: Poppins;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 20px;
padding-left: 55px;
&::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 45px;
height: 2px;
background: var(--bg-primary);
}
}
h3 {
color: var(--text-dark);
font-size: 28px;
font-weight: 700;
margin-bottom: 14px;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
}
.check-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
position: relative;
padding-left: 25px;
color: #333;
font-size: 16px;
font-weight: 400;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
&.swiper-slide {
height: auto;
}
}
}
/* Extra section 20 end */
/* Extra section 21 end */
.extra-section-21 {
background: radial-gradient(50.74% 46.85% at 92.75% 6.07%, rgba(147, 51, 234, 0.65) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(52.09% 45.45% at 6.28% 0%, rgba(79, 70, 229, 0.6) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(104deg, #0b102a 9.53%, #0a0f24 91.1%);
.extra-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.extra-each-card {
border-radius: 30px;
border: 1px solid rgba(124, 124, 255, 0.45);
padding: 35px 30px;
height: 100%;
@media (max-width: 767px) {
padding: 30px 15px;
}
.icon-div {
margin-bottom: 20px;
}
.head {
color: #fff;
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
}
.sub-head {
color: #c7c9ff;
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.check-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
position: relative;
padding-left: 25px;
color: #fff;
font-size: 16px;
font-weight: 400;
&::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #7c7cff;
font-size: 20px;
font-weight: 400;
}
}
}
}
}
/* Extra section 21 end */
/* Extra section 22 end */
.extra-section-22 {
.all-tools-div {
display: flex;
align-items: center;
justify-content: center;
gap: 5%;
row-gap: 50px;
flex-wrap: wrap;
@media (max-width: 576px) {
row-gap: 35px;
> div {
width: calc(50% - 2.5%);
}
}
}
}
/* Extra section 22 end */
/* Extra section 23 start */
.extra-section-23 {
.each-extra-card {
display: flex;
gap: 25px;
border-radius: 30px;
background: #eeecff;
padding: 30px;
height: 100%;
@media (max-width: 991px) {
padding: 25px 15px;
gap: 15px;
}
.icon-div {
div {
width: 50px;
height: 50px;
background-color: #6d45e4;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
.testimonial-card {
position: relative;
padding: 25px;
border-radius: 25px;
background: #fff;
box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.03);
max-width: 725px;
margin: 0 auto;
@media (max-width: 991px) {
padding: 25px 15px;
}
.testimonial-text {
color: #333;
font-size: 18px;
font-style: italic;
font-weight: 500;
span {
font-weight: 600;
}
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
.author-name {
color: #101828;
font-size: 18px;
font-weight: 500;
}
.author-role {
color: #667085;
font-size: 16px;
font-weight: 400;
}
}
}
}
/* Extra section 23 end */
/* Extra section 24 start */
.extra-section-24 {
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 25px;
li {
position: relative;
padding-left: 65px;
color: #fff;
font-size: 16px;
font-weight: 400;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 0;
color: #7c7cff;
font-size: 20px;
font-weight: 400;
}
@media (max-width: 576px) {
padding-left: 40px;
&::before {
content: url('data:image/svg+xml,');
}
}
h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Extra section 24 end */
/* Extra section 25 start */
.extra-section-25 {
.extra-section-card {
position: relative;
border-radius: 30px;
padding: 25px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #fff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.step-num {
position: absolute;
right: 0;
top: 0;
border-radius: 0 25px;
background: #e6ecff;
padding: 7px 40px;
color: #0901fe;
text-align: center;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
}
.img-div div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(80, 67, 218, 0.12);
.img-div div {
background-color: rgba(80, 67, 218, 0.06);
border-radius: 50%;
}
.content-div h3 {
color: #5043da;
}
}
@media (prefers-reduced-motion: reduce) {
.extra-section-card {
transition: none;
&:hover {
transform: none;
box-shadow:
inset 0 0 0 0.5px rgba(209, 213, 219, 0.9),
0 6px 16px rgba(22, 18, 58, 0.04);
}
}
}
}
}
/* Entra section 25 end */
/* Extra section 26 start */
.extra-section-26 {
.image-wrapper {
border-radius: 30px;
overflow: hidden;
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
.content-wrapper {
.feature-para {
color: #333;
font-size: 16px;
font-weight: 400;
margin-bottom: 15px;
span {
font-weight: 600;
}
}
.feature-list {
list-style: none;
padding: 0;
margin-bottom: 24px;
li {
position: relative;
padding-left: 55px;
margin-bottom: 14px;
font-size: 16px;
font-weight: 400;
color: #333;
min-height: 40px;
display: flex;
align-items: center;
&::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 10px;
background: #6d45e4;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
}
}
}
.highlight-box {
background: #e6e3ff;
color: #5043da;
padding: 15px 20px;
border-radius: 15px;
font-size: 14px;
font-weight: 500;
@media (max-width: 576px) {
padding: 15px 15px;
}
}
}
}
/* Extra section 26 end */
/* Extra section 27 start */
.extra-section-27 {
.side-para {
color: #5043da;
font-size: 20px;
font-weight: 600;
}
.side-para-2 {
color: #000;
font-size: 16px;
font-weight: 400;
}
.side-para-3 {
color: #000;
font-size: 16px;
font-weight: 500;
}
.side-list {
margin: 0;
padding: 0;
list-style: none;
margin-top: 30px;
li {
display: flex;
gap: 20px;
color: #000;
font-size: 16px;
font-weight: 400;
margin-top: 15px;
@media (max-width: 576px) {
gap: 10px;
}
.content-div {
.head {
color: #000;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
}
}
}
}
.promise-div {
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #f2f0ff;
padding: 20px;
.para-1 {
color: #3e32a7;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
text-transform: uppercase;
}
.para-2 {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
&.blue-text {
color: #5043da;
font-size: 18px;
font-weight: 500;
}
}
}
}
/* Extra section 27 end */
/* Extra section 28 end */
.extra-section-28 {
.head-para {
color: #5043da;
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.para-1 {
color: #333;
font-size: 18px;
font-style: italic;
font-weight: 400;
margin-bottom: 20px;
span {
font-weight: 600;
}
}
.para-2 {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
/* Extra section 28 end */
/* Extra section 29 start */
.extra-section-29 {
.extra-each-card {
border-radius: 15px;
border: 1px solid #d4dcff;
background: #fff;
padding: 25px 20px;
height: 100%;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
.top-div {
display: flex;
justify-content: space-between;
gap: 15px;
.icon-div {
width: 65px;
height: 65px;
border-radius: 10px;
background: #dfdcff;
display: flex;
justify-content: center;
align-items: center;
flex: none;
}
.count {
color: #ededed;
font-size: 64px;
font-weight: 700;
line-height: 1;
}
}
.head {
color: var(--text-dark);
font-size: 24px;
font-weight: 600;
margin-block: 15px;
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
li {
position: relative;
padding-left: 30px;
h4 {
color: #000;
font-size: 18px;
font-weight: 500;
margin-bottom: 5px;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(80, 67, 218, 0.12);
.img-div div {
background-color: rgba(80, 67, 218, 0.06);
border-radius: 50%;
}
.content-div h3 {
color: #5043da;
}
}
@media (prefers-reduced-motion: reduce) {
.extra-section-card {
transition: none;
&:hover {
transform: none;
box-shadow:
inset 0 0 0 0.5px rgba(209, 213, 219, 0.9),
0 6px 16px rgba(22, 18, 58, 0.04);
}
}
}
}
}
/* Extra section 29 end */
/* Extra section 30 start */
.extra-section-30 {
.extra-section-card {
height: 100%;
display: flex;
gap: 20px;
@media (max-width: 991px) {
flex-direction: column;
}
.img-div div {
width: 75px;
height: 75px;
border-radius: 10px;
background: var(--bg-primary);
display: flex;
justify-content: center;
align-items: center;
}
.content-div {
display: flex;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
.underline-label {
color: var(--text-secondary);
font-size: 16px;
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: #a5c4ef;
text-underline-offset: 10px;
margin-bottom: 5px;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Entra section 30 end */
/* Extra section 31 start */
.extra-section-31 {
.inner-div {
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
padding: 75px 50px;
border-radius: 50px;
@media (max-width: 991px) {
padding: 60px 30px;
}
@media (max-width: 767px) {
padding: 35px 20px;
}
}
.left-div {
.head {
color: #9899ff;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 5px;
}
.para {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
.highlighted-area {
border-radius: 15px;
background: rgba(37, 99, 235, 0.2);
padding: 20px;
.result-head {
color: #9899ff;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
.result-para-1 {
color: #fff;
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.result-para-2 {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.testimonial-card {
border-radius: 30px;
border: 1px solid #9899ff;
padding: 35px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
height: 100%;
@media (max-width: 576px) {
padding: 30px 20px;
}
.star-div {
display: flex;
align-items: center;
gap: 10px;
}
.testimonial-text {
color: #fff;
font-size: 18px;
font-style: italic;
font-weight: 600;
span {
font-weight: 600;
}
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
.author-name {
color: #fff;
font-size: 18px;
font-weight: 500;
}
.author-role {
color: #fff;
font-size: 16px;
font-weight: 400;
}
}
}
}
/* Extra section 31 end */
/* NGO workflow start */
.ngo-workflow {
.left-part {
position: relative;
display: flex;
gap: 5px;
padding-bottom: 20px;
&::before {
content: "";
background-image: url('data:image/svg+xml,');
position: absolute;
background-position: left bottom;
background-repeat: no-repeat;
background-size: contain;
width: calc(100% - 20px);
height: 100%;
}
}
.workflow-list {
max-width: 768px;
margin-inline: auto;
margin-top: 15px;
}
.workflow-item {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 40px;
position: relative;
@media (max-width: 576px) {
flex-direction: column;
gap: 15px;
justify-content: center;
align-items: center;
text-align: center;
}
}
.step-number {
position: relative;
font-size: 24px;
font-weight: 700;
color: #a6aabc;
text-align: right;
flex-shrink: 0;
z-index: 1;
}
.icon-wrap {
position: relative;
border-radius: 138px;
border: 0.828px solid #7375ff;
background: #fff;
box-shadow:
0 53.64px 38.774px 0 rgba(56, 56, 56, 0.08),
0 31.877px 21.088px 0 rgba(56, 56, 56, 0.06),
0 16.552px 10.759px 0 rgba(56, 56, 56, 0.05),
0 6.743px 5.395px 0 rgba(56, 56, 56, 0.04),
0 1.533px 2.605px 0 rgba(56, 56, 56, 0.02);
padding: 12px 35px;
z-index: 1;
img {
width: 32px;
height: 32px;
}
}
.content {
h5 {
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 6px;
}
p {
font-size: 16px;
color: #333;
margin: 0;
}
}
}
/* NGO workflow end */
/* Extra section 32 Start */
.extra-section-32 {
.each-transparent-price {
position: relative;
border: 2px solid transparent;
padding: 35px 15px;
border-radius: 10px;
border: 3px solid #a4afed;
min-height: 165px;
height: 100%;
.line-1 {
position: absolute;
left: -3px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 65%;
background: #f6f2fb;
}
.line-2 {
position: absolute;
right: -3px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 65%;
background: #f6f2fb;
}
.line-3 {
position: absolute;
left: 50%;
top: -3px;
transform: translateX(-50%);
width: 65%;
height: 3px;
background: #f6f2fb;
}
.line-4 {
position: absolute;
left: 50%;
bottom: -3px;
transform: translateX(-50%);
width: 65%;
height: 3px;
background: #f6f2fb;
}
.img-div {
position: absolute;
left: 50%;
top: -50px;
transform: translateX(-50%);
z-index: 1;
}
.head {
color: var(--text-dark);
text-align: center;
font-size: 20px;
font-weight: 600;
margin-block: 20px 10px;
}
.para {
color: var(--text-secondary);
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0;
}
}
.hiring-para-text {
color: var(--text-secondary);
text-align: center;
font-size: 18px;
font-weight: 600;
max-width: 1050px;
margin-inline: auto;
margin-top: 60px;
}
}
/* Extra section 32 End */
.new-full-cta-section {
background-image: url("../images/cta-bg-img.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.content-div {
max-width: 1022px;
margin: 0 auto;
.head {
color: #fff;
text-align: center;
font-size: 36px;
font-weight: 600;
margin-bottom: 15px;
text-align: center;
line-height: 1.4;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 35px;
}
.para-2 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 600;
}
}
.simple-btn {
color: #b491ff;
}
}
.new-full-cta-section-2 {
background-image: url("../images/cta-bg-img-2.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.content-div {
max-width: 1022px;
margin: 0 auto;
.head {
color: #fff;
text-align: center;
font-size: 36px;
font-weight: 600;
margin-bottom: 15px;
text-align: center;
line-height: 1.4;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 35px;
}
.para-2 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 600;
}
}
.download-blueprint-para {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 500;
margin-block: 30px;
flex-wrap: wrap;
a {
color: #fff;
text-decoration: underline;
&:hover {
color: #b491ff;
}
}
}
.bottom-para {
color: #c9d5ff;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 500;
margin: 0;
}
}
.new-full-cta-section-3 {
background-image: url("../images/cta-bg-img-2.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.content-div {
max-width: 1022px;
margin: 0 auto;
.head {
color: #fff;
text-align: center;
font-size: 36px;
font-weight: 600;
margin-bottom: 15px;
text-align: center;
line-height: 1.4;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 35px;
}
.para-2 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 600;
}
}
.download-blueprint-para {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 500;
margin-block: 30px;
flex-wrap: wrap;
a {
color: #9899ff;
text-decoration: underline;
&:hover {
color: #fff;
}
}
}
.cta-bottom-part {
display: flex;
gap: 10px;
color: #ccd8ff;
font-size: 16px;
font-weight: 600;
margin: 0;
border-radius: 15px;
background: #5043da;
padding: 20px 45px;
@media (max-width: 767px) {
padding: 20px 20px;
}
}
}
.new-full-cta-section-4 {
background: linear-gradient(90deg, #3d88ee 8.13%, #eeb0ff 107.01%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.content-div {
max-width: 1100px;
margin: 0 auto;
.head {
color: #fff;
text-align: center;
font-size: 36px;
font-weight: 600;
margin-bottom: 15px;
text-align: center;
line-height: 1.4;
}
.para-1 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 35px;
}
.para-2 {
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 600;
}
}
.bottom-para {
color: #fff;
text-align: center;
font-size: 20px;
font-style: italic;
font-weight: 600;
margin: 0;
}
.highlighted-para {
border-radius: 15px;
border: 1px solid #b4bdff;
background: #4389ee;
padding: 20px;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 600;
}
.cta-bottom-part {
display: flex;
gap: 10px;
color: #ccd8ff;
font-size: 16px;
font-weight: 600;
margin: 0;
border-radius: 15px;
background: #5043da;
padding: 20px 45px;
@media (max-width: 767px) {
padding: 20px 20px;
}
}
}
/* Trusted platform start */
.trusted-platforms-section {
.section-label {
font-family: "PT Serif", serif;
background: linear-gradient(90deg, #25009b 0%, #0901fe 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.section-title {
background: linear-gradient(90deg, #6c47e5 13.96%, #4889ff 87.17%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 36px;
font-style: normal;
font-weight: 700;
margin-bottom: 50px;
}
.case-snapshot-area {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-block: 25px;
gap: 15px;
.snapshot-label {
border-radius: 30px;
background: #7300ff;
padding: 10px 25px;
color: #fff;
font-size: 16px;
font-weight: 600;
}
p {
color: #212844;
text-align: center;
font-size: 23px;
font-weight: 500;
margin: 0;
}
}
.stats-row {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-block: 15px;
max-width: 935px;
margin-inline: auto;
.stat-item {
text-align: center;
padding: 0 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&:not(:last-child) {
@media (min-width: 768px) {
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
}
.stat-label {
font-size: 16px;
color: var(--text-secondary);
margin-bottom: 6px;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #000;
margin: 0;
}
}
}
.testimonial-box {
max-width: 1195px;
background: #e4eaff;
padding: 35px 30px;
border-radius: 14px;
margin: 30px auto;
@media (max-width: 576px) {
padding: 30px 30px;
}
.testimonial-text {
font-size: 20px;
color: #0d2659;
margin-bottom: 14px;
font-style: italic;
}
.testimonial-author {
font-size: 18px;
color: #000264;
strong {
font-weight: 600;
font-style: italic;
}
span {
color: #5b5b5b;
font-size: 16px;
}
}
}
.logo-row {
.logo-card {
background: #ffffff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
min-height: 60px;
img {
max-height: 88px;
max-width: 100%;
object-fit: contain;
}
}
}
}
/* Trusted platform end */
/* Extra section 33 Start */
.extra-section-33 {
.each-service-card {
border-radius: 10px;
background: #f6f5ff;
padding: 25px 20px;
display: flex;
flex-direction: column;
gap: 15px;
border: 1px solid var(--bg-light);
border-top: 4px solid var(--bg-primary);
height: 100%;
@media screen and (max-width: 567px) {
flex-direction: column;
align-items: center;
padding-inline: 15px;
}
&:hover {
border-color: #333;
}
.img-div div {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
.desc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
li {
position: relative;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
padding-left: 28px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
}
}
}
.closing-para {
color: #5043da;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 600;
margin: 0;
}
}
/* Extra section 33 end */
/* Fintech Process start*/
.process-section {
.process-area {
position: relative;
user-select: none;
@media (min-width: 767px) {
margin-top: -75px;
}
}
.bottom-part {
position: relative;
padding-top: 30px;
border-top: 1px solid #d3d3d3;
p {
color: #000;
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0;
}
}
}
/* Fintech process end */
/* Extra section 34 Start */
.extra-section-34 {
.left-para {
color: #000;
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.left-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 20px;
li {
position: relative;
padding-left: 33px;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
}
}
.right-div {
border-radius: 15px;
border: 2px solid #7300ff;
background: #fff;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
height: 100%;
padding: 35px 25px;
@media (max-width: 576px) {
padding: 25px 15px;
}
.head-para {
color: #000;
font-size: 24px;
font-weight: 600;
line-height: 1.3;
}
h3 {
color: var(--text-secondary);
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
.each-div {
border-radius: 10px;
border: 1px solid #9899ff;
background: #eeecff;
padding: 15px;
}
}
.bottom-para-1 {
color: #5043da;
text-align: center;
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.bottom-para-2 {
color: #222;
text-align: center;
font-size: 18px;
font-weight: 500;
margin-bottom: 0;
}
}
/* Extra section 34 Start */
/* Extra section 35 Start */
.extra-section-35 {
.each-extra-card {
border-radius: 15px;
border: 1px solid #b3b3b3;
padding: 25px 15px;
height: 100%;
h3 {
color: #000;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
position: relative;
color: #000;
font-size: 16px;
font-weight: 400;
padding-left: 25px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 1px;
}
}
}
}
.last-text-col {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 25px 15px;
p {
color: #5043da;
font-size: 20px;
font-style: italic;
font-weight: 500;
padding-left: 25px;
margin: 0;
border-left: 5px solid #a289ff;
}
}
}
/* Extra section 35 End */
/* Extra section 36 Start */
.extra-section-36 {
.each-extra-card {
border-radius: 30px;
border: 1.5px solid #e4e4e7;
background: #fff;
padding: 25px 25px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
h3 {
color: #000;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
ul {
margin: 0;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
li {
position: relative;
color: #000;
font-size: 16px;
font-weight: 400;
}
}
}
.closing-para {
color: #222;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 500;
span {
color: #5043da;
}
}
}
/* Extra section 36 End */
/* Extra section 37 Start */
.extra-section-37 {
.each-service-card {
border-radius: 10px;
background: #f6f5ff;
padding: 25px 20px;
display: flex;
flex-direction: column;
gap: 15px;
border: 1px solid var(--bg-light);
border-top: 4px solid var(--bg-primary);
height: 100%;
@media screen and (max-width: 567px) {
flex-direction: column;
align-items: center;
padding-inline: 15px;
}
&:hover {
border-color: #333;
}
.img-div div {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
h3 {
color: #5043da;
font-size: 20px;
font-weight: 600;
margin: 0;
padding-bottom: 15px;
border-bottom: 1px solid #e2e2e2;
}
.desc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
li.false {
position: relative;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
padding-left: 28px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
}
li.true {
position: relative;
color: var(--text-secondary);
font-size: 18px;
font-weight: 600;
padding-left: 28px;
&:before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
}
}
}
.closing-para {
color: #5043da;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 600;
margin: 0;
}
}
/* Extra section 37 end */
/* Engagment roadmap start */
.engagement-roadmap {
.roadmap-subtitle {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
color: #6f63ff;
margin-bottom: 8px;
}
.roadmap-title {
font-size: 32px;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
}
.roadmap-desc {
font-size: 16px;
color: #64748b;
max-width: 600px;
margin: 0 auto;
}
.roadmap-wrapper {
position: relative;
width: 100%;
margin-inline: auto;
}
.roadmap-line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
img {
width: auto;
height: 375px;
}
@media (max-width: 1368px) {
img {
width: auto;
height: 425px;
}
}
@media (max-width: 1056px) {
img {
width: auto;
height: 470px;
}
}
}
.roadmap-item {
position: relative;
background: #e7ddff;
border-radius: 2px 1000px 1000px 2px;
padding: 20px;
padding-right: 85px;
min-height: 150px;
z-index: 1;
h5 {
font-size: 20px;
font-weight: 700;
color: #000;
margin-bottom: 6px;
}
p {
font-size: 16px;
color: #333;
font-weight: 400;
margin: 0;
}
.step-label {
font-size: 18px;
font-weight: 600;
color: #7300ff;
display: block;
margin-bottom: 4px;
}
.icon-circle {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 56px;
height: 56px;
background: #7300ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 36px;
height: 36px;
filter: brightness(0) invert(1);
}
}
}
/* RIGHT SIDE ICON ALIGNMENT */
.col-lg-6:last-child {
.roadmap-item {
padding: 20px;
padding-left: 85px;
border-radius: 1000px 2px 2px 1000px;
.icon-circle {
left: 15px;
right: auto;
}
}
}
/* MOBILE */
@media (max-width: 991px) {
.roadmap-item {
border-radius: 20px !important;
padding: 35px !important;
.icon-circle {
position: static;
transform: none;
margin-top: 16px;
}
}
}
@media (max-width: 767px) {
.roadmap-item {
border-radius: 20px !important;
padding: 30px 15p !important;
.icon-circle {
position: static;
transform: none;
margin-top: 16px;
}
}
}
}
/* Engagment roadmap end */
/* Extra section 38 end */
.extra-section-38 {
.right-top-para {
color: #000;
font-size: 18px;
font-weight: 400;
margin-bottom: 15px;
.red {
color: #ff5757;
}
.blue {
color: #5043da;
font-weight: 600;
}
}
.right-para {
color: #000;
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
.large-img-div {
height: 100%;
width: 100%;
border-radius: 35px;
overflow: hidden;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
.right-lists {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
border-radius: 10px;
border: 1px solid #a0a3bd;
background: #f6f2fb;
display: flex;
gap: 10px;
padding: 15px;
h3 {
color: #333;
font-size: 18px;
font-weight: 600;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.bottom-highlight-para {
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #e4e1ff;
padding: 20px 15px;
color: #000;
text-align: center;
font-size: 20px;
font-weight: 500;
margin: 0;
span {
font-weight: 600;
}
}
}
/* Extra section 38 end */
/* Extra section 39 end */
.extra-section-39 {
.blue-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 500;
margin-bottom: 25px;
}
.each-blue-card {
border-radius: 30px;
background: #eff7ff;
padding: 25px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
label {
display: block;
color: #5043da;
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
}
h3 {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
.blue-part {
border-radius: 15px;
background: #5043da;
padding: 30px;
max-width: 925px;
width: 100%;
margin: 0 auto;
@media (max-width: 767px) {
padding: 25px 15px;
}
.top-para {
color: #fff;
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.compare-div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
p {
color: #fff;
font-size: 18px;
font-weight: 500;
margin: 0;
}
@media (max-width: 576px) {
flex-direction: column;
gap: 15px;
}
}
.bottom-para {
color: #ccd8ff;
text-align: center;
font-size: 18px;
font-weight: 600;
padding-top: 20px;
border-top: 1px solid #b4bdff;
margin-block: 20px 0;
}
}
}
/* Extra section 39 end */
/* Extra section 40 start */
.extra-section-40 {
.each-card {
border-radius: 30px;
border: 1.5px solid var(--gray-200, #e4e4e7);
background: var(--base-white, #fff);
padding: 25px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-block: 20px 15px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
padding-left: 30px;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
}
}
}
.bottom-para {
border-radius: 15px;
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
padding: 20px;
color: #ccd8ff;
text-align: center;
font-size: 18px;
font-weight: 600;
span {
color: #9899ff;
}
}
}
/* Extra section 40 end */
/* Features and services start */
.feature-and-services-section {
.row {
align-items: stretch;
}
.timeline-step {
display: flex;
flex-direction: column;
gap: 35px;
height: 100%;
@media (max-width: 991px) {
gap: 0;
}
}
.timeline-card {
flex: 1;
display: flex;
flex-direction: column;
}
h2 {
color: #0f172a;
}
p {
font-size: 15px;
}
.timeline-line {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
right: 0;
height: 4px;
width: 80%;
background: #e6e3ff;
z-index: 0;
}
.timeline-step {
position: relative;
z-index: 1;
text-align: center;
.timeline-dot {
padding: 5px 20px;
background: #e6e3ff;
border-radius: 30px;
position: relative;
z-index: 2;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
color: #3f32c2;
text-align: center;
font-size: 16x;
font-weight: 600;
@media (max-width: 991px) {
margin-block: 30px;
}
}
/* Pulse animation using box-shadow */
.timeline-dot {
animation: pulse-ring 2.4s infinite ease-out;
}
.timeline-card {
position: relative;
border-radius: 15px;
border-top: 5px solid #b4bdff;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
padding: 25px 15px;
height: 100%;
&::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 20px;
background-color: #b4bdff;
border-radius: 14px;
}
@media (max-width: 991px) {
&:not(.last-step)::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 20px;
background-color: #b4bdff;
border-radius: 14px;
}
}
h3 {
color: #000;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: #333;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
.timeline-icon {
font-size: 26px;
color: #5b5cff;
margin-bottom: 12px;
}
}
}
/* Features and services end */
/* Extra section 41 start */
.extra-section-41 {
.social-proof-div {
border-radius: 30px;
overflow: hidden;
.each-card {
padding: 25px;
height: 100%;
label {
display: block;
color: #7300ff;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 8px;
}
h3 {
color: #000;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
ul {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
li {
color: #000;
font-size: 16px;
font-weight: 400;
&::marker {
color: #5043da;
}
}
}
&.card-1 {
background: #eff6ff;
}
&.card-2 {
background: #eeecff;
}
&.card-3 {
background: #5043da;
h3 {
color: #fff;
}
ul {
color: #fff;
li {
color: #fff;
&::marker {
color: #fff;
}
}
}
}
}
}
.logo-row {
.logo-card {
background: #ffffff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
min-height: 60px;
img {
max-height: 88px;
max-width: 100%;
object-fit: contain;
}
}
}
.testimonial-card {
position: relative;
border-radius: 25px;
background: #fff;
box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.03);
padding: 25px;
max-width: 725px;
width: 100%;
margin-inline: auto;
&::before {
content: url("../images/icons/quote.svg");
position: absolute;
right: 20px;
top: 20px;
}
.testimonial-text {
position: relative;
color: #333;
font-size: 20px;
font-style: italic;
font-weight: 500;
z-index: 1;
span {
font-weight: 600;
}
}
.testimonial-author {
position: relative;
display: flex;
align-items: center;
gap: 14px;
z-index: 1;
.author-name {
color: #101828;
font-size: 18px;
font-weight: 500;
}
.author-role {
color: #667085;
font-size: 16px;
font-weight: 400;
}
}
}
}
/* Extra section 41 end */
/* Extra section 42 start */
.extra-section-42 {
.card-1 {
border-radius: 15px;
background: #ccd8ff;
padding: 25px;
height: 100%;
.head-para {
color: #000;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
ul {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 15px;
li {
&::marker {
color: #5043da;
}
h3 {
color: #000;
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
p {
color: #000;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
.card-2 {
border-radius: 15px;
background: #5043da;
padding: 25px;
height: 100%;
.head-para {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
ul {
padding-left: 0;
display: flex;
flex-direction: column;
gap: 15px;
list-style: none;
li {
padding-left: 20px;
border-left: 3px solid #c9d5ff;
h3 {
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
}
/* Extra section 42 end */
/* Extra section 43 start */
.extra-section-43 {
.left-top-para {
color: #000;
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
.left-lists {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
border-radius: 10px;
border: 1px solid #a0a3bd;
background: #f6f2fb;
display: flex;
gap: 10px;
padding: 15px;
.count {
color: #5043da;
font-size: 36px;
font-weight: 700;
line-height: 1;
margin: 0;
}
h3 {
color: #333;
font-size: 18px;
font-weight: 600;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.left-bottom-para {
color: #5043da;
font-size: 20px;
font-style: italic;
font-weight: 500;
margin: 0;
padding-left: 25px;
border-left: 5px solid #a289ff;
span {
font-weight: 600;
}
}
.large-img-div {
height: 100%;
width: 100%;
overflow: hidden;
img {
height: 100%;
width: auto;
object-fit: cover;
border-radius: 35px;
}
}
}
/* Extra section 43 end */
/* Extra section 44 start */
.extra-section-44 {
.each-card {
border-radius: 30px;
border: 1.5px solid var(--gray-200, #e4e4e7);
background: var(--base-white, #fff);
padding: 25px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.top-part {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
.icon-div {
border-radius: 10px;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
}
label {
color: #ededed;
text-align: right;
font-size: 52px;
font-weight: 700;
}
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-block: 20px 15px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
padding-left: 30px;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
}
}
.highlited-para {
border-radius: 15px;
padding: 20px;
color: #000;
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
}
&.voilet {
border: 1px dashed #e6e3ff;
background: #e6e3ff;
}
&.blue {
border: 1px dashed #ccd8ff;
background: #ccd8ff;
}
}
}
.each-card-2 {
border-radius: 20px;
border: 1.5px solid #e4e4e7;
background: #f8fafc;
padding: 25px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.bottom-highlighted-para {
border-radius: 15px;
background: #5043da;
color: #ccd8ff;
text-align: center;
font-size: 18px;
font-weight: 600;
padding: 30px 20px;
}
.swiper-nav-bottom {
position: relative;
width: fit-content;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 25px;
z-index: 10;
margin-top: 25px;
padding-block: 15px;
@media (max-width: 991px) {
margin-inline: auto !important;
}
}
.swiper-button-prev,
.swiper-button-next {
position: relative !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 8px;
background: #ffffff;
color: #3a3a3a !important;
border-radius: 10px;
border: 1px solid #e4e7ff;
background: #e4e6f4;
box-shadow: none;
transition: all 0.25s ease;
opacity: 1;
visibility: visible;
svg {
display: none;
}
&:hover {
background: #caccff !important;
border-color: #caccff !important;
color: #ffffff !important;
box-shadow: none;
}
&.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
}
& .swiper-button-prev::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
& .swiper-button-next::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
& .swiper-button-prev:hover {
&::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
}
& .swiper-button-next:hover {
&::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
}
}
/* Extra section 44 end */
/* Extra section 45 start */
.extra-section-45 {
.each-card {
border-radius: 20px;
border: 1px solid #c0bde6;
background: #fff;
padding: 35px 30px;
@media (max-width: 767px) {
padding: 30px 15px;
}
.top {
display: flex;
gap: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e2e2e2;
h3 {
color: #222;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
p {
color: #858496;
font-size: 16px;
font-weight: 600;
margin: 0;
}
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
padding-left: 30px;
color: var(--text-secondary);
font-size: 14px;
font-weight: 400;
span {
font-weight: 600;
}
&.tick::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
&.like::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
}
}
}
.bottom-div {
border-radius: 20px;
background: #e6e7ff;
padding: 35px 25px;
.each-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
h4 {
color: #212844;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-block: 10px 0;
}
p {
color: #333;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Extra section 45 start */
/* Extra section 46 start */
.extra-section-46 {
background: linear-gradient(151deg, #0c1f55 4.58%, #0c215a 29.93%, #7c3bed 106%);
.extra-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
}
&::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 767px) {
&.left-in-tab {
align-items: start !important;
text-align: left !important;
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-tab::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.extra-head-top {
color: #7c7cff;
text-align: center;
font-size: 24px;
font-weight: 500;
margin-block: 30px;
}
.extra-section-card {
border-radius: 30.636px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
padding: 25px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div div {
width: 75px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Extra section 46 end */
/* Extra section 47 start */
.extra-section-47 {
.social-proof-div {
border-radius: 30px;
overflow: hidden;
.each-card {
padding: 25px;
height: 100%;
label {
display: block;
color: #7300ff;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 8px;
}
h3 {
color: #000;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
ul {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
li {
color: #000;
font-size: 16px;
font-weight: 400;
&::marker {
color: #5043da;
}
}
}
&.card-1 {
background: #eff6ff;
li {
&::marker {
font-size: 20px;
}
}
}
&.card-2 {
background: #eeecff;
ul {
padding: 0;
li {
position: relative;
list-style: none;
padding-left: 25px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
}
}
}
.logo-row {
.logo-card {
background: #ffffff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
min-height: 60px;
img {
max-height: 88px;
max-width: 100%;
object-fit: contain;
}
}
}
.testimonial-card {
position: relative;
border-radius: 25px;
background: #fff;
box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.03);
padding: 25px;
max-width: 725px;
width: 100%;
margin-inline: auto;
&::before {
content: url("../images/icons/quote.svg");
position: absolute;
right: 20px;
top: 20px;
}
.testimonial-text {
position: relative;
color: #333;
font-size: 20px;
font-style: italic;
font-weight: 500;
z-index: 1;
span {
font-weight: 600;
}
}
.testimonial-author {
position: relative;
display: flex;
align-items: center;
gap: 14px;
z-index: 1;
.author-name {
color: #101828;
font-size: 18px;
font-weight: 500;
}
.author-role {
color: #667085;
font-size: 16px;
font-weight: 400;
}
}
}
}
/* Extra section 47 end */
/* Extra section 48 end */
.extra-section-48 {
.top-extra-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 500;
margin-bottom: 15px;
}
.section-title {
background: linear-gradient(90deg, #6c47e5 13.96%, #4889ff 87.17%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 36px;
font-style: normal;
font-weight: 700;
margin-bottom: 50px;
width: fit-content;
}
.seperator {
border-top: 1px solid #e4e1ff;
}
.card-blue {
border-radius: 15px;
background: #eff7ff;
padding: 30px 30px;
color: #333;
text-align: center;
font-size: 16px;
font-weight: 500;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media (max-width: 767px) {
padding: 30px 15px;
}
}
.extra-section-card {
border-radius: 30.636px;
border: 1.5px solid #e4e4e7;
background: #fff;
padding: 35px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.quote-para {
color: #333;
font-size: 16px;
font-style: italic;
font-weight: 400;
margin: 0;
}
.bottom-part {
padding-top: 20px;
border-top: 1px solid #e2e2e2;
.para-1 {
color: #101828;
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}
.para-2 {
color: #667085;
font-size: 18px;
font-weight: 400;
margin-bottom: 0;
}
}
&.light-blue-bg {
background: #e4eaff;
height: fit-content;
.quote-para {
color: #0d2659;
font-size: 18px;
}
.bottom-part {
padding-top: 5px;
border-top: 1px solid transparent;
.para-1 {
color: #000264;
font-size: 20px;
}
.para-2 {
color: #5b5b5b;
font-size: 16px;
}
}
}
}
.partner-para {
color: #858496;
font-size: 20px;
font-weight: 600;
margin-block: 35px 25px;
text-align: center;
}
.logo-row {
.logo-card {
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
min-height: 60px;
img {
max-height: 88px;
max-width: 100%;
object-fit: contain;
}
}
}
}
/* Extra section 48 end */
/* Extra section 49 start */
.extra-section-49 {
.left-top-para {
color: #000;
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
.left-lists {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
border-radius: 10px;
border-left: 3px solid #9899ff;
background: #fff;
display: flex;
gap: 10px;
padding: 15px;
h3 {
color: #333;
font-size: 18px;
font-weight: 600;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
.heighlighted-area {
border-radius: 5px;
background: #7300ff;
padding: 10px;
color: #fff;
font-size: 16px;
font-weight: 400;
text-align: center;
}
}
&.full-border {
li {
border: 1px solid #a0a3bd;
}
}
}
.left-bottom-para {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 500;
margin: 0;
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #e4e1ff;
padding: 20px 15px;
}
.bottom-highlited-para {
color: #5043da;
font-size: 20px;
font-style: italic;
font-weight: 500;
margin: 0;
padding: 10px 15px 10px 25px;
border-left: 5px solid #a289ff;
span {
font-weight: 600;
}
}
.large-img-div {
height: 100%;
width: 100%;
border-radius: 35px;
overflow: hidden;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
/* Extra section 49 end */
/* Extra section 50 start */
.extra-section-50 {
.right-para {
color: #000;
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
.large-img-div {
height: 100%;
width: 100%;
border-radius: 35px;
overflow: hidden;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
.right-lists {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
border-radius: 10px;
border: 1px solid #a0a3bd;
background: #fff;
display: flex;
gap: 10px;
padding: 15px;
.icon-div {
border-radius: 8px;
background: rgba(239, 67, 67, 0.1);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
flex: none;
}
h3 {
color: #333;
font-size: 18px;
font-weight: 600;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.bottom-highlight-para {
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #e4e1ff;
padding: 20px 15px;
color: #000;
text-align: center;
font-size: 20px;
font-weight: 500;
margin: 0;
span {
font-weight: 600;
}
}
.bottom-highlited-para {
color: var(--text-secondary);
font-size: 20px;
font-style: italic;
font-weight: 500;
margin: 0;
padding: 10px 15px 10px 25px;
border-left: 5px solid #f47216;
background-color: #fef2f2;
span {
font-weight: 600;
}
}
}
/* Extra section 50 end */
/* Extra section 51 start */
.extra-section-51 {
.comparison-table-wrap {
border-radius: 10px;
background: #fff;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.comparison-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
overflow-x: auto;
thead th {
padding: 18px 24px;
font-weight: 600;
font-size: 18px;
border-bottom: none;
min-width: 320px;
width: 50%;
}
.left-head {
background: #fdecec;
}
.right-head {
background: #e6e7ff;
}
.head-wrap {
display: flex;
align-items: center;
gap: 10px;
}
tbody td {
padding: 14px 24px;
font-size: 16px;
vertical-align: top;
border-bottom: 1px solid #ebebeb;
}
.left-cell {
border-right: 1px solid #ebebeb;
div {
display: flex;
align-items: center;
gap: 10px;
}
}
.right-cell div {
display: flex;
align-items: center;
gap: 10px;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #f1f5f9;
color: #514d68;
font-size: 14px;
font-weight: 600;
flex: none;
&.active {
background: #5043da;
color: #fff;
}
}
.icon {
width: 30px;
height: 30px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 16px;
line-height: 1;
flex: none;
&.danger {
border: 2px solid #ff5757;
color: #ff5757;
}
&.success {
border: 2px solid #5043da;
color: #5043da;
}
}
.result-row td {
color: #202020;
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-size: 18px;
font-weight: 600;
}
.red {
color: #ff5757;
}
.blue {
color: #5043da;
}
&.left-result {
border-right: 1px solid #ebebeb;
}
}
}
.bottom-highlighted-part {
border-radius: 15px;
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
max-width: 825px;
margin-inline: auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
.para-1 {
color: #ccd8ff;
text-align: center;
font-size: 18px;
font-weight: 600;
margin: 0;
}
.para-2 {
color: #9899ff;
text-align: center;
font-size: 18px;
font-weight: 600;
margin: 0;
}
}
}
/* Extra section 51 end */
/* Extra section 52 end */
.extra-section-52 {
.left-part {
border-radius: 15px;
background: #e6e7ff;
padding: 25px 20px;
height: 100%;
.head {
color: #000;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
color: #000;
font-size: 16px;
font-weight: 400;
padding-left: 35px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 2px;
}
}
}
}
.right-part {
border-radius: 15px;
background: #5043da;
padding: 25px 20px;
height: 100%;
.head {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
display: flex;
gap: 15px;
h4 {
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
.highlighted-para {
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #e4e1ff;
padding: 20px;
color: #5043da;
text-align: center;
font-size: 20px;
font-weight: 500;
}
}
/* Extra section 52 end */
/* How we work table start */
.how-we-work-table-section {
.phase-table-wrapper {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
overflow-x: auto;
.phase-table {
width: 100%;
margin-bottom: 0;
thead {
th {
background: #5446d3;
color: #fff;
padding: 16px;
font-size: 16px;
font-weight: 500;
white-space: nowrap;
}
}
tbody {
.phase {
display: flex;
align-items: center;
gap: 10px;
.icon-div {
flex: none;
}
p {
color: #232323;
font-size: 14px;
font-weight: 600;
margin: 0;
}
}
tr {
border-bottom: 1px solid #e4e4e7;
td {
padding: 16px;
font-size: 14px;
vertical-align: middle;
border: none;
&.outcome {
p {
position: relative;
color: #232323;
font-size: 14px;
font-weight: 600;
padding-left: 20px;
margin: 0;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 3px;
}
}
}
}
&:nth-child(even) {
td {
background-color: #f1f2f9;
}
}
}
}
}
}
/* =========================
Responsive (Mobile Card)
========================= */
@media (max-width: 768px) {
.phase-table-wrapper {
background: none;
box-shadow: none;
.phase-table,
tbody,
tr,
td {
display: block;
width: 100%;
}
thead {
display: none;
}
tbody {
tr {
background: #fff;
margin-bottom: 16px;
padding-block: 10px !important;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border-radius: 20px;
overflow: hidden;
&:nth-child(even) {
td {
background-color: #fff !important;
}
}
}
td {
padding: 8px 25px !important;
border: none;
&::before {
content: attr(data-label);
display: block;
font-size: 12px;
font-weight: 600;
color: #6b7280;
margin-bottom: 4px;
text-transform: uppercase;
}
}
}
}
}
}
/* How we work table end */
/* Extra section 53 end */
.extra-section-53 {
.extra-section-card {
border-radius: 30px;
border: 1.5px dashed #e4e4e7;
padding: 25px 30px;
display: flex;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #fff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #6d45e4;
flex: none;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
label {
border-radius: 10px;
background: #e6e7ff;
width: fit-content;
color: #5043da;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
padding: 5px 10px;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(80, 67, 218, 0.12);
.img-div div {
background-color: rgba(80, 67, 218, 0.06);
border-radius: 50%;
}
.content-div h3 {
color: #5043da;
}
}
@media (prefers-reduced-motion: reduce) {
.extra-section-card {
transition: none;
&:hover {
transform: none;
box-shadow:
inset 0 0 0 0.5px rgba(209, 213, 219, 0.9),
0 6px 16px rgba(22, 18, 58, 0.04);
}
}
}
&.card-1 {
background-color: #eff6ff;
}
&.card-2 {
background-color: #eeecff;
}
&.card-3 {
background-color: #f1f2f9;
}
}
}
/* Extra section 53 end */
/* Extra section 54 end */
.extra-section-54 {
.pain-tag {
background: #eef1ff;
color: #4b5cff;
font-weight: 600;
letter-spacing: 1px;
padding: 6px 14px;
border-radius: 20px;
}
.section-title {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 10px;
span {
color: #4b5cff;
}
}
.section-subtitle {
color: #6b7280;
max-width: 640px;
margin: 0 auto;
}
.para-1 {
color: var(--text-secondary);
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
}
.para-2 {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
.info-card {
border-radius: 16px;
padding: 30px 25px;
height: 100%;
border-radius: 20px;
border: 1.532px solid var(--gray-200, #e4e4e7);
background: #eff6ff;
@media (max-width: 767px) {
padding: 30px 15px;
}
&.purple {
background: #eeecff;
}
.top-div {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
.icon {
width: 50px;
height: 50px;
border-radius: 8px;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
display: flex;
justify-content: center;
align-items: center;
flex: none;
}
h4 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin-bottom: 0;
}
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
}
}
.conflict-box {
border-radius: 20px;
border: 1.532px solid #e4e4e7;
background: #f1f2f9;
padding: 25px 30px;
@media (max-width: 767px) {
padding: 25px 20px;
}
h5 {
font-weight: 600;
margin-bottom: 25px;
}
.each-card {
display: flex;
gap: 10px;
color: #000;
font-size: 16px;
font-weight: 400;
img {
position: relative;
top: 1px;
}
}
}
.section-subheading {
color: #212844;
text-align: center;
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
}
.reason-card {
border-radius: 30px;
border: 1.5px dashed #e4e4e7;
padding: 25px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #fff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
background: rgba(239, 67, 67, 0.1);
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(80, 67, 218, 0.12);
.img-div {
background-color: rgba(80, 67, 218, 0.06);
}
.content-div h3 {
color: #5043da;
}
}
@media (prefers-reduced-motion: reduce) {
.extra-section-card {
transition: none;
&:hover {
transform: none;
box-shadow:
inset 0 0 0 0.5px rgba(209, 213, 219, 0.9),
0 6px 16px rgba(22, 18, 58, 0.04);
}
}
}
}
}
/* Extra section 54 end */
/* Extra section 55 start */
.extra-section-55 {
.content-head-para {
color: #333;
font-size: 18px;
font-weight: 500;
}
.content-para {
color: #333;
font-size: 18px;
font-weight: 400;
margin-bottom: 0;
span {
font-weight: 600;
}
}
.each-card {
border-radius: 20px;
border: 1px solid #7065cc;
background: #fff;
padding: 25px 20px;
height: 100%;
h3 {
color: #212844;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: #333;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
/* Extra section 55 end */
/* Extra section 56 start */
.extra-section-56 {
.left-part {
background: #eff6ff;
padding: 30px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
h3 {
display: flex;
align-items: center;
gap: 10px;
color: #212844;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
ul {
padding-left: 20px;
margin: 0;
display: flex;
flex-direction: column;
gap: 20px;
li {
display: list-item;
&::marker {
color: #5043da;
font-size: 20px;
}
h4 {
color: #333;
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
.div-wrapper {
border-radius: 20px;
overflow: hidden;
}
.right-part {
background: #eeecff;
padding: 30px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
h3 {
display: flex;
align-items: center;
gap: 10px;
color: #212844;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.each-content-card {
border-radius: 15px;
border: 1px solid #c0bde6;
padding: 30px 15px;
color: #333;
text-align: center;
font-size: 16px;
font-weight: 600;
span {
font-weight: 400;
}
}
.bottom-para {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 500;
margin-block: 25px 0;
}
}
}
/* Extra section 56 end */
/* Extra section 57 start */
.extra-section-57 {
.each-card {
border: 1.5px solid #e4e4e7;
border-radius: 20px;
padding: 35px 3%;
display: flex;
gap: 25px;
.img-div {
border-radius: 10px;
background: #6d45e4;
width: 75px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
flex: none;
}
&.card-1 {
background: #eff6ff;
}
&.card-2 {
background: #eeecff;
}
&.card-3 {
background: #f1f2f9;
}
&.card-4 {
background: #fff;
}
&.card-5 {
background: #eeecff;
}
.content-div {
.head {
color: #212844;
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
}
.sub-head {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
}
.list-head {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
position: relative;
gap: 10px;
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
padding-left: 30px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 1px;
}
}
}
.bottom-para {
color: #333;
font-size: 16px;
font-style: italic;
font-weight: 500;
margin-block: 20px 0;
}
}
}
.highlighted-img-div {
position: relative;
width: 100%;
height: 215px;
border-radius: 20px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
p {
position: absolute;
right: 45px;
bottom: 25px;
color: #fff;
font-size: 20px;
font-weight: 500;
margin: 0;
padding-left: 15px;
@media (max-width: 576px) {
right: 15px;
bottom: 15px;
}
}
}
}
/* Extra section 57 end */
/* FAQ start */
.new-faq-section {
.faq-accordion {
max-width: 940px;
margin: 0 auto;
.accordion-item {
background: #ffffff;
border: 1px solid #e3e7ff;
border-radius: 16px;
margin-bottom: 14px;
overflow: hidden;
}
.accordion-header {
border-radius: 16px;
}
.accordion-button {
font-size: 18px;
font-weight: 600;
color: #212844;
background: #ffffff;
padding: 15px 20px;
border-radius: 16px;
box-shadow: none;
gap: 10px;
&::after {
content: url('data:image/svg+xml,');
border-radius: 50px;
background: #e6e7ff;
box-shadow:
0 -1px 1px 0 rgba(0, 0, 0, 0.12) inset,
0 1px 1.5px 0 rgba(255, 255, 255, 0.25) inset,
0 2px 6px 0 rgba(74, 58, 255, 0.1);
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
}
&:focus {
box-shadow: none;
}
}
.accordion-body {
font-size: 16px;
color: #333;
padding: 0 22px 20px;
p {
margin-bottom: 10px;
}
ul {
padding-left: 18px;
margin: 0;
li {
margin-bottom: 6px;
}
}
}
}
}
/* FAQ end */
/* Extra section 58 start */
.extra-section-58 {
.bleeding-neck-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 500;
}
.extra-section-card {
border-radius: 30px;
border: 1.5px dashed #e4e4e7;
padding: 25px 30px;
display: flex;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #fff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
.head {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
.para {
color: var(--text-secondary);
font-size: 16px;
font-weight: 600;
margin: 0;
}
.list {
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 20px;
margin: 0;
li {
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 145%;
&::marker {
fill: #514d68;
font-size: 20px;
}
}
}
.bottom-para {
color: #3e5b90;
font-size: 16px;
font-style: italic;
font-weight: 500;
margin-block: 10px 0;
padding-top: 10px;
border-top: 1px solid #c9d5ff;
span {
color: #ff5757;
}
}
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(80, 67, 218, 0.12);
.img-div div {
background-color: rgba(80, 67, 218, 0.06);
border-radius: 50%;
}
.content-div h3 {
color: #5043da;
}
}
@media (prefers-reduced-motion: reduce) {
.extra-section-card {
transition: none;
&:hover {
transform: none;
box-shadow:
inset 0 0 0 0.5px rgba(209, 213, 219, 0.9),
0 6px 16px rgba(22, 18, 58, 0.04);
}
}
}
}
.bottom-blue-div {
border-radius: 15px;
background: #5043da;
padding: 30px 5%;
.para-1 {
color: #ccd8ff;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
.para-2 {
color: #fff;
font-size: 18px;
font-style: italic;
font-weight: 600;
margin: 0;
}
}
}
/* Extra section 58 end */
/* Extra section 59 start */
.extra-section-59 {
.each-card {
border: 1.5px solid #e4e4e7;
border-radius: 20px;
padding: 35px 3%;
display: flex;
gap: 25px;
.img-div {
width: 75px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
flex: none;
}
&.card-1 {
background: #eff6ff;
.content-div {
.highlighted-bottom-div {
background-color: #ccd8ff;
.para-1 {
span {
color: #5043da;
}
}
}
}
}
&.card-2 {
background: #eeecff;
.content-div {
.highlighted-bottom-div {
background-color: #e6e3ff;
.para-1 {
span {
color: #7300ff;
}
}
}
}
}
&.card-3 {
background: #f1f2f9;
.content-div {
.highlighted-bottom-div {
background-color: #e4e6f4;
.para-1 {
span {
color: #514d68;
}
}
}
}
}
.content-div {
.head {
color: #212844;
font-size: 24px;
font-weight: 600;
margin-bottom: 10px;
}
.sub-head {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
}
.list-head {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
position: relative;
gap: 10px;
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
padding-left: 30px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 1px;
}
}
}
.highlighted-bottom-div {
border-radius: 15px;
border: 1px dashed #ccd8ff;
padding: 20px;
width: 100%;
.para-1 {
color: #000;
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
.para-2 {
color: #000;
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
}
}
}
}
}
/* Extra section 59 start */
/* Extra section 60 start */
.extra-section-60 {
.process-list {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
li {
position: relative;
display: flex;
gap: 30px;
padding-bottom: 10px;
@media (max-width: 576px) {
gap: 10px;
}
.img-div {
position: relative;
border-radius: 10px;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
flex: none;
z-index: 1;
@media (max-width: 576px) {
width: 36px;
height: 36px;
img {
width: 24px;
height: 24px;
}
}
}
.content-div {
border-radius: 10px;
border: 1.532px solid #e4e4e7;
background: #fff;
padding: 30px;
width: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.head {
color: #5043da;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
&:not(:last-child):before {
content: "";
position: absolute;
top: 0;
left: 30px;
width: 1px;
height: 100%;
background-color: #5043da;
@media (max-width: 576px) {
left: 18px;
}
}
}
}
}
/* Extra section 60 start */
/* Extra section 61 start */
.extra-section-61 {
.each-card {
border-radius: 20px;
border: 1px solid #c0bde6;
background: #fff;
padding: 30px 25px;
height: 100%;
.head-div {
border-bottom: 1px solid #e2e2e2;
padding-bottom: 10px;
margin-bottom: 15px;
label {
color: #858496;
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
h3 {
color: #222;
font-size: 20px;
font-weight: 600;
margin: 0;
}
}
.case-list {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
padding-left: 20px;
.para-1 {
font-size: 16px;
font-weight: 500;
margin-bottom: 5px;
}
.para-2 {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 0;
}
&.red {
border-left: 3px solid #ff5757;
.para-1 {
color: #ff5757;
}
}
&.blue {
border-left: 3px solid #3e5b90;
.para-1 {
color: #3e5b90;
}
}
&.voilet {
border-left: 3px solid #5043da;
.para-1 {
color: #5043da;
}
}
}
}
}
.seperator {
border-top: 2px solid #e4e1ff;
}
.extra-section-card {
border-radius: 30.636px;
border: 1.5px solid #5043da;
background: #5043da;
padding: 35px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.quote-para {
color: #fff;
font-size: 16px;
font-style: italic;
font-weight: 400;
margin: 0;
}
.bottom-part {
padding-top: 20px;
border-top: 1px solid #9899ff;
.para-1 {
color: #fff;
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}
.para-2 {
color: #caccff;
font-size: 18px;
font-weight: 400;
margin-bottom: 0;
}
}
}
.logo-row {
.logo-card {
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
min-height: 60px;
img {
max-height: 88px;
max-width: 100%;
object-fit: contain;
}
}
}
}
/* Extra section 61 start */
/* Extra section 62 start */
.extra-section-62 {
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
.extra-head-top {
color: #fff;
font-size: 24px;
font-weight: 500;
margin-block: 30px;
}
.extra-section-card {
border-radius: 30.636px;
border: 1px solid #fff;
background: #fff;
backdrop-filter: blur(6px);
padding: 25px 30px;
display: flex;
flex-direction: column;
gap: 25px;
height: 100%;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
color: #ededed;
font-size: 32px;
font-weight: 700;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.bottom-highlighted-para {
border-radius: 15px;
background: #5043da;
padding: 20px 5%;
color: #ccd8ff;
text-align: center;
font-size: 20px;
font-weight: 600;
margin: 0;
}
}
/* Extra section 62 end */
/* Extra section 63 start */
.extra-section-63 {
.left-part {
padding: 30px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
@media (max-width: 767px) {
padding: 25px 15px;
}
&.lft-card-1 {
background: #eff6ff;
}
&.lft-card-2 {
background: #eeecff;
}
&.lft-card-3 {
background: #f1f2f9;
}
&.lft-card-4 {
background: #f2f2f2;
}
.content-div {
.label {
color: #5043da;
font-size: 18px;
font-weight: 700;
margin-block: 0 10px;
}
.head {
color: #212844;
font-size: 24px;
font-weight: 600;
gap: 15px;
margin-bottom: 10px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.div-wrapper {
border-radius: 20px;
overflow: hidden;
border: 1px solid #e4e4e7;
}
.right-part {
background: #fff;
padding: 30px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
ul {
padding-left: 20px;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
li {
color: #333;
font-size: 16px;
font-weight: 400;
span {
font-weight: 600;
}
&::marker {
color: #5043da;
font-size: 20px;
}
}
}
.bottom-para {
color: #514d68;
font-size: 16px;
font-style: italic;
font-weight: 400;
margin: 0;
padding-top: 20px;
border-top: 1px solid #ccd8ff;
margin-block: 25px 0;
span {
color: #514d68;
font-size: 16px;
font-style: italic;
font-weight: 600;
}
}
}
}
/* Extra section 63 end */
/* Extra section 64 start */
.extra-section-64 {
.each-card {
border-radius: 30px;
border: 1.5px solid var(--gray-200, #e4e4e7);
background: var(--base-white, #fff);
padding: 25px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.top-part {
display: flex;
justify-content: space-between;
gap: 15px;
label {
color: #ededed;
text-align: right;
font-size: 52px;
font-weight: 700;
}
.step-no {
color: #7300ff;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 15px;
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-block: 15px 5px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
}
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
padding-left: 30px;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 1px;
}
}
}
.bottom-para {
color: #333;
font-size: 16px;
font-weight: 400;
span {
font-weight: 600;
}
}
}
.blue-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 500;
margin-bottom: 30px;
}
.voilet-btn {
border-radius: 5px;
background: #7300ff;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 600;
padding: 10px 15px;
}
}
/* Extra section 64 end */
/* Extra section 65 start */
.extra-section-65 {
.para-head {
color: #000;
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
}
.list {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 5px;
li {
color: #333;
font-size: 16px;
font-weight: 400;
&::marker {
color: #5043da;
font-size: 20px;
}
}
}
.seperator {
border: 2px solid #e6e3ff;
}
.icon-lists {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 20px;
li {
display: flex;
gap: 10px;
h3 {
color: #333;
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
.callout-box {
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #e4e1ff;
padding: 20px 5%;
color: #000;
font-size: 16px;
font-weight: 500;
span {
color: #5043da;
}
}
}
/* Extra section 65 end */
/* Extra section 66 start */
.extra-section-66 {
.edtech-card {
border-radius: 15px;
border: 1px solid #becbfd;
background: linear-gradient(180deg, #fafbff 0%, #f1f4ff 100%);
padding: 30px 20px;
height: 100%;
.card-title {
color: #5043da;
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
.card-subtitle {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
}
.challenge-text {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
span {
font-weight: 700;
}
}
.help-title {
color: #333;
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
}
.help-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
padding-left: 25px;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 0;
}
.help-item-title {
color: #333;
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
.help-item-para {
color: #333;
font-size: 14px;
font-weight: 400;
margin: 0;
}
}
}
}
}
/* Extra section 66 start */
/* Extra section 67 start */
.extra-section-67 {
.left-list {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 15px;
li {
&::marker {
color: #5043da;
font-size: 24px;
}
h3 {
color: #212844;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Extra section 67 start */
/* Extra section 68 start */
.extra-section-68 {
.each-card {
border-radius: 30px;
border: 1.5px solid var(--gray-200, #e4e4e7);
background: var(--base-white, #fff);
padding: 25px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.top-part {
display: flex;
align-items: center;
gap: 20px;
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.para {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 0;
}
.icon-div {
border-radius: 10px;
background: #dfdcff;
display: flex;
align-items: center;
justify-content: center;
width: 65px;
height: 65px;
flex: none;
}
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
padding-left: 30px;
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
span {
font-weight: 500;
}
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 4px;
}
}
}
}
.swiper-nav-bottom {
position: relative;
width: fit-content;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 25px;
z-index: 10;
margin-top: 25px;
padding-block: 15px;
@media (max-width: 991px) {
margin-inline: auto !important;
}
}
.swiper-button-prev,
.swiper-button-next {
position: relative !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 8px;
background: #ffffff;
color: #3a3a3a !important;
border-radius: 10px;
border: 1px solid #e4e7ff;
background: #e4e6f4;
box-shadow: none;
transition: all 0.25s ease;
opacity: 1;
visibility: visible;
svg {
display: none;
}
&:hover {
background: #caccff !important;
border-color: #caccff !important;
color: #ffffff !important;
box-shadow: none;
}
&.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
}
& .swiper-button-prev::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
& .swiper-button-next::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
& .swiper-button-prev:hover {
&::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
}
& .swiper-button-next:hover {
&::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
}
}
/* Extra section 68 end */
/* Edutech process start */
.edutech-process {
.edutech-process-content {
display: flex;
flex-direction: column;
gap: 25px;
.each-process {
display: flex;
flex-direction: column;
gap: 0px;
h3 {
color: #383972;
font-family: Poppins;
font-size: 20px;
font-weight: 700;
margin-block: 10px 2px;
}
p {
color: #333;
font-size: 14px;
font-weight: 400;
}
}
}
}
/* Edutech process end */
/* Edtech technologie start */
.edtech-technologies {
.platform-tabs-section {
.tabs-wrapper {
border-radius: 6px;
overflow: hidden;
}
/* LEFT MENU */
.tabs-menu {
height: 100%;
background: #020b4d;
padding: 0;
.nav-link {
border: none;
border-radius: 0;
border-left: 5px solid transparent;
background: transparent;
text-align: left;
padding: 16px 22px;
font-size: 16px;
letter-spacing: 0.5px;
color: #fff;
font-weight: 500;
text-transform: uppercase;
border-bottom: 1px solid #5c5d9e;
transition: all 0.25s ease;
&:hover {
background: #0f1b75;
color: #ffffff;
}
&.active {
color: #99f;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
border-left: 5px solid #9999ff;
}
}
}
/* RIGHT CONTENT */
.tabs-content {
height: 100%;
padding: 60px;
background: linear-gradient(104deg, #222a71 9.53%, #3d2169 91.1%);
color: #ffffff;
.each-header-part {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-direction: column;
margin-bottom: 60px;
@media (max-width: 576px) {
margin-bottom: 45px;
}
.label {
font-family: "PT Serif", serif;
background: #b4bdff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
font-weight: 500;
margin: 0;
text-align: center;
text-transform: uppercase;
}
.head {
color: #fff;
font-size: 36px;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-align: center;
.blue-text {
color: #5043da;
}
}
.para {
color: #fff;
font-size: 20px;
font-weight: 400;
margin: 0;
max-width: 991px;
line-height: 1.4;
text-align: center;
span {
font-weight: 500;
}
}
&:not(.no-line)::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
border-radius: 50px;
background: #9899ff;
opacity: 0.5;
}
@media screen and (min-width: 991px) {
&.left-in-desk {
align-items: start !important;
text-align: left !important;
.label {
text-align: left !important;
}
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-desk::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 767px) {
&.left-in-tab {
align-items: start !important;
text-align: left !important;
.label {
text-align: left !important;
}
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-tab::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
@media screen and (min-width: 0) {
&.left-in-mob {
align-items: start !important;
text-align: left !important;
.label {
text-align: left !important;
}
.head {
text-align: left !important;
}
.para {
margin-inline: unset;
text-align: left !important;
}
}
&.left-in-mob::before {
content: "";
left: 0 !important;
transform: unset !important;
}
}
}
.platform-pill {
display: flex;
align-items: center;
gap: 10px;
border-radius: 50px;
border: 1px solid #a5a6ff;
padding: 8px 25px 8px 8px;
white-space: nowrap;
span.small {
font-size: 10px;
display: block;
}
}
}
/* MOBILE */
@media (max-width: 991px) {
.tabs-menu {
flex-direction: row !important;
overflow-x: auto;
flex-wrap: nowrap;
/* Firefox */
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
/* Webkit (Chrome, Edge, Safari) */
&::-webkit-scrollbar {
height: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.35);
border-radius: 10px;
transition: background-color 0.3s ease;
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.6);
}
.nav-link {
white-space: nowrap;
border-bottom: none;
border-right: 1px solid rgba(255, 255, 255, 0.12);
width: fit-content;
}
}
.tabs-content {
padding: 40px 24px;
}
/* LEFT MENU */
.tabs-menu {
.nav-link {
background: #020b4d;
padding: 12px 20px;
font-size: 14px;
letter-spacing: 0.5px;
color: #fff;
font-weight: 500;
text-transform: uppercase;
border: none;
&:hover {
background: #0f1b75;
color: #ffffff;
}
&.active {
color: #000;
background: #99f;
font-size: 14px;
font-weight: 600;
border: none;
}
}
}
}
}
}
/* Edtech technologies end */
/* Mission vision start */
.mission-vision-section {
.each-card {
border-radius: 20px;
border: 1px solid #5043da;
background: #fff;
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.icon-div {
width: 60px;
height: 60px;
border-radius: 10px;
background: #5043da;
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.head {
color: #212844;
font-size: 28px;
font-weight: 600;
margin-bottom: 0;
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
padding-left: 15px;
border-left: 4px solid #5043da;
}
}
}
/* Mission vision start */
/* fjugsdhjfgsd */
.story-behind-section {
.top-blue-para {
color: #5043da;
text-align: center;
font-size: 18px;
font-weight: 400;
margin-bottom: 30px;
span {
font-weight: 600;
}
}
.card-1 {
border-radius: 20px;
border: 1.5px solid #e4e4e7;
background: #fff;
padding: 30px 20px;
height: 100%;
.top-div {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
.icon-div {
width: 50px;
height: 50px;
border-radius: 10px;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
h3 {
color: #212844;
font-size: 28px;
font-weight: 600;
margin: 0;
}
}
.para {
color: #333;
font-size: 16px;
font-weight: 400;
margin-bottom: 15px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
position: relative;
padding-left: 30px;
color: #333;
font-size: 16px;
font-weight: 400;
span {
font-weight: 500;
}
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 3px;
}
}
}
}
.card-2 {
border-radius: 20px;
border: 5px solid #5043da;
background: linear-gradient(90deg, #6d45e4 0%, #478bff 100%);
padding: 30px 20px;
height: 100%;
h3 {
color: #fff;
font-size: 28px;
font-weight: 600;
margin-bottom: 15px;
}
.para {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-bottom: 25px;
}
}
}
/* Edutech process end */
/* Story behind epixel start */
.about-what-we-do-section {
.extra-section-card {
border-radius: 30px;
border: 1.5px dashed #e4e4e7;
padding: 25px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #fff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.img-div div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(80, 67, 218, 0.12);
.img-div div {
background-color: rgba(80, 67, 218, 0.03);
border-radius: 50%;
}
.content-div h3 {
color: #5043da;
}
}
@media (prefers-reduced-motion: reduce) {
.extra-section-card {
transition: none;
&:hover {
transform: none;
box-shadow:
inset 0 0 0 0.5px rgba(209, 213, 219, 0.9),
0 6px 16px rgba(22, 18, 58, 0.04);
}
}
}
}
.promise-div {
border-radius: 15px;
background: #5043da;
padding: 20px;
.para-1 {
color: #fff;
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 5px;
}
.para-2 {
color: #ccd8ff;
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0;
}
}
}
/* Story behind epixel end */
/* How we help start */
.how-we-help-section {
.highlight-div {
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #e4e1ff;
padding: 20px;
.para-1 {
color: #5043da;
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
}
.para-2 {
color: #000;
font-size: 16px;
font-weight: 500;
margin: 0;
}
}
}
/* How we help end */
/* We help ngo Start */
.we-help-ngo-section {
.service-card-row {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: #fff;
}
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #fff;
}
.top-liner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
.bottom-liner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
.service-card-column {
border: 1px solid #f5ecff;
padding: 0;
&:hover {
background-color: #f8f8f8;
}
@media screen and (max-width: 767px) {
&:nth-child(even) {
background-color: #f8f8f8;
}
}
}
}
.service-card {
padding: 25px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 15px;
.service-card-img {
div {
border-radius: 100px;
border: 1px solid #7300ff;
background: #fff;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
}
.service-card-content {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
.head {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
.para {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
}
}
}
}
&:not(.bg-white) {
.service-card-column {
border-right: 1px solid #f2e6ff;
padding: 0;
}
}
}
/* We help ngo End */
/* How we help Start */
.how-help-profit-section {
.we-support-para {
color: #333;
font-size: 20px;
font-weight: 600;
}
.We-help-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
li {
border-radius: 8px;
border: 1px solid var(--Gray-200, #eaecf0);
background: var(--White, #fff);
padding: 20px 15px;
display: flex;
gap: 15px;
img {
flex: none;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
span {
color: #5043da;
font-weight: 600;
}
}
}
}
.highlighted-div {
border-radius: 20px;
background: #e6e7ff;
padding: 30px 50px;
@media (max-width: 767px) {
padding: 30px 20px;
}
.head {
color: #212844;
text-align: center;
font-size: 28px;
font-weight: 600;
margin-bottom: 35px;
}
.each-content {
display: flex;
align-items: center;
flex-direction: column;
gap: 15px;
p {
color: #333;
text-align: center;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
.bottom-div {
padding: 25px;
border-top: 2px solid #caccff;
margin-top: 35px;
.head-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 5px;
}
.para {
color: #333;
text-align: center;
font-size: 18px;
font-weight: 600;
margin: 0;
}
}
}
}
/* How we help End */
/* Our philosophy start */
.our-philosophy-section {
.philosophy-top-para {
color: #5043da;
text-align: center;
font-size: 24px;
font-weight: 500;
margin-bottom: 30px;
}
.social-proof-div {
border-radius: 30px;
overflow: hidden;
.each-card {
padding: 25px;
height: 100%;
label {
display: block;
color: #7300ff;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 8px;
}
h3 {
color: #000;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
p {
color: #000;
font-size: 16px;
font-weight: 400;
margin: 0;
}
ul {
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
li {
color: #000;
font-size: 16px;
font-weight: 400;
&::marker {
color: #5043da;
}
}
}
&.card-1 {
background: #eff6ff;
}
&.card-2 {
background: #eeecff;
}
&.card-3 {
background: #5043da;
h3 {
color: #fff;
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
.logo-row {
.logo-card {
background: #ffffff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
min-height: 60px;
img {
max-height: 88px;
max-width: 100%;
object-fit: contain;
}
}
}
.testimonial-card {
position: relative;
border-radius: 25px;
background: #fff;
box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.03);
padding: 25px;
max-width: 725px;
width: 100%;
margin-inline: auto;
&::before {
content: url("../images/icons/quote.svg");
position: absolute;
right: 20px;
top: 20px;
}
.testimonial-text {
position: relative;
color: #333;
font-size: 20px;
font-style: italic;
font-weight: 500;
z-index: 1;
span {
font-weight: 600;
}
}
.testimonial-author {
position: relative;
display: flex;
align-items: center;
gap: 14px;
z-index: 1;
.author-name {
color: #101828;
font-size: 18px;
font-weight: 500;
}
.author-role {
color: #667085;
font-size: 16px;
font-weight: 400;
}
}
}
}
/* Our philosophy end */
/* Extra section 49 start */
.about-our-approch-section {
.left-top-para {
color: #000;
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
.left-lists {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
li {
border-radius: 10px;
border-left: 3px solid #9899ff;
background: #fff;
display: flex;
gap: 10px;
padding: 15px;
h3 {
color: #5043da;
font-size: 20px;
font-weight: 600;
}
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
span {
font-weight: 600;
}
}
.heighlighted-area {
border-radius: 5px;
background: #7300ff;
padding: 10px;
color: #fff;
font-size: 16px;
font-weight: 400;
text-align: center;
}
}
&.full-border {
li {
border: 1px solid #a0a3bd;
}
}
}
.left-bottom-para {
color: #000;
text-align: center;
font-size: 16px;
font-weight: 500;
margin: 0;
border-radius: 15px;
border: 1px dashed #ccd8ff;
background: #e4e1ff;
padding: 20px 15px;
}
.bottom-highlited-para {
color: #5043da;
font-size: 20px;
font-style: italic;
font-weight: 500;
margin: 0;
padding: 10px 15px 10px 25px;
border-left: 5px solid #a289ff;
span {
font-weight: 600;
}
}
.large-img-div {
height: 100%;
width: 100%;
border-radius: 35px;
overflow: hidden;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
/* Extra section 49 end */
/* What we believe start */
.what-we-believe-section {
background: linear-gradient(151deg, #0c1f55 4.58%, #0c215a 29.93%, #7c3bed 106%);
.each-card {
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
padding: 25px;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
gap: 25px;
@media (max-width: 767px) {
padding: 25px 15px;
}
.content-div {
.head {
color: #fff;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-block: 20px 15px;
}
.para {
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 400;
margin-bottom: 15px;
}
}
}
.swiper-nav-bottom {
position: relative;
width: fit-content;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 25px;
z-index: 10;
margin-top: 25px;
padding-block: 15px;
@media (max-width: 991px) {
margin-inline: auto !important;
}
}
.swiper-button-prev,
.swiper-button-next {
position: relative !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 8px;
background: #ffffff;
color: #3a3a3a !important;
border-radius: 10px;
border: 1px solid #e4e7ff;
background: #e4e6f4;
box-shadow: none;
transition: all 0.25s ease;
opacity: 1;
visibility: visible;
svg {
display: none;
}
&:hover {
background: #caccff !important;
border-color: #caccff !important;
color: #ffffff !important;
box-shadow: none;
}
&.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
background: #caccff;
}
}
& .swiper-button-prev::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
& .swiper-button-next::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
& .swiper-button-prev:hover {
&::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
}
& .swiper-button-next:hover {
&::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 10px;
}
}
}
/* What we believe end */
/* Squeeze paper start */
.whitepaper-section {
.hero-stats {
display: flex;
align-items: center;
justify-content: center;
max-width: 800px;
margin-inline: auto;
padding: 15px 0;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin-top: 35px;
div {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border-right: 1px solid rgba(0, 0, 0, 0.2);
&:last-child {
border-right: none;
}
.para-1 {
color: #000;
text-align: center;
font-size: 14px;
font-weight: 400;
margin: 0;
}
.para-2 {
color: #333;
text-align: center;
font-size: 20px;
font-weight: 700;
margin: 0;
}
}
}
.title {
font-size: 28px;
font-weight: 600;
color: #7300ff;
margin-bottom: 10px;
}
.subtitle {
color: #333;
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.description {
color: #333;
font-size: 16px;
font-weight: 400;
padding-left: 20px;
border-left: 4px solid #5043da;
margin: 0;
}
.feature-list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 15px;
margin-block: 25px 20px;
li {
position: relative;
padding-left: 36px;
color: #000;
font-size: 16px;
font-weight: 400;
&::before {
content: url('data:image/svg+xml,');
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}
}
.footer-note {
color: #333;
font-size: 16px;
font-style: italic;
font-weight: 400;
margin: 0;
}
/* ===============================
Right Form Card
=============================== */
.form-card {
border-radius: 15px;
border: 1px solid #e6e7ff;
background: #fff;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
padding: 50px 25px;
height: 100%;
.form-title {
color: #4c4c4c;
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
}
.form-subtitle {
color: #696969;
text-align: center;
font-size: 16px;
font-weight: 400;
margin-bottom: 30px;
}
.form-label {
color: #8d8d8d;
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
}
.form-control,
.form-select {
border: none;
border-bottom: 1px solid #8d8d8d;
border-radius: 0;
padding: 8px 0;
font-size: 16px;
color: #222;
font-weight: 400;
background-color: transparent;
&:focus {
box-shadow: none;
border-bottom-color: #7300ff;
}
}
.form-select {
padding-right: 24px;
}
.btn-primary {
background-color: #7300ff;
border: none;
border-radius: 8px;
padding: 14px;
font-size: 15px;
font-weight: 600;
margin-top: 12px;
&:hover {
background-color: #5b00d6;
}
}
}
.phone-field {
.iti__country-list {
max-width: 320px;
white-space: wrap;
}
.iti {
width: 100%;
}
.iti__flag-container {
padding-left: 0;
background: none;
.iti__selected-flag {
padding-left: 0;
padding-right: 8px;
background: none;
}
&:hover .iti__selected-flag {
background: none;
}
}
.form-control {
border: none;
border-bottom: 1px solid #d1d5db;
border-radius: 0;
padding: 8px 0 8px 52px;
font-size: 14px;
background-color: transparent;
&:focus {
box-shadow: none;
border-bottom-color: #6f00ff;
}
}
.iti--separate-dial-code .iti__selected-dial-code {
font-size: 14px;
color: #111827;
display: none;
}
}
}
/* Squeeze paper end */
/* White paper start */
.whitepapers-hero {
background: linear-gradient(88deg, #edf3fd -3.52%, #d7dbff 38.34%, #c2cbfb 95.55%);
text-align: center;
h1 {
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
color: #212844;
text-align: center;
font-family: Ubuntu;
font-size: 44px;
font-weight: 700;
}
p {
max-width: 991px;
margin: 0 auto;
color: #212844;
text-align: center;
font-size: 20px;
font-weight: 400;
margin-bottom: 0;
}
}
.whitepaper-card {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s ease;
border-radius: 10px;
border: 1px solid #dfe6ef;
background: #fff;
padding: 20px 20px;
overflow: hidden;
&:hover {
transform: translateY(-4px);
}
&.card-1 {
background: linear-gradient(270deg, #e0edfe 0%, #fafcff 100%);
}
&.card-2 {
background: linear-gradient(270deg, #e5eaff 0%, #f3f2ff 100%);
}
&.card-3 {
background: linear-gradient(270deg, #d7fbfe 0%, #f1feff 100%);
}
.badge {
width: fit-content;
padding: 5px 12px;
border-radius: 4px;
color: #22303e;
font-size: 12px;
font-weight: 500;
margin-bottom: 15px;
}
&.card-1 .badge {
background: #cee3ff;
}
&.card-2 .badge {
background: #c1c5ff;
}
&.card-3 .badge {
background: #c1f9ff;
}
h3 {
color: #000;
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
}
p {
color: #000;
font-size: 16px;
font-weight: 400;
margin-bottom: 75px;
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
padding: 8px 20px;
.date {
display: flex;
align-items: center;
gap: 8px;
color: #696969;
text-align: center;
font-size: 12px;
font-weight: 400;
}
.download-btn {
font-size: 14px;
font-weight: 500;
color: #5043da;
text-decoration: none;
padding: 10px 16px;
border-radius: 6px;
background: #eceaff;
}
}
}
.load-more-btn {
background-color: #a0a3bd;
border: none;
padding: 13px 42px;
font-size: 16px;
font-weight: 600;
border-radius: 10px;
color: #ffffff;
cursor: pointer;
&:hover {
background-color: #9092b0;
}
}
/* White paper end */
/* Home stats start */
.home-stats-section {
.stats-wrapper {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-block: 20px;
}
.stats-item {
padding: 0px 20px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
&:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 0%;
height: 100%;
width: 1px;
background-color: rgba(0, 0, 0, 0.1);
}
h3 {
color: #5043da;
text-align: center;
font-size: 32px;
font-weight: 700;
margin: 0;
}
p {
color: #333;
text-align: center;
font-size: 18px;
font-weight: 500;
margin: 0;
}
}
.icon-box {
width: 75px;
height: 75px;
border-radius: 12px;
background: #e6e7ff;
display: flex;
align-items: center;
justify-content: center;
}
/* Mobile */
@media (max-width: 767px) {
.stats-wrapper {
border: none;
}
.stats-card {
&:not(:last-child)::after {
display: none;
}
}
}
}
/* Home stats end */
/* Home process start */
.home-process-section {
background: linear-gradient(151deg, #0c1f55 4.58%, #0c215a 29.93%, #7c3bed 106%);
overflow: hidden;
.process-header {
max-width: 760px;
margin: 0 auto 60px auto;
.process-tag {
font-size: 12px;
letter-spacing: 1.5px;
color: #c7c9ff;
display: block;
margin-bottom: 10px;
}
h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 14px;
}
p {
font-size: 15px;
color: #d6d9ff;
line-height: 1.6;
}
.divider {
width: 36px;
height: 2px;
background: #9aa2ff;
margin: 20px auto 0;
border-radius: 2px;
}
}
.process-card {
position: relative;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
padding: 25px 20px;
position: relative;
height: 100%;
h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
p {
color: #fff;
font-size: 16px;
font-weight: 400;
margin: 0;
}
.top-part {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 25px;
.step-number {
color: #516089;
font-size: 36px;
font-weight: 700;
margin: 0;
@media (max-width: 767px) {
color: #6476a6;
}
}
.icon {
width: 50px;
height: 50px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
img {
width: 32px;
height: 32px;
}
}
}
&.step-1::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 50%;
right: -52px;
transform: translateY(-50%);
}
&.step-2::after {
content: url('data:image/svg+xml,');
position: absolute;
left: 50%;
bottom: -58px;
transform: translateX(-50%);
}
&.step-3::after {
content: url('data:image/svg+xml,');
position: absolute;
top: 50%;
left: -50px;
transform: translateY(-50%);
}
@media (max-width: 767px) {
&.step-1::after {
content: url('data:image/svg+xml,');
position: absolute;
left: 50%;
right: unset;
top: unset;
bottom: -56px;
transform: translateX(-50%);
}
&.step-2::after {
content: url('data:image/svg+xml,');
position: absolute;
left: 50%;
bottom: -56px;
transform: translateX(-50%);
}
&.step-3::after {
content: url('data:image/svg+xml,');
position: absolute;
left: 50%;
right: unset;
top: unset;
bottom: -56px;
transform: translateX(-50%);
}
}
}
/* Button */
.process-btn {
display: inline-block;
margin-top: 50px;
padding: 14px 28px;
border-radius: 30.636px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
color: #ffffff;
text-decoration: none;
font-size: 16px;
font-weight: 600;
transition: all 0.25s ease;
&:hover {
background: rgba(255, 255, 255, 0.25);
color: #ffffff;
}
}
}
/* Home process end */
/* Home accelarator start */
.program-section {
.program-card {
border-radius: 20px;
background: #fff;
overflow: hidden;
height: 100%;
.top-part {
padding: 25px 20px;
display: flex;
flex-direction: column;
gap: 15px;
.program-tag {
font-family: "PT Serif", serif;
background: linear-gradient(90deg, #25009b 0%, #0901fe 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 14px;
font-weight: 400;
margin: 0;
text-transform: uppercase;
display: block;
}
.head {
color: #212844;
font-size: 20px;
font-weight: 600;
margin: 0;
}
}
&.card-1 .top-part {
background: #eceaff;
}
&.card-2 .top-part {
background: #e3e6ff;
}
&.card-3 .top-part {
background: #ece1ff;
}
.content-div {
padding: 25px 20px;
p {
color: #333;
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Home accelarator end */
/* Tech We Use Start */
.tech-we-use-section-home {
.tech-tabs {
display: flex;
align-items: center;
overflow-x: auto;
margin-inline: auto;
max-width: fit-content;
width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
&::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 991px) {
justify-content: center;
flex-wrap: wrap;
}
button {
position: relative;
color: #4a4363;
font-size: 18px;
font-weight: 500;
/* text-transform: uppercase; */
padding: 10px 18px;
border-bottom: 1px solid #e5e5e5;
transition: all 0.5s ease-in-out;
box-shadow: none;
outline: none;
white-space: nowrap;
background: transparent;
&.active,
&:hover {
color: #1013af;
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: transparent;
border-radius: 100px;
transition: all 0.5s ease-in-out;
}
&.active::before {
background: #1013af;
}
}
}
.all-tech-list {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
@media (max-width: 576px) {
gap: 15px;
}
li {
display: flex;
align-items: center;
gap: 8px;
border-radius: 100px;
border: 1px solid #eff6ff;
background: #eff6ff;
padding: 8px;
padding-right: 20px;
}
.icon-div {
width: 42px;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
border: 1px solid #7375ff;
background: #eeefff;
img {
width: 26px;
height: 26px;
}
@media (max-width: 576px) {
width: 32px;
height: 32px;
img {
width: 22px;
height: 22px;
}
}
}
.tech-name {
color: #212844;
font-size: 18px;
font-weight: 500;
margin: 0;
@media (max-width: 576px) {
font-size: 14px;
}
}
}
/* @media (min-width: 767px) and (max-width: 991px) {
.tech-middle-part {
display: flex;
gap: 25px;
.tech-tabs {
display: block;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 10px;
max-width: unset;
width: 300px;
max-height: calc(100vh - 90px);
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
& button {
width: 100%;
text-align: left;
border-bottom: none;
&.active {
background-color: #d7d7ff;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: transparent;
border-radius: 100px;
transition: all 0.5s ease-in-out;
}
&.active::before {
background: #1013af;
}
}
}
.tab-content {
flex: 1;
}
}
} */
}
/* Tech We Use End */
/* Industry We Serve Start */
.industry-we-serve-section-home {
a {
text-decoration: none;
}
.industry-card {
border-radius: 15px;
border: 1px solid #9899ff;
background: #fff;
padding: 25px 20px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
height: 100%;
.industry-card-content {
display: flex;
justify-content: center;
flex-direction: column;
gap: 5px;
.head {
color: #383972;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.para {
color: #383972;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin: 0;
}
}
}
}
/* Industry We Serve End */
/* Testimonial start */
.home-testimonial-section {
.each-testimonial-card {
border-radius: 30px;
border: 1.5px solid #e4e4e7;
background: #fff;
padding: 35px 30px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
height: 100%;
@media (max-width: 767px) {
padding: 25px 15px;
}
.Stars {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
font-size: 28px;
line-height: 1;
&::before {
content: "★★★★★";
letter-spacing: 3px;
background: #7300ff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.quote-para {
color: #333;
font-size: 16px;
font-style: italic;
font-weight: 400;
margin: 0;
}
.bottom-part {
padding-top: 20px;
border-top: 1px solid #e2e2e2;
.para-1 {
color: #101828;
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}
.para-2 {
color: #667085;
font-size: 18px;
font-weight: 400;
margin-bottom: 0;
}
}
&.light-blue-bg {
background: #e4eaff;
height: fit-content;
.quote-para {
color: #0d2659;
font-size: 18px;
}
.bottom-part {
padding-top: 5px;
border-top: 1px solid transparent;
.para-1 {
color: #000264;
font-size: 20px;
}
.para-2 {
color: #5b5b5b;
font-size: 16px;
}
}
}
}
.swiper-wrapper {
align-items: stretch !important;
.swiper-slide {
display: flex;
height: auto;
}
}
.testimonial-swipper-btn {
position: relative;
display: flex;
align-items: center;
gap: 15px;
.swiper-button-prev {
position: unset;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--bg-primary);
svg {
display: none;
}
@media screen and (max-width: 991px) {
width: 36px;
height: 36px;
}
@media screen and (max-width: 767px) {
width: 32px;
height: 32px;
}
&:hover {
background-color: #841fff24;
}
&:after {
position: relative;
content: url('data:image/svg+xml,');
font-size: unset;
top: 2px;
}
}
.swiper-button-next {
position: unset;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--bg-primary);
svg {
display: none;
}
@media screen and (max-width: 991px) {
width: 36px;
height: 36px;
}
@media screen and (max-width: 767px) {
width: 32px;
height: 32px;
}
&:hover {
background-color: #841fff24;
}
&:after {
position: relative;
content: url('data:image/svg+xml,');
font-size: unset;
top: 2px;
}
}
}
.swiper-pagination {
position: static;
margin-top: 35px;
.swiper-pagination-bullet {
position: relative;
width: 16px;
height: 16px;
background: transparent;
border: 1px solid #ededed;
opacity: 1;
overflow: hidden;
}
.swiper-pagination-bullet-active {
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #bbb;
}
}
}
@media (max-width: 991px) {
.testimonial-swipper-btn {
position: relative;
width: fit-content;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 25px;
z-index: 10;
margin-top: 25px;
padding-block: 15px;
&.ms-auto {
left: unset;
right: 0;
transform: unset;
}
}
}
}
/* Testimonial end */
/* Home about start */
.home-about-section {
.about-desc {
font-size: 18px;
color: #333;
font-weight: 400px;
margin-block: 15px;
span {
font-weight: 600;
}
}
/* Agency box */
.agency-box {
border-radius: 10px;
border: 1px solid #a6aedd;
background: #e6e7ff;
padding: 20px;
}
.agency-title {
color: #5043da;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
/* Quote box */
.quote-box {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
border-radius: 20px;
padding: 20px 5%;
border: 1px solid #a6aedd;
background: #fff;
box-shadow: 0 4px 4px 0 rgba(255, 255, 255, 0.25);
max-width: 90%;
width: 100%;
}
.quote-text {
color: #5043da;
font-size: 16px;
font-style: italic;
font-weight: 600;
margin-bottom: 6px;
}
.quote-author {
color: #667085;
font-size: 14px;
font-weight: 400;
display: block;
}
/* Mobile */
@media (max-width: 991px) {
.quote-box {
position: static;
max-width: 100%;
transform: unset;
}
}
}
/* Home about end */
/* Our core bvalue start */
.our-core-value-section {
.extra-section-card {
border-radius: 30px;
padding: 25px 30px;
display: flex;
align-items: center;
flex-direction: column;
gap: 25px;
height: 100%;
background-color: #eff7ff;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
@media (max-width: 767px) {
padding: 25px 15px;
}
.number-div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #5043da;
color: #fff;
font-size: 28px;
font-weight: 700;
}
.content-div {
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
h3 {
color: var(--text-dark);
font-size: 20px;
font-weight: 600;
margin: 0;
}
p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
margin: 0;
}
}
}
}
/* Our core value end */