/* Critical Rendering Path Optimization */
html.loading {
visibility: visible;
}
html:not(.loading) {
visibility: visible;
}
/* Prevent Layout Shifts */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
:root {
--primary-font: 'Onest', sans-serif;
--body-font: 'Onest', sans-serif;
--primary-color: #EE6149;
--text-color: #101828;
--bg-color: #ffffff;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--body-font);
color: var(--text-color);
background-color: var(--bg-color);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure images don't cause layout shifts */
img {
max-width: 100%;
height: auto;
display: block;
}
/* CSS Variables */
:root {
/* Primary Colors */
--primary-purple: #6938EF;
--primary-dark: #1D2939;
--primary-light: #F9FAFB;
/* Secondary Colors */
--secondary-pink: #FFF1F3;
--secondary-yellow: #FFF8E6;
--secondary-blue: #EEF4FF;
/* Text Colors */
--text-primary: #04142D;
--text-secondary: #576272;
--text-light: #667085;
--text-white: #FFFFFF;
/* Background Colors */
--bg-light: #F9FAFB;
--bg-white: #FFFFFF;
/* Border Colors */
--border-light: #EAECF0;
/* Font Families */
--font-onest: 'Onest', sans-serif;
/* Font Sizes */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 9999px;
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font-onest);
color: var(--text-primary);
line-height: 1.5;
background-color: var(--bg-white);
font-size: var(--text-base);
padding-top: 72px;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-onest);
font-weight: 700;
line-height: 1.2;
}
/* Utility Classes */
.container {
width: 100%;
max-width: 87%;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.text-gradient {
background: linear-gradient(90deg, var(--primary-purple) 0%, #9772FB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
input:focus {
outline: none;
box-shadow: none;
}
/* Common Button Style */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
z-index: 1;
transition: all 0.3s ease;
cursor: pointer;
}
/* Default Button Style (Previously Login Style) */
.btn-default {
color: var(--text-primary);
padding: 8px 24px;
border-radius: 100px;
font-weight: 500;
background: transparent;
border: 1px solid var(--text-primary);
}
.btn-default .btn-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 8px;
}
.btn-default::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 100px;
background: linear-gradient(90deg, #FF6B6B 0%, #FFB84C 100%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
background: linear-gradient(97.07deg, #F8765F 23.7%, #EBEB99 92.27%);
}
.btn-default:hover {
border-color: transparent;
}
.btn-default:hover::after {
opacity: 1;
}
/* Arrow icon styles */
.arrow-icon {
width: 10px;
height: 10px;
transition: transform 0.3s ease;
}
.arrow-icon path {
stroke: currentColor;
transition: stroke 0.3s ease;
}
/* Button hover effects */
.btn:hover .arrow-icon {
transform: translate(4px, -4px);
}
/* Explore Button - Always gradient */
.btn-explore {
background: linear-gradient(90deg, #FF6B6B 0%, #FFB84C 100%);
color: var(--text-white);
padding: 16px 32px;
border-radius: 100px;
font-weight: 600;
border: none;
}
.btn-explore:hover {
transform: translateY(-2px);
}
.btn-explore:hover .arrow-icon {
transform: translate(4px, -4px);
}
/* Button Sizes */
.btn-sm {
padding: 6px 16px;
font-size: 14px;
}
.btn-md {
padding: 12px 24px;
font-size: 16px;
}
.btn-lg {
padding: 16px 32px;
font-size: 18px;
}
/* Header Styles */
.site-header {
padding: 16px 0;
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid var(--border-light);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
backdrop-filter: blur(8px);
}
.main-nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.logo-wrapper {
flex: 0 0 auto;
}
.menu-wrapper {
flex: 0 1 auto;
display: flex;
justify-content: center;
align-items: center;
margin: 0 48px;
}
.button-wrapper {
flex: 0 0 auto;
}
.button-wrapper .btn-content {
font-size: 14px;
}
.logo {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.logo img {
height: 32px;
width: auto;
display: block;
}
.mobile-logo {
display: none;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav-links li {
position: relative;
}
.nav-links a {
color: var(--text-primary);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: color 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
padding: 8px 0;
}
.blankdiv {
padding-top: 72px;
}
/* Hover effects only for desktop */
@media (hover: hover) and (min-width: 1025px) {
.nav-links a:hover {
color: var(--text-secondary);
}
.dropdown-menu a:hover {
background-color: var(--bg-light);
}
.btn-default:hover {
border-color: transparent;
}
.btn-default:hover::after {
opacity: 1;
}
.btn:hover .arrow-icon {
transform: translate(4px, -4px);
}
.has-dropdown:hover .dropdown-arrow::after {
transform: translate(-50%, -25%) rotate(-135deg);
}
.has-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
@media (max-width: 1299px) {
.container {
max-width: 95%;
}
}
/* Remove hover effects for mobile */
@media (max-width: 1026px) {
.container {
max-width: 100%;
}
.nav-links a:hover,
.dropdown-menu a:hover {
background-color: transparent;
color: var(--text-primary);
}
.has-dropdown .dropdown-arrow::after {
transition: none;
}
.has-dropdown.active .dropdown-arrow::after {
transform: translate(-50%, -50%) rotate(-135deg);
}
.btn-default:hover {
color: var(--text-primary);
border-color: var(--text-primary);
}
.btn-default:hover::after {
opacity: 0;
}
.btn:hover .arrow-icon {
transform: none;
}
}
/* Dropdown Styles */
.dropdown-arrow {
width: 10px;
height: 10px;
display: inline-block;
position: relative;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-arrow::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translate(-75%, -50%) rotate(45deg);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.has-dropdown.active .dropdown-arrow::after {
transform: translate(-75%, -80%) rotate(-135deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: -16px;
background: var(--bg-white);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 8px 0;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.has-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu ul {
list-style: none;
}
.dropdown-menu a {
padding: 8px 16px;
display: block;
color: var(--text-secondary);
font-size: 14px;
}
.dropdown-menu a:hover {
background-color: var(--bg-light);
}
/* Burger Menu */
.burger-menu {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 1001;
width: 32px;
height: 32px;
position: relative;
}
.burger-menu span {
display: block;
width: 24px;
height: 1.5px;
background-color: var(--text-primary);
margin: 5px auto;
transition: all 0.3s ease;
border-radius: 1px;
}
.burger-menu span:nth-child(1) {
width: 16px;
margin-left: 0;
}
.burger-menu span:nth-child(2) {
width: 24px;
}
.burger-menu span:nth-child(3) {
width: 20px;
margin-left: 0;
height: 2px;
}
/* Burger Menu Animation */
.burger-menu.active span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
width: 24px;
}
.burger-menu.active span:nth-child(2) {
opacity: 0;
transform: translateX(-10px);
}
.burger-menu.active span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
width: 24px;
}
.mobile-button-wrapper {
display: none;
width: 100%;
margin-top: 24px;
}
.mobile-button-wrapper .btn-default {
color: white;
border-color: transparent;
background: linear-gradient(90deg, #FF6B6B 0%, #FFB84C 100%);
width: fit-content;
justify-content: center;
padding: 14px 24px;
}
.mobile-button-wrapper .arrow-icon {
transform: translate(4px, -4px);
}
/* .mobile-button-wrapper .arrow-icon path {
stroke: white;
} */
.mobile-button-wrapper .btn-default .btn-content {
width: 100%;
justify-content: space-between;
}
/* Mobile Navigation */
@media (max-width: 1024px) {
.burger-menu {
display: block;
position: relative;
z-index: 1001;
}
.mobile-button-wrapper .arrow-icon {
transform: none;
}
.menu-wrapper {
position: fixed;
top: 72px;
/* Height of header */
right: -100%;
width: 100%;
height: calc(100vh - 72px);
/* Subtract header height */
background-color: var(--bg-white);
flex-direction: column;
justify-content: flex-start;
padding: 24px;
transition: right 0.3s ease;
margin: 0;
z-index: 999;
overflow-y: auto;
}
.menu-wrapper.active {
right: 0;
}
.logo-wrapper {
position: relative;
z-index: 1001;
}
/* Mobile menu overlay */
.menu-wrapper::before {
content: '';
position: fixed;
top: 72px;
/* Height of header */
left: 0;
width: 100%;
height: calc(100vh - 72px);
/* Subtract header height */
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: -1;
}
.menu-wrapper.active::before {
opacity: 1;
visibility: visible;
background-color: var(--bg-white);
}
.button-wrapper {
display: none;
}
.mobile-button-wrapper {
display: block;
}
.nav-links {
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 16px;
}
.nav-links li {
width: 100%;
}
.nav-links a {
padding: 12px 0;
font-size: 16px;
width: 100%;
justify-content: space-between;
}
.dropdown-menu {
position: static;
border: none;
box-shadow: none;
padding-left: 16px;
display: none;
opacity: 1;
visibility: visible;
transform: none;
width: 100%;
background: transparent;
}
.has-dropdown.active .dropdown-menu {
display: block;
}
.dropdown-menu a {
padding: 8px 0;
}
.burger-menu.active span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
width: 24px;
}
.burger-menu.active span:nth-child(2) {
opacity: 0;
transform: translateX(-10px);
}
.burger-menu.active span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
width: 24px;
}
/* Remove hover media query restrictions */
.nav-links a:hover,
.dropdown-menu a:hover {
background-color: transparent;
color: var(--text-primary);
}
.has-dropdown .dropdown-arrow::after {
transition: none;
}
.has-dropdown.active .dropdown-arrow::after {
transform: translate(-75%, -80%) rotate(-135deg);
}
.mobile-button-wrapper .btn-default {
color: #000;
}
.btn-explore {
width: 100%;
}
.mobile-button-wrapper .btn-default:hover {
color: black;
border-color: black;
}
.mobile-button-wrapper .btn-default:hover svg path {
stroke: black;
}
.btn-default {
color: #000;
border-color: transparent;
background: linear-gradient(90deg, #FF6B6B 0%, #FFB84C 100%);
justify-content: center;
padding: 14px 24px;
}
.btn-default::after {
opacity: 1;
}
}
/* Additional Mobile Adjustments */
@media (max-width: 767px) {
.mobile-button-wrapper .btn-default{width: 100% !important;}
.container {
max-width: 100%;
}
.button-wrapper,
.mobile-button-wrapper {
width: 100%;
margin-top: 24px;
}
.btn-default,
.btn-explore {
width: fit-content !important;
justify-content: center;
padding: 14px 24px;
}
}
/* Adjust main content for fixed header */
main {
position: relative;
z-index: 1;
}
/* Body state when menu is open */
body.menu-open {
overflow: hidden;
}
/* Hero Section */
.hero-section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 120px 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
text-align: center;
}
.path-container {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.ball {
position: absolute;
width: 15vw;
/* 15% of viewport width */
height: 15vw;
/* Keep aspect ratio square */
min-width: 160px;
/* Minimum size */
min-height: 160px;
max-width: 300px;
/* Maximum size */
max-height: 300px;
pointer-events: none;
transform-origin: center center;
}
.curve-path {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 20px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-title {
font-family: var(--font-onest);
font-size: 78px;
line-height: 1.25;
margin-bottom: 24px;
color: var(--text-primary);
font-weight: 600;
text-align: center;
}
.hero-content p {
font-size: 22px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 40px;
font-weight: 300;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.btn-explore {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
background: linear-gradient(90deg, #FF6B6B 0%, #FFB84C 100%);
border-radius: 100px;
color: var(--text-white);
text-decoration: none;
font-weight: 500;
font-size: 16px;
transition: transform 0.3s ease;
margin: 0 auto;
}
.btn-explore .btn-content {
display: flex;
align-items: center;
gap: 8px;
}
.btn-explore:hover {
transform: translateY(-2px);
}
.btn-explore:hover .arrow-icon {
transform: translate(4px, -4px);
}
/* Word Scroll Animation */
.word-scroll-container {
display: inline-flex;
height: 1em;
overflow: hidden;
vertical-align: middle;
position: relative;
margin-left: 5px;
line-height: 1;
padding-bottom: 0;
}
.word-scroll-wrapper {
transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
display: flex;
flex-direction: column;
text-align: left;
}
.word-scroll-item {
height: 1em;
color: #EE6149;
line-height: 1;
padding-bottom: 0;
font-size: 75.2px;
}
/* Responsive Styles */
/* @media (min-width: 1799px) {
.hero-section {
height: 100vh;
}
} */
@media (max-width: 1200px) {
.hero-section {
padding: 100px 0;
}
}
@media (max-width: 991px) {
.hero-title {
font-size: 60px;
}
.word-scroll-item{
font-size: 57.2px;
}
.ball {
width: 130px;
height: 130px;
min-width: 130px;
min-height: 130px;
max-width: 130px;
max-height: 130px;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 80px 0;
}
.hero-title {
font-size: 36px;
}
.word-scroll-item{
font-size: 35px;
}
.hero-content p br {
display: none;
}
.hero-content p {
font-size: 18px;
margin-bottom: 32px;
padding: 0 20px;
}
.btn-explore {
padding: 14px 28px;
font-size: 15px;
}
.path-container {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.curve-path {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ball {
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
max-width: 100px;
max-height: 100px;
}
}
@media (max-width: 480px) {
.hero-content {
padding: 0;
}
.hero-section {
padding: 60px 0;
}
.hero-title {
font-size: 28px;
}
.word-scroll-item{
font-size: 27px;
}
.hero-content p {
font-size: 16px;
margin-bottom: 28px;
padding: 0;
line-height: 24px;
}
.btn-explore {
padding: 12px 24px;
font-size: 14px;
width: calc(100% - 32px);
justify-content: center;
}
.mobile-path{
top: 40%;
}
}
/* Responsive ball sizes */
@media screen and (max-width: 768px) {
.ball {
width: 18vw;
height: 18vw;
}
}
@media screen and (max-width: 480px) {
.ball {
width: 25vw;
height: 25vw;
min-width: 100px;
min-height: 100px;
}
}
.mobile-path {
display: none;
}
@media (max-width: 768px) {
.desktop-path {
display: none;
}
.mobile-path {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ball {
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
max-width: 100px;
max-height: 100px;
}
}
/* Stats Section Styles */
.stats-section {
background: var(--bg-white);
position: relative;
overflow: hidden;
}
.counter-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 40px;
padding: 0 50px;
margin: 0 auto;
}
.counter-item {
text-align: left;
position: relative;
}
.counter-item:last-child::after {
display: none;
}
.counter-item p {
font-size: 14px;
color: #576272;
line-height: 1.4;
font-family: var(--font-onest);
padding-bottom: 16px;
font-weight: 400;
border-bottom: 1px solid #E6E8EA;
}
.counter-number {
font-size: 34px;
padding-top: 16px;
font-weight: 700;
color: #1D2939;
font-family: var(--font-onest);
display: flex;
align-items: baseline;
gap: 6px;
}
/* .counter-number::after {
content: "Cr";
font-size: 30px;
color: #1D2939;
font-weight: 700;
}
.counter-number::before {
content: "+";
color: #EE6149;
font-weight: 700;
order: 2;
}
.counter-item:nth-child(2) .counter-number::after {
content: "";
}
.counter-item:nth-child(3) .counter-number::after {
content: "";
}
.counter-item:nth-child(4) .counter-number::after {
content: "Lac Cr";
} */
@media (max-width: 1199px) {
.counter-grid {
padding: 0px;
gap: 20px;
}
.counter-number {
font-size: 30px;
}
}
@media (max-width: 991px) {
.stats-section {
padding: 60px 0;
}
.counter-grid {
gap: 30px;
padding: 0 20px;
grid-template-columns: repeat(3, 1fr);
}
.counter-item::after {
right: -15px;
}
}
@media (max-width: 768px) {
.counter-number::after{font-size:24px;}
.stats-section {
padding: 40px 0;
}
.counter-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px 24px;
padding: 0 24px;
}
.counter-item::after {
display: none;
}
.counter-number {
font-size: 28px;
justify-content: flex-start;
}
.counter-item p {
font-size: 13px;
}
}
@media (max-width: 480px) {
.stats-section {
padding: 32px 0;
}
.counter-grid {
gap: 24px 16px;
padding: 0 8px;
}
.counter-item:last-child {
max-width: 100%;
}
.counter-number {
font-size: 26px;
gap:5px;
}
.counter-number::before{margin-left:-5px;}
.counter-item p {
font-size: 12px;
}
}
/* product card section */
.card-slider {
width: 100%;
position: relative;
overflow: visible;
}
.cards-container {
display: flex;
gap: 0;
padding: 1rem;
position: relative;
padding-left: 0;
}
.circle-icon {
text-align: right;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
bottom: 0;
}
.circle-icon img {
width: 100%;
max-width: 350px;
margin-left: auto;
}
.card {
position: relative;
flex: 1;
min-width: 300px;
border-radius: 1rem;
overflow: hidden;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
height: 600px;
margin-right: -1px;
background: #FFF3EB;
box-shadow: 20px 4px 64px 0px #35353514;
}
.card:nth-child(1) {
background: linear-gradient(90.65deg, #FFDACE 0.56%, #FBFBDD 104.53%) !important;
}
.card:nth-child(2) {
background: #FFF3EB;
}
.card:nth-child(3) {
background: #FCFCEF;
}
@media screen and (min-width:769px) {
.card:nth-child(1) {
margin-right: -25px;
z-index: 3;
}
.card:nth-child(2) {
margin-right: -25px;
z-index: 2;
}
}
.card.active:nth-child(2) .card-content {
padding: 60px;
}
.card.active {
flex: 3;
cursor: default;
z-index: 2;
opacity: 1;
background: linear-gradient(90.65deg, #FFDACE 0.56%, #FBFBDD 104.53%) !important;
margin-right: -25px;
}
.card-content {
width: 100%;
height: 100%;
padding: 40px;
opacity: 0.4;
transition: opacity 0.5s;
}
.card.active .circle-icon {
opacity: 1;
}
.card.active .card-content {
opacity: 1;
}
.card-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.card-icon {
width: 2.5rem;
height: 2.5rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.card-number {
font-size: 0.875rem;
color: rgb(107, 114, 128);
}
.card-title {
font-size: 34px;
font-weight: 600;
color: #101828;
font-family: var(--font-onest);
margin: 0.5rem 0;
margin-bottom: 20px;
transition: color 0.5s;
}
.card:not(.active) .card-title {
color: rgb(107, 114, 128);
}
.card-details {
opacity: 0;
transform: translateY(1rem);
transition: all 0.5s;
pointer-events: none;
}
.card.active .card-details {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.card-subtitle {
font-size: 20px;
font-weight: 600;
color: #EE6149;
margin-bottom: 20px;
font-family: var(--font-onest);
}
.card-details p {
font-size: 16px;
color: #576272;
max-width: 500px;
line-height: 1.5;
margin-bottom: 1.5rem;
font-family: var(--font-onest);
}
.card-button {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
background: linear-gradient(to right, #ff7170, #ffe57f);
border: none;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
color: rgb(17, 24, 39);
cursor: pointer;
transition: all 0.3s;
}
.card-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dots-container {
display: none;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.dot {
width: 8px;
height: 8px;
border-radius: 9999px;
background-color: rgb(209, 213, 219);
transition: all 0.3s;
cursor: pointer;
margin:0 4px;
}
.dot.active {
width: 24px;
background-color: #969696;
}
.commonSpace .commonHeadingBlock {
justify-content: flex-start;
gap: 150px;
align-items: flex-start;
}
.news-section .commonHeadingBlock {
gap: 40px;
align-items: center;
justify-content: space-between;
}
.news-section .commonHeadingBlock .common-heading-row{padding-top: 0;}
@media screen and (max-width:992px) {
.commonSpace .commonHeadingBlock {
gap: 10px;
}
}
@media screen and (max-width:1440px) {
.card-title {
font-size: 30px;
}
}
@media screen and (max-width:1024px) {
.news-section .commonHeadingBlock{
gap: 20px;
}
}
@media screen and (max-width:991px) {
.card {
min-width: 150px;
}
.news-section .commonHeadingBlock{
align-items: flex-start;
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.cards-container {
height: 620px;
padding: 0;
display: block;
overflow: visible;
}
.circle-icon {
bottom: 0;
}
.card {
position: absolute;
width: calc(100% - 2rem);
height: 580px;
left: 0;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
transform-origin: center;
opacity: 0;
visibility: hidden;
}
.card.active {
transform: translateX(0) scale(1);
opacity: 1;
visibility: visible;
z-index: 5;
}
.card:not(.active) {
opacity: 0.6;
visibility: visible;
}
.card.active:nth-child(2) .card-content {
padding: 20px;
}
/* Position inactive cards behind the active one */
.card:nth-child(1):not(.active) {
transform: translateX(20px) scale(0.95);
z-index: 4;
}
.card:nth-child(2):not(.active) {
transform: translateX(60px) scale(0.9);
z-index: 3;
}
.card:nth-child(3):not(.active) {
transform: translateX(90px) scale(0.85);
z-index: 2;
}
.dots-container {
display: flex;
position: relative;
z-index: 10;
margin-top: 8px;
}
.circle-icon img{max-width: 300px;}
}
@media screen and (max-width:600px) {
.card:nth-child(1) {
background: #FFF3EBCC;
}
.card:nth-child(1):not(.active) {
transform: translateX(20px) scale(0.95);
z-index: 4;
}
.card:nth-child(2):not(.active) {
transform: translateX(40px) scale(0.9);
z-index: 3;
}
.card:nth-child(3):not(.active) {
transform: translateX(60px) scale(0.85);
z-index: 2;
}
.card {
border-radius: 0 16px 16px 0;
}
.cards-container {
margin-left: -18px;
}
.card-content {
padding: 30px;
}
.card-title {
font-size: 24px;
}
.card-subtitle {
font-size: 18px;
}
.card-details p {
font-size: 14px;
}
.commonSpace .commonHeadingBlock {
gap: 15px;
}
}
/* Common Heading Component */
.commonHeadingBlock {
margin-bottom: 40px;
position: relative;
}
.commonHeadingBlock {
margin-bottom: 40px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.commonHeadingBlock .common-heading-row {
display: flex;
align-items: center;
gap: 16px;
}
.commonHeadingBlock .newsletter-icon,
.commonHeadingBlock .common-heading-icon {
width: 32px;
height: 32px;
background: #DCDC5B;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
position: absolute;
left: -7px;
top: -1px;
}
.commonHeadingBlock .smallHeading {
font-size: 18px;
font-weight: 500;
color: #101828;
font-family: var(--font-onest);
position: relative;
top: 2px;
letter-spacing: 0.01em;
}
.commonHeadingBlock .section-title {
font-size: 36px;
line-height: 1.2;
color: #101828;
font-weight: 700;
font-family: var(--font-onest, 'Onest', Arial, sans-serif);
margin: 0;
margin-bottom: 0;
display: block;
}
.commonHeadingBlock .section-title span {
color: #EE6149;
}
@media screen and (max-width: 1026px) {
.commonHeadingBlock .section-title {
font-size: 30px;
}
}
@media (max-width: 991px) {
.commonHeadingBlock .section-title {
font-size: 30px;
}
.commonHeadingBlock {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
}
@media (max-width: 600px) {
.commonHeadingBlock a {
display: none;
}
.commonHeadingBlock {
margin-bottom: 24px;
}
.commonHeadingBlock .common-heading-row {
gap: 8px;
margin-bottom: 8px;
}
.commonHeadingBlock .section-title {
font-size: 24px;
}
.commonHeadingBlock .section-title br{display: none;}
.commonHeadingBlock svg {
min-width: 24px;
height: 12px;
}
}
/* --- Scoped Footer Styles --- */
.newsletter-section .commonHeadingBlock {
display: block;
}
.site-footer {
background: #fff;
padding: 40px 0 25px;
position: relative;
z-index: 99;
}
.site-footer .footer-wrapper {
display: flex;
width: 100%;
flex-wrap: wrap;
border-top: 1px solid #EAECF0;
}
.site-footer .footer-left {
flex: 0 0 40%;
max-width: 40%;
padding-right: 50px;
padding-top: 50px;
border-right: 1px solid #E6E8EA;
}
.site-footer .footer-right {
flex: 0 0 60%;
max-width: 60%;
padding-left: 50px;
padding-top: 50px;
}
.site-footer .newsletter-header {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 16px;
position: relative;
}
.site-footer .newsletter-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #DCDC5B;
position: absolute;
left: -7px;
border-radius: 50%;
}
.site-footer .newsletter-section .smallHeading {
font-size: 20px;
line-height: 1.3;
color: #101828;
position: relative;
font-weight: 400;
font-family: var(--font-onest);
}
.site-footer .newsletter-section h2 {
position: relative;
font-weight: 500;
margin-top: 15px;
}
.site-footer .newsletter-form .form-group {
display: flex;
gap: 16px;
margin-top: 35px;
position: relative;
}
.site-footer .newsletter-form input {
flex: 1;
height: 48px;
border: none;
border-bottom: 1px solid #D0D5DD;
font-size: 16px;
background: #FFFFFF;
}
.site-footer .newsletter-form input::placeholder {
color: #5C6777;
font-family: var(--font-onest);
font-size: 14px;
font-weight: 300;
}
.site-footer .btn-subscribe {
display: flex;
align-items: center;
gap: 8px;
height: 48px;
font-family: var(--font-onest);
background: #101828;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: absolute;
right: 0;
}
.site-footer .btn-subscribe svg {
stroke: currentColor;
}
.site-footer .btn-subscribe.minimal {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
color: #EE6048;
font-weight: 600;
font-size: 16px;
cursor: pointer;
padding: 0;
}
.site-footer .subscribe-arrow {
width: 31px;
height: 30px;
}
.site-footer .subscribe-arrow svg {
transition: all 0.3s ease;
}
.site-footer .btn-subscribe.minimal:hover .subscribe-arrow svg {
transform: rotate(90deg);
}
.site-footer .footer-social {
display: flex;
gap: 16px;
margin: 35px 0;
}
.site-footer .footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
transition: all 0.3s ease;
}
.site-footer .footer-social a:hover {
background: #F2F4F7;
transform: translateY(-2px);
}
.site-footer .footer-navigation {
display: grid;
grid-template-columns: repeat(3, 1fr) 1.5fr;
gap: 32px;
width: 100%;
}
.site-footer .footer-col h3 {
font-size: 16px;
font-weight: 500;
color: #101828;
margin-bottom: 20px;
font-family: var(--font-onest);
display: flex;
align-items: center;
justify-content: space-between;
}
.site-footer .dropdown-arrow {
width: 10px;
height: 10px;
display: none;
position: relative;
}
.site-footer .dropdown-arrow::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translate(-75%, -50%) rotate(45deg);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-footer .footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-col ul li {
margin-bottom: 12px;
}
.site-footer .footer-col ul li a {
color: #5C6777;
text-decoration: none;
transition: color 0.3s;
font-size: 14px;
font-weight: 300;
}
.site-footer .footer-col ul li a:hover {
color: #101828;
}
.site-footer .contact-info {
color: #5C6777;
font-weight: 300;
font-size: 14px;
line-height: 1.5;
}
.site-footer .contact-info p {
margin-bottom: 12px;
}
.site-footer .contact-info a {
color: #5C6777;
text-decoration: none;
}
.blankdiv {
height: 48px;
/* margin-top: 35px; */
}
.site-footer .footer-logos {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
border-top: 1px solid #E6E8EA;
padding: 30px 0;
}
.site-footer .footer-logos img {
height: 70px;
width: 70px;
}
.site-footer .firstblock {
display: flex;
align-items: center;
gap: 45px;
}
.site-footer .firstblock .firstblock-item {
border-right: 1px solid #E6E8EA;
padding-right: 45px;
}
.site-footer .footer-bottom {
border-top: 1px solid #EAECF0;
padding-top: 32px;
}
.site-footer .footer-legal {
display: flex;
gap: 50px;
align-items: center;
color: #475467;
font-size: 14px;
}
.site-footer .legal-links {
display: flex;
gap: 16px;
align-items: center;
}
.site-footer .legal-links a {
color: #475467;
text-decoration: none;
}
.site-footer .legal-links .separator {
color: #D0D5DD;
}
.site-footer .mobile-social {
display: none;
}
.address, .phone, .email {
display: block;
}
@media screen and (max-width: 1299px) {
.site-footer .newsletter-section h2 {
font-size: 39px;
}
}
@media screen and (max-width: 1024px) {
.site-footer .footer-right {
padding-left: 25px;
}
.site-footer .footer-left {
padding-right: 25px;
}
.site-footer .footer-navigation {
gap: 0px;
}
.site-footer .newsletter-section h2 {
font-size: 30px;
}
}
@media (max-width: 991px) {
.site-footer .footer-wrapper {
flex-direction: column;
}
.site-footer .footer-social {
display: none;
}
.site-footer .mobile-social {
display: flex;
}
.blankdiv {
display: none;
}
.site-footer .footer-left,
.site-footer .footer-right {
flex: 0 0 100%;
max-width: 100%;
padding: 30px 0 0 0;
border: none;
}
.site-footer .footer-right {
padding-left: 0;
padding-top: 20;
}
}
@media (max-width: 768px) {
.site-footer .newsletter-section .smallHeading{font-size: 18px;}
.site-footer {
padding: 24px 0 30px;
}
.site-footer .newsletter-section h2 {
font-size: 24px;
}
.site-footer .btn-subscribe {
width: 100%;
justify-content: center;
width: fit-content;
}
.site-footer .footer-social {
justify-content: flex-start;
margin-bottom: 32px;
}
.site-footer .footer-navigation {
grid-template-columns: 1fr;
gap: 0;
}
.site-footer .footer-col {
border-bottom: 1px solid #EAECF0;
}
.site-footer .footer-accordion {
padding: 0;
}
.site-footer .footer-accordion h3 {
padding: 16px 0;
margin: 0;
cursor: pointer;
}
.site-footer .dropdown-arrow {
display: inline-block;
}
.site-footer .footer-accordion.active .dropdown-arrow::after {
transform: translate(-75%, -50%) rotate(-135deg);
}
.site-footer .footer-col ul,
.site-footer .contact-info {
display: none;
padding: 0 0 16px;
}
.site-footer .footer-accordion.active ul,
.site-footer .footer-accordion.active .contact-info {
display: block;
}
.site-footer .footer-logos {
flex-wrap: wrap;
gap: 24px;
margin-top: 40px;
}
.site-footer .footer-legal {
flex-direction: column-reverse;
gap: 16px;
text-align: center;
}
.site-footer .legal-links {
justify-content: center;
}
}
@media (max-width: 480px) {
.site-footer .footer-social {
gap: 12px;
}
.site-footer .footer-social a {
width: 36px;
height: 36px;
}.site-footer .footer-logos img{width: 60px;height: 60px;}
.site-footer .firstblock .firstblock-item{padding-right: 30pxs;}
}
/* --- End Scoped Footer Styles --- */
/* --- MakeGreat Happen Section Styles --- */
.makegreat-section {
width: 100%;
position: relative;
}
.makegreat-content .btn-default {
color: #fff;
border-color: #fff;
background: transparent;
position: relative;
z-index: 3;
}
.makegreat-bg {
width: 100%;
min-height: 200px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 4px 32px 0 rgba(80, 80, 80, 0.06);
z-index: 1;
}
.makegreat-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 28px;
filter: blur(40px);
z-index: 0;
}
.makegreat-content {
width: 100%;
text-align: center;
padding: 48px 0 48px 0;
z-index: 2;
position: relative;
}
.makegreat-heading {
color: #fff;
font-size: 22px;
font-weight: 400;
margin-bottom: 8px;
font-family: var(--font-onest);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.makegreat-title {
color: #fff;
font-size: 40px;
font-weight: 700;
margin-bottom: 28px;
font-family: var(--font-onest, 'Onest', Arial, sans-serif);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.makegreat-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 32px;
border-radius: 24px;
border: 1.5px solid #fff;
background: transparent;
color: #fff;
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s, color 0.2s;
font-family: var(--font-onest, 'Sofia Pro', Arial, sans-serif);
}
.makegreat-btn .arrow {
font-size: 18px;
margin-left: 4px;
}
.makegreat-btn:hover {
background: #fff;
color: #FF7E4A;
}
.makegreat-chat {
position: absolute;
right: 48px;
bottom: 32px;
z-index: 3;
}
.makegreat-chat img {
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 2px 12px 0 rgba(80, 80, 80, 0.10);
background: #fff;
display: block;
}
@media (max-width: 991px) {
.makegreat-bg {
width: 100%;
min-height: 160px;
}
.makegreat-title {
font-size: 28px;
}
.makegreat-content {
padding: 32px 0;
}
.makegreat-chat {
right: 16px;
bottom: 16px;
}
.makegreat-content .btn-default {
color: #000;
background: #fff;
}
.makegreat-content .btn-default::after {
background: #fff;
color: #000;
}
}
@media (max-width: 768px) {
.makegreat-bg {
width: 100%;
min-height: 260px;
border-radius: 16px;
background: linear-gradient(135deg, #ff7a18, #af9cf7);
}
.makegreat-content {
padding: 24px 0;
}
.makegreat-btn {
font-size: 13px;
padding: 8px 18px;
border-radius: 16px;
}
.makegreat-chat img {
width: 36px;
height: 36px;
}
}
/* --- End MakeGreat Happen Section Styles --- */
/* --- News & Media Section Styles --- */
.news-section {
position: relative;
overflow: visible;
}
.common-heading-row {
display: flex;
align-items: center;
gap: 24px;
}
.common-heading-left {
display: flex;
align-items: center;
gap: 10px;
}
.common-heading-icon {
width: 24px;
height: 24px;
background: #DCDC5B;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
}
.common-heading-label {
font-size: 16px;
font-weight: 500;
color: #101828;
font-family: var(--font-onest, 'Sofia Pro', Arial, sans-serif);
position: relative;
top: 2px;
}
.news-grid {
display: grid;
grid-template-columns: 2fr 1.2fr;
gap: 32px;
margin-top: 32px;
}
.news-grid-left {
display: flex;
flex-direction: row;
gap: 24px;
}
.news-grid-right {
display: flex;
flex-direction: column;
gap: 24px;
}
.news-card {
background: #F9F9F9;
border-radius: 18px;
position: relative;
padding: 0;
overflow: hidden;
min-width: 0;
height: 100%;
width: 100%;
padding: 15px;
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.news-card-img {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 18px;
}
.news-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-card-badge {
position: absolute;
top: 16px;
left: 16px;
background: #fff;
color: #576272;
font-size: 13px;
font-weight: 400;
border-radius: 18px;
padding: 5px 12px;
box-shadow: 0 2px 8px 0 rgba(80, 80, 80, 0.08);
opacity: 0.8;
}
.news-card-content {
padding: 24px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.news-card-title {
font-size: 18px;
font-weight: 500;
color: #101828;
margin-bottom: 8px;
font-family: var(--font-onest, 'Onest', Arial, sans-serif);
display: -webkit-box;
-webkit-line-clamp: 2;
/* Limit to 2 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.news-card-meta {
display: flex;
align-items: center;
gap: 12px;
color: #5C6777;
font-size: 14px;
font-weight: 400;
border: 1px solid #E6E8EA;
border-right: 0;
border-left: 0;
flex-wrap: wrap;
padding: 8px 0;
font-family: var(--font-onest, 'Onest', Arial, sans-serif);
font-weight: 400;
letter-spacing: 0.05em;
}
.news-card-meta:before {
content: "";
width: 15px;
border: 1px solid #576272;
}
.news-card-dot {
font-size: 18px;
color: #D0D5DD;
}
.news-card-link {
color: #EE6048;
font-size: 15px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
font-family: var(--font-onest);
gap: 4px;
margin-top: 8px;
transition: color 0.2s;
}
.news-card-link .arrow {
font-size: 16px;
margin-left: 2px;
}
.news-card-link:hover {
color: #101828;
}
.news-card-content-alt {
padding: 24px 24px 18px 24px;
background: #F9FAFB;
border-radius: 18px;
min-height: 180px;
display: flex;
flex-direction: column;
gap: 10px;
}
.news-card-badge-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.news-swiper.swiper {
display: none;
}
.news-grid-right .news-card-badge {
position: static;
background: transparent;
padding: 0;
opacity: 1;
box-shadow: none;
font-size: 16px;
}
.news-grid-right span.news-card-read {
font-family: var(--font-onest);
color: #576272;
font-weight: 400;
}
.news-grid-right .news-card-date {
font-family: var(--font-onest);
color: #576272;
letter-spacing: 0.05em;
font-weight: 400;
}
.com-mobile-btn {
display: none;
}
span.news-card-date,
span.news-card-read {
display: flex;
align-items: center;
gap: 5px;
}
@media (max-width: 1024px) {
.news-grid {
gap: 16px;
}
}
@media (max-width: 900px) {
.news-grid {
grid-template-columns: 1fr;
gap: 0;
}
.news-grid-left {
gap: 16px;
}
.news-grid-right {
flex-direction: row;
gap: 16px;
margin-top: 15px;
}
}
@media (max-width: 768px) {
.news-section {
margin: 32px 0 0 0;
padding-bottom: 16px;
}
.news-grid {
display: none;
}
.news-swiper.swiper {
display: block;
margin-left: -12px;
width: 100vw;
max-width: 99vw;
}
.news-swiper.swiper .swiper-wrapper {
gap: 0;
}
.common-heading-row {
align-items: flex-start;
gap: 8px;
}
}
@media (max-width: 600px) {
.news-card-meta:before{width:8px;}
.news-card-meta{gap:6px;}
span.news-card-date,
span.news-card-read {
font-size: 12px;
}
.com-mobile-btn {
display: block;
margin-top: 30px;
}
.com-mobile-btn a {
width: 100% !important;
}
.com-mobile-btn .btn-default .btn-content {
justify-content: space-between;
width: 100%;
color: #000;
}
span.news-card-date svg,
span.news-card-read svg {
width: 16px;
height: 16px;
}
.news-section {
margin: 0;
}
.news-card-content,
.news-card-content-alt {
padding: 16px 12px 12px 12px;
}
.news-card-title {
font-size: 15px;
}
}
@media (max-width: 768px) {
.news-swiper.swiper .swiper-wrapper {
display: flex;
margin-left: 12px;
}
}
/* --- End News & Media Section Styles --- */
/* Footer Accordion Styles */
.footer-accordion ul,
.footer-accordion .contact-info {
height: 0;
opacity: 0;
overflow: hidden;
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease;
margin: 0;
pointer-events: none;
}
.footer-accordion.active ul,
.footer-accordion.active .contact-info {
height: auto;
opacity: 1;
pointer-events: auto;
}
.footer-accordion h3 {
position: relative;
cursor: pointer;
}
.footer-accordion .dropdown-arrow {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-accordion.active .dropdown-arrow::after {
transform: translate(-75%, -50%) rotate(-135deg);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 769px) {
.footer-accordion ul,
.footer-accordion .contact-info {
height: auto !important;
opacity: 1 !important;
overflow: visible;
pointer-events: auto;
}
}
/* Loading Overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.loading-overlay img {
width: 120px;
height: auto;
animation: pulse 1.5s ease-in-out infinite;
opacity: 1;
}
.loading-overlay.hidden {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.95);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Common Dots Styles */
.swiper-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 24px;
position: static;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #E4E7EC;
border-radius: 50%;
opacity: 1;
transition: all 0.3s ease;
cursor: pointer;
}
.swiper-pagination-bullet-active {
width: 24px;
background: #96969B;
border-radius: 100px;
}
/* Mobile-specific styles */
@media (max-width: 1024px) {
.news-swiper .swiper-pagination {
margin-top: 32px;
}
}
/* Solutions Section Styles */
.solutions-wrapper {
display: flex;
gap: 60px;
margin-top: 60px;
}
.solutions-tabs {
flex: 0 0 30%;
}
.solutions-video {
flex: 0 0 70%;
position: relative;
padding-left: 50px;
}
.tab-list {
display: flex;
flex-direction: column;
border-radius: 24px;
border: 1px solid #EDEDED
}
.tab-heading {
font-family: var(--font-onest);
font-size: 18px;
font-weight: 300;
color: #576272;
padding: 24px;
}
.tab-item {
padding: 24px;
background: #F9F9F9;
border-bottom: 1px solid #E6E8EA;
cursor: pointer;
}
.tab-item:hover {
background: #F5F6F7;
}
.tab-item.active {
background: linear-gradient(90deg, #E5EEF1 0%, #FFFFFF 100%);
position: relative;
border: 0
}
.tab-item.active:after {
content: "";
display: block;
width: 70%;
border: 1px solid #DADA61;
position: absolute;
bottom: 0;
left: 0;
}
.tab-item:last-child {
border-radius: 0 0 24px 24px;
}
.freedemo {
margin-top: 50px;
}
.tab-item.active:last-child {
border-radius: 0;
}
.tab-item.active .tab-content h3 {
color: #101828;
font-weight: 500;
font-size: 20px;
position: relative;
display: flex;
align-items: center;
}
.tab-item.active .tab-content h3:before {
content: "";
width: 18px;
height: 18px;
background: #DCDC5B;
border-radius: 50%;
display: inline-block;
margin-right: 15px;
}
.tab-content h3 {
font-size: 18px;
font-weight: 300;
margin-bottom: 8px;
font-family: var(--font-onest);
color: #576272;
}
.tab-content p {
font-size: 16px;
line-height: 1.5;
color: inherit;
opacity: 0.8;
}
.video-container {
display: none;
position: relative;
width: 100%;
height: 100%;
border-radius: 24px;
overflow: hidden;
/* background: #F5F6F7; */
}
.video-container.active {
display: block;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 24px;
background: url('../images/loan-recovery.jpg') center center/cover no-repeat;
}
/* Make sure poster is visible */
.video-container video:not([playing]) {
opacity: 1;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
color: #EE6149;
font-size: 18px;
font-weight: 600;
}
.play-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.play-btn svg {
filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2));
}
.solution-heading {
padding: 24px;
font-family: var(--font-onest);
font-size: 20px;
font-weight: 300;
color: #576272;
}
.tab-only {
display: none;
}
.dest-only {
display: block;
}
/* Responsive Styles */
@media screen and (max-width:1299px) {
.solutions-video {
flex: 0 0 65%;
}
.tab-item.active .tab-content h3 {
font-size: 20px;
}
}
@media screen and (max-width:1026px) {
.solutions-video {
flex: 0 0 64%;
padding-left: 0;
}
.tab-content h3 {
font-size: 18px;
}
.tab-item.active .tab-content h3 {
font-size: 18px;
}
.video-container {
min-height: auto;
}
}
@media (max-width: 992px) {
.tab-only {
display: block !important;
}
.dest-only {
display: none !important;
}
.solutions-wrapper {
flex-direction: column;
gap: 0px;
}
.solution-heading {
text-align: center;
}
.solutions-tabs,
.solutions-video {
flex: 0 0 100%;
}
}
@media (max-width: 767px) {
.solutions-section {
padding: 60px 0;
}
.play-btn svg {
width: 60px;
height: 60px;
}
}
@media (max-width: 480px) {
.solutions-section {
padding: 30px 0;
}
.tab-item {
flex-direction: column;
gap: 12px;
text-align: center;
}
}
/* Mobile Solutions Section Styles */
@media screen and (max-width:992px) and (min-width:768px) {
.tab-list {
transform: none !important;
}
}
@media (max-width: 992px) {
.solutions-section {
overflow-x: hidden;
}
.solutions-wrapper {
flex-direction: column;
margin-top: 30px;
}
.solutions-tabs {
width: 100%;
margin-bottom: 30px;
overflow: visible;
}
/* Swiper styles for tab list */
.tab-swiper {
width: 100%;
overflow: visible;
padding: 8px 0;
margin: 0 -20px;
padding-left: 20px;
padding-right: 20px;
}
.tab-list {
display: flex;
border: none;
margin: 0;
padding: 5px 0;
align-items: center;
flex-direction: row;
justify-content: center;
}
.tab-item {
width: auto !important;
flex: none;
min-width: 130px;
text-align: center;
background: #F5F6F7;
border-radius: 24px;
padding: 12px 20px;
margin: 0 8px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
opacity: 0.7;
transform: scale(0.9);
}
.swiper-slide-active.tab-item {
opacity: 1;
}
.tab-item.active {
background: transparent;
}
.swiper-slide-active.tab-item .tab-content h3 {
color: #101828;
font-weight: 600;
}
.tab-item.active {
background: transparent;
box-shadow: none;
border-radius: 0;
}
.tab-item.active:after {
content: "";
display: block;
width: 100%;
border: 1px solid #DADA61;
position: absolute;
bottom: 0;
left: 0;
}
.tab-item:last-child {
border-radius: 24px;
}
/* Additional styling for emphasis */
.swiper-slide-prev.tab-item,
.swiper-slide-next.tab-item {
opacity: 0.85;
transform: scale(0.95);
}
.tab-content {
padding: 0;
}
.tab-content h3 {
margin: 0;
white-space: nowrap;
}
/* Swiper styles for video slider */
.solutions-video {
width: 100%;
margin-top: 10px;
}
.video-swiper {
border-radius: 16px;
overflow: hidden;
}
.video-container {
border-radius: 16px;
overflow: hidden;
display: block !important;
}
.video-container video {
width: 100%;
height: auto;
border-radius: 16px;
display: block;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
border: none;
cursor: pointer;
display: flex;
z-index: 5;
}
.play-btn svg {
width: 64px;
height: 64px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.freedemo {
margin-top: 30px;
text-align: center;
}
}
@media screen and (max-width:767px) {
.tab-item.active:after,
.tab-item.active .tab-content h3:before {
display: none;
}
.tab-item {
box-shadow: none;
background: transparent;
}
.solution-heading,
.tab-item {
padding: 0;
}
.tab-item.active .tab-content h3 {
justify-content: center;
}
.tab-swiper {
margin: 0;
padding: 0;
}
.tab-list {
padding: 10px 0;
}
.tab-item.swiper-slide.swiper-slide-visible.swiper-slide-prev:before {
content: "";
width: 83px;
height: 48px;
display: block;
position: absolute;
top: -18px;
background: linear-gradient(-269.42deg, #FFFFFF 35.26%, rgba(255, 255, 255, 0) 192.84%);
left: 0;
}
.tab-item.swiper-slide.swiper-slide-visible.swiper-slide-next:before {
content: "";
width: 83px;
height: 48px;
display: block;
position: absolute;
top: -18px;
background: linear-gradient(-269.42deg, #FFFFFF 35.26%, rgba(255, 255, 255, 0) 192.84%);
left: 0;
}
.solution-heading,
.tab-item {
flex: 1;
}
.solutions-tabs {
margin-bottom: 10px;
}
}
/* Common Spacing for Sections */
.commonSpace {
padding: 50px 0;
position: relative;
}
@media (max-width: 1024px) {
.commonSpace {
padding: 40px 0;
}
}
/* AI Solutions Section */
.ai-solutions-section {
overflow: hidden;
position: relative;
}
/* .ai-solutions-section.commonSpace .commonHeadingBlock{align-items: center;} */
.ai-solutions-section .commonHeadingBlock .section-title span{display:block;}
.ai-solutions-container {
position: relative;
z-index: 1;
}
.ai-solutions-content {
display: flex;
gap: 40px;
align-items: flex-start;
}
.ai-solutions-content-left {
flex: 0 0 60%;
max-width: 60%;
}
.ai-solutions-content-right {
flex: 0 0 40%;
max-width: 40%;
position: relative;
}
.ai-solutions-content-right-img {
position: relative;
height: 100%;
background:#F9F9F9;
border-radius:20px;
mix-blend-mode: multiply;
margin-right:-15%;
}
.ai-solutions-content-right-img img {
width: 100%;
height: auto;
object-fit: contain;
background:#F9F9F9;
border-radius:20px 0 0 20px;
mix-blend-mode: multiply;
}
.ai-solutions-content .ai-product-heading .dest-only{margin-top: 20px;}
.ai-product-heading {
margin-top: 40px;
margin-bottom: 30px;
display:flex;
align-items: flex-start;
gap:50px;
}
.ai-product-heading p {
font-size: 16px;
line-height: 1.6;
color: #576272;
font-family: var(--font-onest);
font-weight: 400;
max-width: 100%;
}
.cta div{margin-top: 5px;}
.ai-product-heading h3 {
font-size: 24px;
font-weight: 600;
color: #101828;
line-height: 1.3;
}
/* Desktop view */
.desktop-only {
display: grid;
}
.ai-product-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 25px;
}
.mobile-only {
display: none !important;
}
/* Tablet slider view */
.ai-product-swiper {
margin:initial;
padding: 10px 0 40px;
max-width:70%;
margin-top:-100px;
}
.ai-product-swiper .swiper-wrapper{
background-color:#F9F9F9;
border-radius:15px;
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.08);
padding:2px;
}
.ai-product-swiper .swiper-slide {
height: auto;
border-right: 1px solid #0600000D;
background-color:#F9F9F9;
}
.ai-product-swiper .swiper-slide:nth-child(4) {
border:0;
border-radius: 15px;
}
.ai-product-swiper .swiper-pagination {
bottom: 0;
}
.ai-product-swiper .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #DDE1E6;
opacity: 1;
}
.ai-product-swiper .swiper-pagination-bullet-active {
width: 24px;
border-radius: 20px;
background: #969696;
}
/* Mobile 2-per-row view */
.ai-product-cards-mobile {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 25px;
}
.ai-product-card {
gap: 16px;
padding: 16px;
transition: all 0.3s ease;
height: 100%;
}
.ai-product-card:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.ai-product-icon {
position: relative;
flex-shrink: 0;
}
.icon-wrapper {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.icon-wrapper img {
width: 32px;
height: 32px;
object-fit: contain;
}
.sub-icon {
position: absolute;
bottom: -5px;
right: -5px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #7A4DF4;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
border: 2px solid white;
}
.ai-product-content {
flex: 1;
}
.ai-product-content h4 {
font-size: 18px;
font-weight: 600;
color: #04142D;
margin-bottom: 6px;
}
.ai-product-content p {
font-size: 14px;
line-height: 1.4;
color: #576272;
font-family: var(--font-onest);
font-weight: 400;
}
@media screen and (min-width:1550px){
.ai-product-heading p{
max-width:60%;
}
}
@media screen and (min-width:1799px){
.ai-product-heading p{
max-width:68%;
}
}
@media screen and (max-width:1399px){
.ai-product-swiper{margin-top:-60px;}
}
@media (max-width: 1200px) {
.ai-solutions-content {
gap: 30px;
}
.ai-solutions-content-left {
flex: 0 0 60%;
max-width: 60%;
}
.ai-solutions-content-right {
flex: 0 0 40%;
max-width: 40%;
}
.ai-product-cards {
gap: 20px;
}
.ai-product-swiper{margin-top: -30px;}
}
@media screen and (max-width:1026px){
.ai-solutions-section.commonSpace .commonHeadingBlock{
gap:93px;
}
.ai-product-swiper{margin-top:30px;max-width:100%;}
}
@media (max-width: 992px) {
.ai-solutions-section.commonSpace .commonHeadingBlock{gap:10px;}
.ai-solutions-content-right-img{margin-right: 0;}
.ai-solutions-content {
flex-direction: column;
}
.ai-solutions-content-left,
.ai-solutions-content-right {
flex: 0 0 100%;
max-width: 100%;
}
.ai-solutions-content-right {
margin-top: 40px;
}
.ai-solutions-desc {
max-width: 100%;
}
/* Show tablet slider, hide others */
.desktop-only {
display: none;
}
.tablet-only {
display: block;
}
.mobile-only {
display: none;
}
}
@media (max-width: 767px) {
.ai-product-card:hover{box-shadow:none;}
.ai-solutions-content-right-img-mobile{
background-color: #F9F9F9;
padding:17px;
padding-bottom: 0;
border-radius:15px;
}
.ai-solutions-content-right{margin-top:0}
.ai-solutions-content-right-img img{border-radius: 20px;}
.ai-product-heading{flex-direction:column;gap:20px;}
.ai-product-heading p{max-width:100%;}
.ai-product-heading h3 {
font-size: 20px;
}
.ai-solutions-desc {
font-size: 16px;
}
.ai-product-heading {
margin-top: 30px;
margin-bottom: 20px;
}
.ai-product-cards-mobile .ai-product-card:first-child, .ai-product-cards-mobile .ai-product-card:nth-child(3),
.ai-product-cards-mobile .ai-product-card:nth-child(5)
{
border-right:1px solid #ededed;
padding-left:0;
}
.ai-product-cards-mobile .ai-product-card:nth-child(3), .ai-product-cards-mobile .ai-product-card:nth-child(4),
.ai-product-cards-mobile .ai-product-card:nth-child(5), .ai-product-cards-mobile .ai-product-card:nth-child(6){
border-top: 1px solid #EDEDED;
}
/* Show mobile grid, hide others */
.tablet-only {
display: none;
}
.mobile-only {
display: grid !important;
}
.ai-product-cards-mobile .ai-product-card {
padding: 15px;
gap: 12px;
}
}
@media (max-width: 576px) {
.icon-wrapper {
width: 48px;
height: 48px;
justify-content: flex-start;
}
.icon-wrapper img {
width: 28px;
height: 28px;
}
.ai-product-content h4 {
font-size: 16px;
}
.ai-product-content p {
font-size: 13px;
}
.ai-product-cards-mobile {
gap: 0px;
margin-top:0;
}
}
/* Resources Section */
.resource-grid .news-swiper.swiper{display:block;position: relative;z-index: 9;}
/* Leading Financial Section */
.leading-financial {
background-color: #fff;
overflow: hidden;
}
.leading-financial .commonHeadingBlock {
text-align: center;
justify-content: center;
margin-bottom: 60px;
}
.leading-financial .section-title {
font-size: 36px;
line-height: 1.3;
text-align: center;
margin: 0 auto;
}
.pt-0{padding-top:0;}
.pb-0{padding-bottom:0;}
/* Bank Logo Slider */
.bank-logo-slider {
width: 100%;
padding: 20px 0;
border-top: 1px solid #E6E8EA;
border-bottom: 1px solid #E6E8EA;
}
.bank-logo-slider .swiper-wrapper {
align-items: center;
transition-timing-function: linear;
}
.bank-logo {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
padding: 0 30px;
opacity: 0.8;
transition: opacity 0.3s ease;
filter: grayscale(100%);
}
.bank-logo:hover {
opacity: 1;
filter: grayscale(0%);
}
.bank-logo img {
max-width: 100%;
max-height: 60px;
width: auto;
object-fit: contain;
}
@media (max-width: 1200px) {
.leading-financial .section-title {
font-size: 32px;
}
.bank-logo {
padding: 0 20px;
height: 70px;
}
.bank-logo img {
max-height: 50px;
}
}
@media (max-width: 768px) {
.leading-financial .commonHeadingBlock {
margin-bottom: 30px;
}
.leading-financial .section-title {
font-size: 24px;
}
.leading-financial .section-title br {
display: none;
}
.bank-logo {
padding: 0 15px;
height: 60px;
}
.bank-logo img {
max-height: 40px;
}
}
/* Hear from Clients Section */
.hear-from-clients {
background-color: #fff;
overflow: hidden;
}
.hear-from-clients .commonHeadingBlock {
text-align: center;
justify-content: center;
margin-bottom: 50px;
}
.hear-from-clients .section-title {
font-size: 36px;
line-height: 1.3;
text-align: center;
margin: 0 auto;
}
/* Client Testimonials Slider */
.client-testimonials-slider {
width: 100%;
padding: 10px 0 0px;
overflow: visible;
}
.client-testimonials-slider .swiper-wrapper {
align-items: stretch;
}
.testimonial-card {
position: relative;
background: #FFFFFF;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
height: 100%;
transition: transform 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
}
.testimonial-video {
position: relative;
width: 100%;
overflow: hidden;
/* Add fixed aspect ratio for the video container */
aspect-ratio: 16/10;
}
.testimonial-video img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.testimonial-video .video-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
border: none;
cursor: pointer;
z-index: 2;
transition: transform 0.2s ease;
}
.testimonial-video .video-play-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.testimonial-video .client-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: none; /* Hidden by default */
z-index: 1;
}
.testimonial-info {
padding: 20px 20px 0;
}
.testimonial-info .client-name {
font-size: 16px;
font-weight: 600;
color: #101828;
margin: 0 0 5px;
font-family: var(--font-onest);
}
.testimonial-info p {
font-size: 12px;
color: #576272;
margin: 0;
font-family: var(--font-onest);
}
.testimonial-quote {
padding: 15px 20px;
display: none;
}
.testimonial-quote p {
font-size: 14px;
line-height: 1.5;
color: #576272;
margin: 0;
font-family: var(--font-onest);
}
.client-testimonials-slider .swiper-pagination {
bottom: 0;
}
.client-testimonials-slider .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #DDE1E6;
opacity: 1;
}
.client-testimonials-slider .swiper-pagination-bullet-active {
width: 24px;
border-radius: 20px;
background: #969696;
}
.testimonial-wrap .testimonial-quote{display:block;flex:2;}
.testimonial-wrap {
display: flex;
position: absolute;
bottom: 20px;
background: #fff;
margin: 0 20px;
border-radius: 10px;
}
.testimonial-wrap .testimonial-info{
padding: 15px 20px 15px;
flex:1;
}
.hear-from-clients .commonHeadingBlock{text-align: center;}
.hear-from-clients .commonHeadingBlock .common-heading-row{justify-content: center;width:100%;}
/* Responsive styles */
@media (max-width: 1200px) {
.hear-from-clients .section-title {
font-size: 32px;
}
}
@media screen and (max-width:1025px){
.testimonial-quote p{font-size: 12px;}
}
@media screen and (max-width:991px){
.testimonial-wrap{bottom: 65px;border-radius: 7px;}
.testimonial-wrap .testimonial-info{padding: 15px;}
.testimonial-quote{display:block; padding: 15px 15px 0 0 ;}
.testimonial-card{background:transparent;box-shadow:none; border-radius: 0;}
.testimonial-video img{border-radius:16px;}
.testimonial-video video{border-radius:16px;}
}
@media (max-width: 768px) {
.testimonial-card:hover{transform:none;}
.hear-from-clients .commonHeadingBlock {
margin-bottom: 15px;
}
.hear-from-clients .section-title {
font-size: 24px;
}
.testimonial-info {
padding: 15px 15px 0;
}
.testimonial-wrap .testimonial-quote{display:none;}
.testimonial-quote {
display: block;
}
.testimonial-wrap .testimonial-info{padding: 10px;}
.testimonial-info .client-name{font-size: 14px;margin-bottom: 2px;}
/* .testimonial-video{aspect-ratio: auto;} */
}
/* Add new CSS to fix the video display issue */
.video-playing .client-video {
display: block !important;
}
.video-playing img,
.video-playing .video-play-btn {
display: none !important;
}
/* CSS for video controls and appearance */
.video-playing .client-video {
display: block !important;
z-index: 2; /* Ensure video is above thumbnail */
}
.video-playing img,
.video-playing .video-play-btn {
display: none !important;
}
/* Add pointer cursor to videos so users know they can be clicked */
.client-video {
cursor: pointer;
}
/* Build integrate section */
.build-integrate-section{
background: radial-gradient(47.52% 79.2% at 50% 50%, #5B80F3 0%, #384F95 0%, #000000 56.82%);
}
.build-integrate-section .commonHeadingBlock .section-title{color:#E6E8EA;}
.build-integrate-section .commonHeadingBlock .smallHeading{color:#E6E8EA;white-space: nowrap;}
/* Build Integrate Section Styles */
.build-integrate-section {
background: radial-gradient(47.52% 79.2% at 50% 50%, #5B80F3 0%, #384F95 0%, #000000 56.82%);
color: #fff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.build-integrate-section .commonHeadingBlock {
margin-bottom: 60px;
}
.build-integrate-section .common-heading-icon {
width: 32px;
height: 32px;
background: #DCDC5B;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
}
.build-integrate-section .smallHeading {
color: #E6E8EA;
}
.build-integrate-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 40px;
}
.integration-features {
display: flex;
flex-direction: column;
gap: 32px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 24px;
}
.feature-icon img {
width: 70px;
height: 70px;
}
.feature-content h3 {
color: #E6E8EA;
font-size: 20px;
font-weight: 500;
margin-bottom: 8px;
font-family: var(--font-onest);
}
.feature-content p {
color: #A1A8B3;
font-size: 16px;
line-height: 1.5;
font-weight: 300;
font-family: var(--font-onest);
}
.api-code {
width: 100%;
}
.code-header {
display: flex;
gap: 10px;
justify-content: space-between;
align-items: center;
padding: 8px 15px;
background: linear-gradient(90deg, #96CDE5 0%, #648FD4 51.16%, #8DC2E1 100%);
max-width: 220px;
border-radius: 30px;
}
.code-label {
color: #01203C;
font-size: 16px;
font-weight: 500;
}
.change-language {
background: none;
font-family: var(--font-onest);
border: none;
font-weight: 400;
color: #01203C;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
padding: 0;
}
.code-content {
padding: 24px 0 0 0;
}
.code-line {
display: flex;
gap: 16px;
margin-bottom: 17px;
}
.line-number {
color: #576272;
font-size: 14px;
min-width: 20px;
text-align: right;
}
.code-line span {
color: #E6E8EA;
font-size: 14px;
font-weight: 300;
font-family: var(--font-onest);
}
.code-line:nth-child(3) span.code-text, .code-line:nth-child(5) span.code-text{
color:#DCDC5B;
}
.build-integrate-actions {
display: flex;
gap: 24px;
justify-content: center;
margin-top: 48px;
}
.build-integrate-section .btn-default {
color: #fff;
border-color: #fff;
}
.build-integrate-section .btn-default:hover {
color: #000;
background: #fff;
}
.build-integrate-section .btn-default:hover .arrow-icon path {
stroke: #000;
}
/* Responsive Styles */
@media (max-width: 1024px) {
.build-integrate-content {
gap: 40px;
}
.cta div{margin-top: 25px;}
.feature-content h3 {
font-size: 18px;
}
.feature-content p {
font-size: 15px;
}
.do-not-change .btn-default::after, .do-not-change .btn-default{
background: transparent;
}
}
@media screen and (max-width:991px) {
.ylogo{justify-self: center;}
.cta div{display: block !important;text-align: left;}
}
@media (max-width: 768px) {
.build-integrate-section {
padding: 60px 0;
}
.build-integrate-content {
grid-template-columns: 1fr;
gap: 40px;
}
.integration-features {
gap: 24px;
}
.feature-item {
gap: 16px;
}
.feature-icon {
flex: 0 0 60px;
}
.feature-icon img {
width: 60px;
height: 60px;
}
}
@media (max-width: 480px) {
.build-integrate-actions .btn-default {
width: 100% !important;
}
.build-integrate-actions {
flex-direction: column;
gap: 16px;
}
.build-integrate-section {
padding: 40px 0;
}
}
.ylogo {
justify-self: center;
position: relative;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.ylogo-container {
position: relative;
width: 100%;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}
.ylogo-bg {
position: absolute;
width: 100%;
height: 100%;
/* animation: rotateBackground 20s linear infinite; */
}
.ylogo-bg img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ylogo-main {
position: relative;
z-index: 1;
width: 40%;
height: 40%;
display: flex;
align-items: center;
justify-content: center;
}
.ylogo-main img {
width: 100%;
height: 100%;
object-fit: contain;
}
@keyframes rotateBackground {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.ylogo-main-bg{
display: none;
}
/* Responsive adjustments */
@media (max-width: 991px) {
.ylogo {
max-width: 300px;
}
}
@media (max-width: 767px) {
.ylogo-main-bg{
display: block;
}
.ylogo-container{
display: none;
}
}
.card .card-content a{
pointer-events: none;
}
.card.active .card-content a{
pointer-events: auto;
}
.tab-heading{position: relative;}
.tab-heading:before {
content: "";
width: 32px;
height: 75px;
background: #fff;
display: block;
position: absolute;
left: -8px;
top: 5px;
}
/* Responsive for large screen */
@media screen and (min-width:1790px){
.container{
max-width: 88%;
}
.logo img{height: auto;}
.nav-links a{font-size: 16px;gap: 10px;}
.dropdown-arrow::after{width: 7px;height: 7px;border-width: 1px;top: 32%;}
.button-wrapper .btn-content{font-size: 16px;}
.button-wrapper .btn-default{padding: 12px 38px;}
/* .btn-default{padding: 12px 38px;} */
.hero-title{font-size: 100px;line-height: 120px;}
.word-scroll-item{font-size: 97.2px;}
.hero-content p{font-size: 28px;line-height: 40px;margin-top: 15px;}
.hero-section .btn-default {
padding: 14px 31px;
font-size: 18px;
}
.counter-item p{font-size: 18px;line-height: 28px;}
.counter-number{font-size: 35px;}
.commonHeadingBlock .section-title{font-size: 46px;}
.commonHeadingBlock .smallHeading{font-size: 20px;line-height: 28px;}
.cards-container .card{height: 716px;}
.circle-icon img{max-width: 450px;}
.card-title{font-size: 42px;}
.card-subtitle{font-size: 24px;}
.card-details p{font-size: 18px;max-width: 700px;}
.tab-item.active .tab-content h3{font-size: 24px;}
.tab-heading, .tab-item{padding: 34px;}
.solutions-tabs{flex: 0 0 25%;}
.solutions-video{padding-left: 60px;}
.freedemo .btn-default{padding: 10px 27px;font-size: 18px;}
.ai-product-heading h3{font-size: 28px;}
.ai-product-heading p{font-size: 18px;max-width: 60%;}
.ai-solutions-content-left .commonHeadingBlock{gap: 233px;}
.ai-product-content h4{font-size: 24px;margin-bottom: 12px;}
.ai-product-content p{font-size: 18px;}
.ai-product-card{padding: 23px;}
.icon-wrapper{margin-bottom: 12px;}
.icon-wrapper img{width: 100%;height: 100%;object-fit: none;}
.testimonial-info .client-name{font-size: 20px;}
.testimonial-quote p, .testimonial-info p{font-size: 16px;}
.feature-content h3{font-size: 24px;}
.feature-content p, .change-language{font-size: 18px;}
.code-label{font-size: 20px;}
.code-header{max-width: 260px;}
.code-header svg{width: 16px;height: 14px;}
.code-line span{font-size: 18px;}
.code-line{margin-bottom: 25px;}
.build-integrate-section .btn-default, .news-section .btn-default{font-size: 18px;}
.news-card-badge{font-size: 16px;}
.news-card-title{font-size: 22px;line-height: 26px}
span.news-card-date, span.news-card-read{font-size: 16px;}
.news-card-link{font-size: 16px;}
.makegreat-heading{font-size: 36px;}
.makegreat-title{font-size: 56px;}
.makegreat-bg .btn-default{font-size: 18px;}
.site-footer .footer-col h3{font-size: 18px;}
.site-footer .footer-col ul li a{font-size: 16px;}
.site-footer .contact-info{font-size: 16px;}
}
@media (min-width: 1799px) {
.blankdiv{padding-top: 0;height: 106px;}
.hero-section {
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0 100px 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
text-align: center;
position: relative;
overflow: hidden;
}
.path-container {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.curve-path {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
min-width: 1920px;
transform: translateX(0);
}
.desktop-path {
width: 100%;
height: auto;
position: absolute;
right: 0;
top: 41%;
transform: translateY(-50%);
}
.mobile-path {
display: none;
}
.ball {
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
}
/* AI-Driven Animation */
.ai-driven-animation {
position: absolute;
/* z-index: 999; */
max-width: 18%;
top: 46%;
right: 0;
opacity: 0.7;
}
.ai-driven-animation img {
max-width: 100%;
height: 100%;
}
@media (max-width: 1200px) {
.ai-driven-animation {
max-width: 25%;
top: 30px;
}
}
@media (max-width: 992px) {
.ai-driven-animation {
max-width: 22%;
top: 40px;
right: 2%;
}
}
@media (max-width: 768px) {
.ai-driven-animation {
display: none;
}
}
.products-section {
position: relative;
overflow: visible;
}
/* AI Solutions Animation */
@media screen and (min-width:992px){
.ai-solutions-section{padding-top: 100px;}
.makegreat-section{padding-top: 70px;padding-bottom: 100px;}
}
.ai-solutions-animation {
position: absolute;
z-index: -1;
max-width: 40%;
top: 0px;
left: 0;
opacity: 1;
}
.ai-solutions-animation img {
width: 300px;
max-width: 280px;
height: auto;
border-radius: 8px;
}
@media (min-width: 1790px) {
.ai-solutions-animation img{width: 370px;max-width: 100%;}
}
@media (max-width: 1200px) {
.ai-solutions-animation {
max-width: 20%;
top: 60px;
}
}
@media (max-width: 992px) {
.ai-solutions-animation {
max-width: 18%;
top: 70px;
right: 3%;
}
}
@media (max-width: 768px) {
.ai-solutions-animation {
display: none;
}
}
/* AI Solutions Section */
/* Resources Animation */
.resources-animation {
position: absolute;
z-index: 1;
max-width: 100%;
width: 100%;
top: -150px;
right: 0;
opacity: 0.8;
pointer-events: none;
}
.resources-animation img {
/* width: 100%; */
max-width: 700px;
height: auto;
pointer-events: none;
}
@media (min-width: 1790px) {
.resources-animation img{max-width: 100%;}
}
@media (max-width: 768px) {
.resources-animation {
display: none;
}
}
/* News Section */
/* News Section Wrapper */
.news-section-wrapper {
position: relative;
overflow: visible;
/* margin-top: 100px;
padding-bottom: 50px; */
}
.resources-animation {
position: absolute;
z-index: 1;
width: fit-content;
top: -340px;
right: 0;
mix-blend-mode: darken;
opacity: 0.9;
overflow: visible;
/* display: none; */
}
.resources-animation img {
width: 100%;
height: auto;
/* transform: scale(1.5); */
transform-origin: top right;
}
@media (max-width: 768px) {
.resources-animation {
display: none;
}
}
/* MakeGreat Animation */
.makegreat-section {
position: relative;
overflow: visible;
}
.makegreat-animation {
position: absolute;
z-index: 0;
max-width: 40%;
height: auto;
top: 0;
left: -100px;
right: 0;
opacity: 1;
overflow: hidden;
}
.makegreat-animation img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
}
@media (max-width: 1200px) {
.makegreat-animation {
top: -40px;
}
}
@media (max-width: 992px) {
.makegreat-animation {
top: -20px;
}
}
@media (max-width: 768px) {
.makegreat-animation {
display: none;
}
}
@media screen and (max-width: 480px) {
.ball {
width: 25vw;
height: 25vw;
}
}
@media (max-width: 991px) {
.word-scroll-container {
height: 1em;
margin-left: 3px;
padding-bottom: 0;
}
.word-scroll-item {
height: 1em;
padding-bottom: 0;
}
}
@media (max-width: 480px) {
.word-scroll-container {
height: 1em;
margin-left: 2px;
padding-bottom: 0;
}
.word-scroll-item {
height: 1em;
padding-bottom: 0;
}
.stats-section{padding-top: 0;}
}
/* Mobile ball sizes */
.tab-list .tab-item:first-child{
border-radius:24px 24px 0 0;
}
.smallHeading span{
color: #000;
}
.unit {
font-weight: 700;
color: #232d3b;
margin-left: 2px;
}
.plus {
color: #EE6149;
font-weight: 700;
margin-left: 2px;
}
/* krishna css start */
@media screen and (min-width:1790px) {
.commonHeadingBlock .common-heading-row{padding-top: 13px;}
}
@media screen and (max-width:1788px) {
.commonHeadingBlock .common-heading-row{padding-top: 7px;}
}
@media screen and (max-width:1024px) {
.commonHeadingBlock .common-heading-row{padding-top: 4px;}
}
@media screen and (max-width:991px) {
.commonHeadingBlock .common-heading-row{padding-top: 0px;}
}