:root {
--brand-blue-700: #0040B8; /* primary accent seen in Figma */
--brand-indigo-900: #0C0249; /* deep heading/ink */
--hero-bg-1: #b0d4fb;
--hero-bg-2: #06358a;
--hero-bg-3: #0e024d;
--muted-ink: #1e1e1e;
/* Global Padding System */
--global-padding-xs: 10px;
--global-padding-sm: 15px;
--global-padding-md: 20px;
--global-padding-lg: 30px;
--global-padding-xl: 40px;
--global-padding-xxl: 50px;
/* Responsive Padding Scale */
--container-padding: var(--global-padding-md);
--section-padding: var(--global-padding-lg);
--hero-padding: var(--global-padding-lg);
}
html, body {
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
color: var(--muted-ink);
background: #fff;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Reset Bootstrap and default margins */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
}
/* Ensure no unwanted spacing */
.container-fluid {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
width: 100%;
max-width: 1400px;
}
.row {
margin-left: calc(-1 * var(--container-padding));
margin-right: calc(-1 * var(--container-padding));
width: calc(100% + (2 * var(--container-padding)));
}
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto,
.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.top-strip {
background: linear-gradient(142deg, #ffc831 47%, #fe8d03 88%);
color: #0c0249;
font-size: 16px;
line-height: 1.5;
padding: 10px 0;
}
/* Navbar */
.main-nav {
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(216,222,232,1) 68%);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.main-nav .container { position: relative; }
.nav-center {
position: absolute;
left: 55%;
transform: translateX(-50%);
top: 50%;
transform-origin: center;
transform: translate(-50%, -50%);
}
.nav-center .nav-items { gap: 35px; }
.navbar-brand .brand-circle {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}
.navbar-brand .brand-text {
font-family: 'ADLaM Display', cursive;
font-size: 30px;
color: #0c0249;
}
.nav-items .nav-link {
font-size: 17px;
letter-spacing: -0.025em;
color: #0c0249;
}
.nav-items .nav-link:hover {
color: var(--brand-blue-700);
}
.partner-btn {
border-radius: 10px;
border-color: var(--brand-blue-700);
color: var(--brand-blue-700);
}
.partner-btn:hover {
background: var(--brand-blue-700);
color: #fff;
}
/* Remove arrows */
.carousel-navigation {
display: none;
}
/* Indicators row */
.carousel-indicators {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
flex-wrap: nowrap; /* Keep in one row for scroll */
margin-bottom: 6rem;
overflow-x: auto; /* Allow horizontal scrolling on small screens */
scrollbar-width: none; /* Hide scrollbar in Firefox */
}
.carousel-indicators .indicator {
flex: 0 0 auto; /* Prevent shrinking */
width: 160px;
height: 85px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(6px);
cursor: pointer;
transition: all 0.3s ease;
/* ADD THIS */
overflow: hidden;
}
.carousel-indicators .indicator img {
/* ADD THIS */
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-indicators .indicator.active {
background: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
}
.carousel-indicators .nav-arrow-prev,
.carousel-indicators .nav-arrow-next {
background: none;
border: none;
cursor: pointer;
color: #fff; /* Or your preferred arrow color */
padding: 10px;
display: flex; /* Centers the SVG inside the button */
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.carousel-indicators .nav-arrow-prev:hover,
.carousel-indicators .nav-arrow-next:hover {
opacity: 0.8;
transform: scale(1.1);
}
@media (max-width: 480px) {
.carousel-indicators .nav-arrow-prev,
.carousel-indicators .nav-arrow-next {
display: none;
}
.carousel-indicators {
justify-content: flex-start;
gap: 10px;
}
.carousel-indicators .indicator {
width: calc(33.33% - 12px); /* show 3 per row */
/* height: 70px; */
}
}
/* Mobile navbar improvements */
@media (max-width: 991.98px) {
.main-nav .container {
padding: 10px 15px;
}
.navbar-brand .brand-circle {
width: 35px;
height: 35px;
}
.navbar-brand .brand-text {
font-size: 24px;
}
.navbar-toggler {
border: none;
padding: 4px 8px;
background: none;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler-icon {
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.nav-center {
position: static;
transform: none;
}
.nav-center .nav-items {
gap: 0;
}
.nav-center .nav-link {
font-size: 16px;
padding: 12px 15px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.nav-center .nav-link:last-child {
border-bottom: none;
}
.partner-btn {
margin: 10px 15px;
padding: 10px 20px;
text-align: center;
}
}
@media (max-width: 768px) {
.main-nav .container {
padding: 8px 15px;
}
.navbar-brand .brand-circle {
width: 30px;
height: 30px;
}
.navbar-brand .brand-text {
font-size: 20px;
}
.navbar-toggler {
padding: 2px 6px;
}
.navbar-toggler-icon {
width: 18px;
height: 18px;
}
.nav-center .nav-link {
font-size: 15px;
padding: 10px 15px;
}
.partner-btn {
margin: 8px 15px;
padding: 8px 16px;
font-size: 14px;
}
}
/* Hero */
.hero {
position: relative;
padding: 20px 0 0;
background:
linear-gradient(135deg, rgba(176, 212, 251, 0.7) 0%, rgba(0, 64, 184, 0.8) 93%),
url('./assets/img/bg.jpg') center/cover no-repeat;
color: #0c0249;
margin: 0;
width: 100%;
overflow: hidden;
}
.hero .container {
max-width: 1400px;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
}
.hero .row {
margin-left: calc(-1 * var(--container-padding));
margin-right: calc(-1 * var(--container-padding));
width: calc(100% + (2 * var(--container-padding)));
}
.hero .col-lg-6 {
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.hero-title {
font-family: 'Abril Fatface', serif;
font-size: 72px;
line-height: 1.18;
color: #0c0249;
margin-bottom: 10px;
white-space: nowrap;
}
.hero-sub {
font-size: 60px;
font-weight: 500;
color: #0c0249;
margin-bottom: 20px;
}
/* .hero-content {
margin-top: -150px;
} */
.hero-section .row {
width: 100%;
align-items: end; /* vertically center */
gap: 2rem; /* extra gap beyond gutter */
}
.hero-eyebrow {
/* text-transform: lowercase; */
letter-spacing: 0.0625em;
font-weight: 700;
color: #000;
margin-bottom: 20px;
font-size: 16px;
}
.hero-copy {
max-width: 60ch;
color: #000;
font-size: 16px;
line-height: 1.6;
margin-bottom: 30px;
}
.hero-visual {
margin: 0 auto;
margin-top: 0;
display: flex;
align-items: flex-start;
justify-content: center;
}
.hero-mobile-group {
height: 600px;
width: 700px;
@media (max-width: 768px) {
height: 400px;
width: 450px;
}
}
.mobile-hero {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 0;
}
/* Desktop layout - show desktop content in title section */
@media (min-width: 992px) {
.hero-title-section {
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-sections {
gap: 3rem !important;
}
}
@media (max-width: 480px) {
.mobile-hero {
padding-top: 0;
margin-top: 0;
}
.hero-visual {
margin-top: 0px;
padding-top: 0px;
}
}
/* Phone stage (animated) */
.phone-stage {
position: relative;
width: 100%;
height: 900px;
display: flex;
justify-content: center;
align-items: flex-start;
max-width: 100%;
padding-top: 50px;
}
/* Background rings - removed for clean design */
/* Phone mockups */
.phone {
position: absolute;
width: 250px;
height: 500px;
opacity: 1;
transform: translateY(0) scale(0.92);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.phone .phone-bezel {
width: 100%;
height: 100%;
}
.phone .phone-screen {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Phone positioning with overlapping effect */
/* Two-phone composition with main phone in foreground (left side, bigger, straight) */
.phone-main {
top: 40%;
left: 35%;
transform: translateX(-50%) translateY(0) scale(1.22) rotate(0deg);
z-index: 3;
}
.phone-left {
top: 25%;
left: 60%;
transform: translateX(-50%) translateY(0) scale(0.9) rotate(15deg);
z-index: 2;
opacity: 0.85;
}
.phone-right {
display: none; /* Hide the third phone for cleaner two-phone layout */
}
/* Animation states */
.animate-phones .phone-main {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1.1) rotate(0deg);
animation: float-main 4.6s ease-in-out infinite;
}
.animate-phones .phone-left {
opacity: 0.85;
transform: translateX(-50%) translateY(0) scale(0.7) rotate(25deg);
animation: float-left 5s ease-in-out infinite;
}
/* Floating animations */
@keyframes float-main {
0%, 100% { transform: translateX(-50%) translateY(0) scale(1.1) rotate(0deg); }
50% { transform: translateX(-50%) translateY(-10px) scale(1.24) rotate(2deg); }
}
@keyframes float-left {
0%, 100% { transform: translateX(-50%) translateY(0) scale(0.7) rotate(15deg); }
50% { transform: translateX(-50%) translateY(-8px) scale(0.83) rotate(17deg); }
}
@keyframes float-right {
0%, 100% { transform: translateY(0) scale(1) rotate(10deg); }
50% { transform: translateY(-6px) scale(1.01) rotate(12deg); }
}
/* Golden Ribbon with Coin Comparison */
.coin-ribbon {
position: absolute;
bottom: -22%;
left: 40%;
transform: translateX(-50%);
z-index: 10;
min-width: 80%;
max-width: 90%;
display: flex;
justify-content: center;
align-items: center;
}
.ribbon-image {
width: 100%;
height: auto;
max-height: 100px;
object-fit: contain;
}
.ribbon-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-direction: row;
z-index: 11;
white-space: nowrap;
}
.coin-icon {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 50%;
}
.mx-coin {
background: linear-gradient(135deg, #ff8c00, #ffa500);
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
font-size: 16px;
font-family: 'Arial', sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.rupee-coin {
background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
padding: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.ribbon-text {
font-family: 'Georgia', serif;
font-weight: 600;
font-size: 18px;
color: #0c0249;
text-align: center;
letter-spacing: 0.5px;
text-shadow: none;
}
@media (max-width: 768px) {
.coin-ribbon {
min-width: 70%;
max-width: 80%;
bottom: 5px;
}
.ribbon-image {
max-height: 80px;
}
.ribbon-content {
gap: 10px;
}
.coin-icon {
width: 32px;
height: 32px;
}
.ribbon-text {
font-size: 16px;
font-family: 'Georgia', serif;
color: #0c0249;
}
}
.hero-badges .store-badge {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 12px;
text-decoration: none;
color: #fff;
}
.store-badge .texts small { display: block; line-height: 1; opacity: 0.9; }
.store-badge .texts strong { display: block; line-height: 1.2; }
.badge-app { background: #090909; }
.badge-play { background: #090909; }
.badge-app .icon.apple {
width: 21px; height: 24px;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
background: #fff;
}
.badge-play .triangle {
width: 24px; height: 24px;
background: conic-gradient(#00A1FF 0 25%, #00D2FF 0 50%, #FFBE00 0 75%, #FF3A44 0 100%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Store Badge Images - New Implementation */
.store-badge-image {
display: inline-block;
text-decoration: none;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.store-badge-image:hover {
transform: translateY(-2px);
opacity: 0.9;
text-decoration: none;
}
.store-badge-img {
height: 50px;
width: auto;
max-width: 150px;
object-fit: contain;
}
/* Hero section specific styles */
.hero-badges .store-badge-image {
display: inline-block;
}
.hero-badges .store-badge-img {
height: 50px;
width: auto;
max-width: 150px;
}
/* Ecosystem section specific styles */
.ecosystem-store-badges .store-badge-image {
display: inline-block;
}
.ecosystem-store-badges .store-badge-img {
height: 45px;
width: auto;
max-width: 140px;
}
/* Footer section specific styles */
.footer-badges .store-badge-image {
display: inline-block;
}
.footer-badges .store-badge-img {
height: 42px;
width: auto;
max-width: 140px;
}
/* Marquee ticker */
.ticker {
overflow: hidden;
white-space: nowrap;
background: linear-gradient(142deg, #fff 47%, #f2f2f2 88%);
border-top: 1px solid rgba(0,0,0,0.06);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ticker-inner {
display: inline-flex;
gap: 48px;
padding: 16px 0;
color: #0040b8;
animation: ticker 30s linear infinite;
}
.ticker-inner span { text-transform: uppercase; letter-spacing: .03em; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* How it works - now part of unified hero section */
.how-content {
margin-top: -80px;
padding: 0px 0;
position: relative;
padding-bottom: 3rem;
}
.how-content .container {
max-width: 1400px;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
margin-left: auto;
margin-right: auto;
}
/* Grid alignment improvements */
.how-content .row.justify-content-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.how-content .col-lg-4 {
display: flex;
flex-direction: column;
}
.loyalty-banner {
position: relative;
width: 100%;
height: 50px;
background: rgba(255, 255, 255, 0.95);
margin: -40px 0 60px 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transform: rotate(-1.5deg);
z-index: 10;
overflow: hidden;
}
.loyalty-svg {
display: none; /* Hide SVG, we'll use CSS text instead */
}
.loyalty-text {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 25px;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
color: #0040B8;
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
overflow: hidden;
animation: scroll-text 30s linear infinite;
width: 200%;
}
.loyalty-text span {
display: inline-block;
padding: 0 25px;
flex-shrink: 0;
}
@keyframes scroll-text {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}
.how-cap {
font: 700 14px/1 'Poppins';
letter-spacing: .071em;
text-transform: uppercase;
color: #001d6c;
margin-bottom: 16px;
position: relative;
z-index: 2;
}
.how-desc {
color: #000;
font-size: 16px;
line-height: 1.6;
margin: 0;
max-width: 60ch;
position: relative;
z-index: 2;
}
.how-card {
border-radius: 20px;
background: #fff;
box-shadow: 0 8px 25px rgba(22, 57, 132, 0.15);
padding: 0;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
min-height: 400px;
}
.how-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(22, 57, 132, 0.2);
}
.how-card-content {
padding: 30px 25px 50px;
position: relative;
/* flex: 1; */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.how-card-image {
position: relative;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
overflow: hidden;
padding: 0px 20px 20px;
}
.illustration-container {
width: 220px;
height: 220px;
border-radius: 50%;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.card-illustration {
max-width: 90%;
max-height: 90%;
object-fit: contain;
transition: transform 0.3s ease;
position: relative;
z-index: 2;
}
.how-card:hover .card-illustration {
transform: scale(1.05);
}
.how-card .how-title {
color: #0040b8;
font: 700 20px/1.25 'Poppins';
margin: 8px 0 0 0;
position: relative;
z-index: 2;
}
.how-card .how-copy {
color: #2d3748;
margin: 12px 0 0 0;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
}
.how-copy{
padding-top: 1rem;
}
.how-card .small {
color: rgba(26, 54, 93, 0.15);
font-family: 'Abril Fatface', serif;
font-size: 72px;
line-height: 1;
position: absolute;
top: 20px;
left: 25px;
z-index: 1;
font-weight: 400;
letter-spacing: -2px;
}
/* Responsive Padding Adjustments */
@media (max-width: 991.98px) {
:root {
--container-padding: var(--global-padding-md);
--section-padding: var(--global-padding-md);
--hero-padding: var(--global-padding-md);
}
.hero-title {
font-size: 52px;
white-space: nowrap;
}
.hero-sub { font-size: 40px; }
.phone-stage { height: 500px; }
.phone { width: 180px; height: 360px; }
.phone-main { top: 20%; left: 35%; }
.phone-left { left: 55%; top: 20%; }
.coin-ribbon {
min-width: 60%;
max-width: 75%;
bottom: 15px;
}
.ribbon-image {
max-height: 90px;
}
.how {
padding: 60px 0;
}
.loyalty-banner {
height: 60px;
}
.how-card-image {
height: 220px;
}
.illustration-container {
width: 200px;
height: 200px;
}
.how-card .small {
font-size: 60px;
}
}
@media (max-width: 768px) {
.hero {
padding: 30px 0 40px;
min-height: 100vh;
}
.hero .container {
max-width: 100%;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
margin: 0;
}
.hero .row {
flex-direction: column;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.hero .col-lg-6 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
padding-left: 0;
padding-right: 0;
}
.hero-title-section {
text-align: center;
order: 1;
padding: 0 15px;
margin-bottom: 20px;
}
.mobile-hero {
order: 2;
margin-bottom: 40px;
}
.hero-details-section {
text-align: center;
order: 3;
padding: 0 15px;
margin-top: 20px;
}
.hero-title {
font-size: 36px;
line-height: 1.1;
margin-bottom: 10px;
white-space: nowrap;
}
.hero-sub {
font-size: 28px;
margin-bottom: 15px;
}
.hero-eyebrow {
font-size: 14px;
margin-bottom: 15px;
}
.hero-copy {
font-size: 14px;
line-height: 1.5;
margin-bottom: 20px;
}
.hero-visual {
min-height: 3=200px;
margin-top: -20px;
padding-top: 0px;
position: relative;
margin-bottom: 0px;
}
.phone-stage {
height: 500px;
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.phone {
width: 120px;
height: 240px;
position: relative;
transform: none;
}
.phone-main {
position: relative;
top: auto;
left: auto;
transform: none;
order: 1;
}
.phone-left {
position: relative;
left: auto;
top: auto;
transform: none;
order: 2;
}
.coin-ribbon {
min-width: 70%;
max-width: 80%;
bottom: 10px;
position: relative;
margin-top: 20px;
}
.ribbon-image {
max-height: 70px;
}
.ribbon-content {
gap: 8px;
}
.coin-icon {
width: 28px;
height: 28px;
}
.ribbon-text {
font-size: 14px;
font-family: 'Georgia', serif;
color: #0c0249;
}
.hero-badges {
flex-direction: row;
align-items: center;
gap: 15px;
margin-top: 20px;
justify-content: center;
flex-wrap: wrap;
}
.store-badge {
padding: 8px 12px;
font-size: 12px;
width: 200px;
justify-content: center;
}
/* Store badge images mobile styles */
.store-badge-img {
height: 40px;
max-width: 120px;
}
.hero-badges .store-badge-img {
height: 40px;
max-width: 120px;
}
.ecosystem-store-badges .store-badge-img {
height: 35px;
max-width: 110px;
}
.footer-badges .store-badge-img {
height: 35px;
max-width: 110px;
}
.how {
padding: 40px 0;
}
.loyalty-banner {
height: 40px;
}
.shells {
height: 60px;
margin-top: -5rem;
}
.how-content{
margin-top: 4rem;
}
/* Reduce gaps between how-cards on mobile */
.how-content .row.gy-4 {
--bs-gutter-y: 1rem;
}
.how-card {
min-height: 320px;
margin-bottom: 1rem;
}
.how-card-image {
height: 160px;
}
.illustration-container {
width: 140px;
height: 140px;
}
.how-card-content {
padding: 20px 18px 15px;
}
.how-card .small {
font-size: 48px;
top: 12px;
left: 18px;
}
.how-card .how-title {
font-size: 18px;
margin: 10px 0 6px 0;
}
.how-card .how-copy {
font-size: 14px;
line-height: 1.3;
margin: 6px 0 0 0;
}
}
@media (max-width: 768px) {
.how {
padding: 50px 0;
}
.loyalty-banner {
height: 45px;
}
/* Reduce gaps between how-cards on mobile */
.how-content .row.gy-4 {
--bs-gutter-y: 1rem;
}
.how-card {
min-height: 320px;
margin-bottom: 1rem;
}
.how-card-image {
height: 200px;
}
.illustration-container {
width: 180px;
height: 180px;
}
.how-card-content {
padding: 20px 18px 15px;
}
.how-card .small {
font-size: 48px;
top: 12px;
left: 18px;
}
.how-card .how-title {
font-size: 18px;
margin: 10px 0 6px 0;
}
.how-card .how-copy {
font-size: 14px;
line-height: 1.3;
margin: 6px 0 0 0;
}
}
/* Footer */
.site-footer { padding: 64px 0; margin-top: 56px; border-top: 1px solid rgba(0,0,0,0.06); }
.site-footer--light { background: #ffffff; color: #1a1a1a; }
.site-footer--light .footer-brand .brand-circle { width: 42px; height: 42px; }
.site-footer--light .footer-brand .brand-text { color: #0c0249; font-size: 28px; }
.site-footer--light .footer-tagline { color: #495164; max-width: 42ch; }
.site-footer--light .footer-bullets { color: #495164; padding-left: 18px; margin: 0; }
.site-footer--light .footer-bullets li { margin: 6px 0; }
.site-footer--light .footer-bullet-point {
color: #495164;
margin: 0 0 20px 0;
font-size: 14px;
line-height: 1.5;
}
.site-footer--light .footer-bullet-list {
color: #495164;
padding-left: 18px;
margin: 0;
list-style-type: disc;
}
.site-footer--light .footer-bullet-list li {
margin: 6px 0;
font-size: 16px;
line-height: 1.5;
}
.site-footer--light .download-cta {
color: #495164;
font-size: 16px;
font-weight: 500;
text-align: center;
margin: 0;
}
.site-footer--light .footer-description {
text-align: left;
margin-bottom: 20px;
}
.site-footer--light .footer-head { color: #0c0249; font: 700 14px/1 'Poppins'; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.site-footer--light .footer-list { list-style: none; padding: 0; margin: 0; }
.site-footer--light .footer-list li { margin: 10px 0; }
.site-footer--light .footer-list a { color: #263041; text-decoration: none; }
.site-footer--light .footer-list a:hover { color: #0040B8; }
.site-footer--light .footer-badges {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 20px;
}
.site-footer--light .footer-badges .badge-official {
display: inline-flex;
align-items: center;
justify-content: center;
}
.site-footer--light .socials {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 20px;
}
.site-footer--light .social {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: #263041;
background: rgba(0,0,0,0.06);
}
.site-footer--light .social:hover {
color: #0c0249;
background: rgba(0,0,0,0.12);
}
.site-footer--light .copyright {
text-align: center;
margin-top: 20px;
}
.site-footer--light .footer-divider { border-color: rgba(0,0,0,0.08); margin: 24px 0; }
.site-footer--light .footer-bottom { color: #5b697f; }
.site-footer--light .footer-inline { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; }
.site-footer--light .footer-inline a { color: #5b697f; text-decoration: none; }
.site-footer--light .footer-inline a:hover { color: #0040B8; }
.footer-contact span { color: #5b697f; display: inline-block; min-width: 70px; }
.footer-contact .contact-item {
display: flex;
gap: 6px;
align-items: flex-start;
margin: 15px 0;
color: #7a8699;
line-height: 1.4;
}
.footer-contact .contact-icon {
color: #7a8699;
line-height: 1;
margin-top: 2px;
flex-shrink: 0;
margin-right: -40px;
width: 16px;
height: 16px;
}
.footer-contact .contact-text {
flex: 1;
min-width: 0;
}
.footer-contact .contact-text .label {
color: #7a8699;
font-weight: 600;
font-size: 14px;
margin-bottom: 2px;
}
.footer-contact .contact-text .value {
color: #7a8699;
font-size: 14px;
word-wrap: break-word;
}
.footer-contact .contact-text .value a {
color: inherit;
text-decoration: none;
}
.footer-contact .contact-text .value a:hover {
text-decoration: underline;
}
/* App Store Button with Apple Icon */
.app-store-button {
display: flex;
align-items: center;
background: #000;
border-radius: 8px;
padding: 8px 12px;
width: 140px;
height: 42px;
gap: 8px;
box-sizing: border-box;
}
.apple-icon {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
}
.app-store-text {
display: flex;
flex-direction: column;
color: #fff;
line-height: 1;
}
.app-store-text .small-text {
font-size: 7px;
font-weight: 500;
font-family: 'Poppins', Arial, sans-serif;
}
.app-store-text .large-text {
font-size: 14px;
font-weight: 700;
font-family: 'Poppins', Arial, sans-serif;
}
@media (max-width: 991.98px) {
.site-footer {
padding: 40px 0;
}
.footer-brand .brand-circle {
width: 35px;
height: 35px;
}
.footer-brand .brand-text {
font-size: 24px;
}
.footer-bullets {
font-size: 14px;
}
.footer-head {
font-size: 13px;
margin-bottom: 12px;
}
.footer-list li {
margin: 8px 0;
}
.footer-list a {
font-size: 14px;
}
.app-store-button {
width: 120px;
height: 36px;
padding: 6px 10px;
}
.apple-icon {
width: 16px;
height: 16px;
}
.app-store-text .small-text {
font-size: 6px;
}
.app-store-text .large-text {
font-size: 12px;
}
.social {
width: 35px;
height: 35px;
}
.social img {
width: 18px;
height: 18px;
}
}
@media (max-width: 768px) {
.site-footer {
padding: 30px 0;
}
.footer-brand {
text-align: center;
margin-bottom: 20px;
}
.footer-brand .brand-circle {
width: 30px;
height: 30px;
}
.footer-brand .brand-text {
font-size: 20px;
}
.footer-bullets {
font-size: 13px;
text-align: center;
}
.footer-description {
text-align: center !important;
}
.footer-badges {
justify-content: center !important;
}
.socials {
justify-content: center !important;
}
.copyright {
text-align: center !important;
}
.footer-head {
text-align: center;
margin-bottom: 15px;
}
.footer-list {
text-align: center;
}
.footer-contact {
text-align: left;
}
.footer-contact .contact-item {
justify-content: flex-start;
}
.footer-head {
font-size: 12px;
margin-bottom: 10px;
text-align: center;
}
.footer-list {
text-align: center;
}
.footer-list li {
margin: 6px 0;
}
.footer-list a {
font-size: 13px;
}
.footer-badges {
justify-content: center;
margin-bottom: 20px;
}
.app-store-button {
width: 100px;
height: 30px;
padding: 4px 8px;
}
.apple-icon {
width: 14px;
height: 14px;
}
.app-store-text .small-text {
font-size: 5px;
}
.app-store-text .large-text {
font-size: 10px;
}
.socials {
justify-content: center;
margin-bottom: 20px;
}
.social {
width: 32px;
height: 32px;
}
.social img {
width: 16px;
height: 16px;
}
.footer-contact .contact-item {
flex-direction: column;
text-align: center;
margin: 15px 0;
}
.footer-contact .contact-icon {
margin-bottom: 5px;
}
.footer-contact .contact-text .label {
font-size: 12px;
}
.footer-contact .contact-text .value {
font-size: 13px;
}
.copyright {
text-align: center;
font-size: 12px;
}
}
/* Pre-Footer CTA */
.prefooter-cta {
background: linear-gradient(121deg, rgba(6, 35, 131, 1) 42%, rgba(96, 129, 194, 1) 80%, rgba(176, 212, 251, 1) 100%);
color: #fff;
padding: 114px 0;
text-align: center;
}
.cta-content {
max-width: 788px;
margin: 0 auto;
}
.prefooter-cta .cta-line {
margin: 0 0 20px 0;
font-size: 20px;
line-height: 1em;
letter-spacing: 5%;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 400;
}
.prefooter-cta .cta-strong {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 1.75em;
color: #fff;
margin: 28px 0 89px 0;
}
.prefooter-cta .cta-actions {
display: flex;
justify-content: center;
align-items: center;
}
.prefooter-cta .btn-cta {
background: #175FE5;
color: #fff;
border-radius: 8px;
padding: 0 16px;
height: 48px;
border: none;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.5em;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
min-width: 226px;
}
.prefooter-cta .btn-cta:hover {
background: #0040B8;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(23, 95, 229, 0.3);
}
@media (max-width: 768px) {
.prefooter-cta {
padding: 80px 0;
}
.prefooter-cta .cta-line {
font-size: 18px;
margin-bottom: 16px;
}
.prefooter-cta .cta-strong {
font-size: 32px;
margin: 20px 0 60px 0;
}
.prefooter-cta .btn-cta {
width: 100%;
max-width: 280px;
}
}
/* Our Mission & Why Choose Us - Merged Section */
.our-mission-why-choose {
padding: 80px 0;
background: linear-gradient(220deg, rgba(8, 40, 140, 1) 45%, rgba(96, 129, 194, 1) 70%, rgba(176,212,251, 1) 100%);
color: #fff;
}
.mission-content {
padding: 40px 0;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.mission-title {
font-family: 'Abril Fatface', serif;
font-size: 48px;
color: #fff;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 2px;
}
.mission-text {
color: #fff;
}
.mission-text p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
font-weight: 400;
opacity: 0.9;
}
.mission-text p:last-child {
margin-bottom: 0;
}
.mission-image {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.mission-image img {
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-width: 100%;
height: auto;
}
.mission-image-rounded {
border-radius: 30px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
/* Empowering Local */
.empowering-local {
padding: 80px 0 120px 0;
background: linear-gradient(142deg, rgba(176,212,251,1) 21%, rgba(0,64,184,1) 83%);
color: #fff;
position: relative;
}
/* Our Ecosystem */
.our-ecosystem {
padding: 120px 0 100px 0;
background: radial-gradient(circle at center, #FEEF06 0%, #FFC444 30%, #3773E9 70%, #091974 100%);
color: #0c0249;
position: relative;
top: -60px;
margin-bottom: -60px;
overflow: hidden;
}
.ecosystem-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.ecosystem-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
}
.ecosystem-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(254, 239, 6, 0.1) 0%, rgba(255, 196, 68, 0.1) 30%, rgba(55, 115, 233, 0.2) 70%, rgba(9, 25, 116, 0.3) 100%);
z-index: 2;
}
.our-ecosystem .container {
position: relative;
z-index: 3;
max-width: 1400px;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
margin-left: auto;
margin-right: auto;
}
.our-ecosystem{
margin-top: -8px;
}
.ecosystem-first-title {
font-family: 'Poppins', serif;
font-size: 48px;
color: #0c0249;
margin-bottom: 20px;
letter-spacing: 2px;
}
.ecosystem-title {
font-family: 'Abril Fatface', serif;
font-size: 48px;
color: #0c0249;
margin-bottom: 20px;
letter-spacing: 2px;
}
.ecosystem-combined-title {
margin-bottom: 20px;
line-height: 1.2;
}
.ecosystem-combined-title .ecosystem-first-title {
font-family: 'Poppins', serif;
font-size: 48px;
color: #0c0249;
letter-spacing: 2px;
}
.ecosystem-combined-title .ecosystem-title {
font-family: 'Abril Fatface', serif;
font-size: 48px;
color: #0c0249;
letter-spacing: 2px;
}
.partner-first-title {
font-family: 'Poppins', serif;
font-size: 30px;
color: #001d6c;
margin-bottom: 20px;
letter-spacing: 2px;
}
.partner-title {
font-family: 'Abril Fatface', serif;
font-size: 30px;
color: #001d6c;
margin-bottom: 20px;
letter-spacing: 2px;
}
.partner-combined-title {
margin-bottom: 36px;
line-height: 1.2;
}
.partner-combined-title .partner-first-title {
font-family: 'Poppins', serif;
font-size: 36px;
color: #001d6c;
letter-spacing: 2px;
}
.partner-combined-title .partner-title {
font-family: 'Abril Fatface', serif;
font-size: 36px;
color: #001d6c;
letter-spacing: 2px;
}
/* Fayda Bazar CTA */
.fayda-bazar-cta {
background: linear-gradient(121deg, rgba(6, 35, 131, 1) 42%, rgba(96, 129, 194, 1) 80%, rgba(176, 212, 251, 1) 100%);
color: #fff;
padding: 114px 0;
text-align: center;
}
.fayda-bazar-cta .cta-line {
margin: 0 0 20px 0;
font-size: 20px;
line-height: 1em;
letter-spacing: 5%;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 400;
}
.fayda-bazar-cta .cta-strong {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 1.75em;
color: #fff;
margin: 40px 0 60px 0;
}
.fayda-bazar-cta .cta-actions {
display: flex;
justify-content: center;
align-items: center;
}
.fayda-bazar-cta .btn-cta {
background: #175FE5;
color: #fff;
border-radius: 8px;
padding: 0 16px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 16px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.fayda-bazar-cta .btn-cta:hover {
background: #0040B8;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(23, 95, 229, 0.3);
}
/* Rewards Story Card */
/* Your Unfair Advantage Section */
.unfair-advantage-section {
padding: 80px 0 60px 0;
background: linear-gradient(135deg, #1F4EBA 0%, #06258A 48%, #0E024D 100%);
position: relative;
overflow: hidden;
}
.unfair-advantage-section .container {
margin-bottom: 5rem;
}
.unfair-advantage-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0);
background-size: 20px 20px;
opacity: 0.3;
pointer-events: none;
}
.unfair-advantage-content {
text-align: center;
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.unfair-advantage-eyebrow {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 18px;
letter-spacing: 0.1em;
color: #ffffff;
margin-bottom: 20px;
text-transform: uppercase;
opacity: 0.9;
}
.unfair-advantage-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.1;
color: #ffffff;
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.unfair-advantage-subtitle {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 20px;
color: #ffffff;
margin-bottom: 0;
opacity: 0.9;
}
/* Responsive Design for Unfair Advantage Section */
@media (max-width: 768px) {
.unfair-advantage-section {
padding: 60px 0 40px 0;
}
.unfair-advantage-eyebrow {
font-size: 16px;
margin-bottom: 15px;
}
.unfair-advantage-title {
font-size: 32px;
margin-bottom: 15px;
}
.unfair-advantage-subtitle {
font-size: 18px;
}
}
@media (max-width: 480px) {
.unfair-advantage-title {
font-size: 28px;
}
.unfair-advantage-subtitle {
font-size: 16px;
}
}
/* Carousel Container */
.carousel-container {
position: relative;
max-width: 100%;
margin: 0 auto;
padding: 40px 0px;
margin-bottom: 3rem;
}
/* Navigation Arrows */
.carousel-navigation {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 20;
pointer-events: none;
}
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
pointer-events: all;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.nav-arrow:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.nav-prev {
left: -80px;
}
.nav-next {
right: -80px;
}
/* Carousel Dots */
.carousel-dots {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
z-index: 10;
position: relative;
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.6);
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: white;
border-color: white;
transform: scale(1.2);
}
.dot:hover {
border-color: white;
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* Carousel Track */
.carousel-track {
overflow: hidden;
border-radius: 20px;
width: 100%;
position: relative;
}
.carousel-inner {
display: flex;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
width: 500%;
}
.carousel-slide {
width: 20%;
height: 700px;
flex-shrink: 0;
display: none;
}
.carousel-slide.active {
display: block;
}
/* Glass Card Styling */
.glass-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
height: 700px;
width: 100%;
display: flex;
align-items: center;
overflow: hidden;
margin-bottom: 6rem;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
/* Phone Images */
.phone-mockups {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%;
min-height: 600px;
}
.phone-image {
width: 280px;
height: 560px;
object-fit: contain;
flex-shrink: 0;
}
.phone-screen {
width: 100%;
height: 100%;
background: #000;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.app-screen {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 15px;
display: flex;
flex-direction: column;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.app-screen.congratulations {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.app-title {
font-weight: 600;
font-size: 14px;
}
.coin-balance {
background: rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
}
.lucky-draw-banner {
background: #ff6b6b;
color: white;
text-align: center;
padding: 8px;
border-radius: 8px;
font-weight: 600;
font-size: 10px;
margin-bottom: 15px;
}
.app-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.feature-item {
background: rgba(255, 255, 255, 0.2);
padding: 8px;
border-radius: 8px;
text-align: center;
font-size: 10px;
}
.mx-logo {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(45deg, #ffd700, #ffed4e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.congrats-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
}
.coin-reward {
font-size: 18px;
font-weight: 700;
color: #ffd700;
}
.gift-box {
font-size: 20px;
margin-bottom: 10px;
}
.stars-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px, 30px 30px, 25px 25px;
pointer-events: none;
}
.search-bar {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 20px;
padding: 8px 12px;
color: white;
font-size: 10px;
margin-bottom: 15px;
}
.search-bar::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.store-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.store-item {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
padding: 8px;
border-radius: 8px;
}
.store-image {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.3);
border-radius: 6px;
}
.store-info {
flex: 1;
}
.store-name {
font-size: 10px;
font-weight: 500;
margin-bottom: 2px;
}
.store-rating {
font-size: 8px;
color: #ffd700;
}
.product-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.product-item {
background: rgba(255, 255, 255, 0.2);
height: 40px;
border-radius: 8px;
}
.wallet-balance {
font-size: 16px;
font-weight: 600;
text-align: center;
margin-bottom: 15px;
color: #ffd700;
}
.redeem-btn {
background: #4CAF50;
color: white;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 10px;
font-weight: 500;
cursor: pointer;
width: 100%;
margin-bottom: 15px;
}
.transaction-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.transaction-item {
background: rgba(255, 255, 255, 0.1);
padding: 4px 8px;
border-radius: 6px;
font-size: 10px;
text-align: center;
}
/* Slide Content Styling */
.slide-content {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.problem-statement {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 20px;
color: #fff;
margin-bottom: 25px;
line-height: 1.4;
}
.solution-statement {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 20px;
color: #fff;
margin-bottom: 35px;
line-height: 1.4;
}
.slide-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 35px;
color: #fff;
margin-bottom: 40px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
}
.slide-description {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 20px;
color: #fff;
line-height: 1.6;
margin-bottom: 20px;
}
.description-section {
margin-bottom: 30px;
}
.description-section h4 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 20px;
color: #fff;
margin-bottom: 15px;
}
.description-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.description-section li {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 17px;
color: #fff;
margin-bottom: 12px;
padding-left: 20px;
position: relative;
}
.description-section li::before {
content: "•";
color: white;
font-weight: bold;
position: absolute;
left: 0;
}
/* Responsive Design for Carousel */
@media (max-width: 768px) {
.carousel-container {
padding: 20px 30px;
}
.carousel-navigation {
display: none;
}
.carousel-dots {
margin-bottom: 20px;
}
.carousel-slide {
height: auto;
min-height: 600px;
}
.glass-card {
padding: 20px;
height: auto;
min-height: 600px;
flex-direction: column;
}
.glass-card .row {
flex-direction: column;
}
.glass-card .col-lg-5,
.glass-card .col-lg-7 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
.phone-mockups {
gap: 15px;
margin-bottom: 30px;
min-height: 600px;
order: 1;
}
.phone-image {
width: 280px;
height: 460px;
}
.slide-content {
order: 2;
padding: 0;
text-align: center;
}
.problem-statement {
font-size: 14px;
margin-bottom: 15px;
}
.solution-statement {
font-size: 14px;
margin-bottom: 20px;
}
.slide-title {
font-size: 18px;
margin-bottom: 25px;
line-height: 1.3;
}
.slide-description {
font-size: 14px;
margin-bottom: 15px;
}
.description-section {
margin-bottom: 20px;
}
.description-section h4 {
font-size: 14px;
margin-bottom: 10px;
}
.description-section li {
font-size: 12px;
margin-bottom: 8px;
}
}
@media (max-width: 480px) {
.carousel-container {
padding: 15px 20px;
}
.carousel-slide {
height: auto;
min-height: 500px;
}
.glass-card {
padding: 15px;
height: auto;
min-height: 500px;
}
.phone-image {
width: 140px;
height: 280px;
}
.phone-mockups {
min-height: 250px;
margin-bottom: 20px;
}
.problem-statement {
font-size: 12px;
margin-bottom: 12px;
}
.solution-statement {
font-size: 12px;
margin-bottom: 15px;
}
.slide-title {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.2;
}
.slide-description {
font-size: 12px;
margin-bottom: 12px;
}
.description-section {
margin-bottom: 15px;
}
.description-section h4 {
font-size: 12px;
margin-bottom: 8px;
}
.description-section li {
font-size: 11px;
margin-bottom: 6px;
}
}
/* Extra small mobile devices */
@media (max-width: 320px) {
.carousel-container {
padding: 10px 15px;
}
.carousel-slide {
min-height: 450px;
}
.glass-card {
padding: 10px;
min-height: 450px;
}
.phone-image {
width: 120px;
height: 240px;
}
.phone-mockups {
min-height: 200px;
margin-bottom: 15px;
}
.problem-statement {
font-size: 11px;
margin-bottom: 10px;
}
.solution-statement {
font-size: 11px;
margin-bottom: 12px;
}
.slide-title {
font-size: 14px;
margin-bottom: 15px;
}
.slide-description {
font-size: 11px;
margin-bottom: 10px;
}
.description-section {
margin-bottom: 12px;
}
.description-section h4 {
font-size: 11px;
margin-bottom: 6px;
}
.description-section li {
font-size: 10px;
margin-bottom: 4px;
}
/* Extra small mobile grid improvements */
.how-content .col-lg-4,
.our-ecosystem-cards .col-lg-4,
.our-mission-why-choose .col-lg-4 {
margin-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
}
}
.rewards-story-section {
padding: 60px 0;
background: /*linear-gradient(142deg, rgba(176,212,251,1) 21%, rgba(0,64,184,1) 83%);*/
linear-gradient(121deg, rgba(6, 35, 131, 1) 42%, rgba(96, 129, 194, 1) 80%, rgba(176, 212, 251, 1) 100%);
}
.rewards-story-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.rewards-story-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.rewards-story-content {
padding-left: 30px;
}
.rewards-line-1 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
color: #fff;
margin-bottom: 20px;
line-height: 1.4;
}
.rewards-line-2 {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
color: #fff;
margin-bottom: 25px;
line-height: 1.4;
}
.rewards-line-3 {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 40px;
color: #fff;
margin-bottom: 25px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
}
.rewards-line-4 {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 16px;
color: #fff;
margin-bottom: 0;
line-height: 1.6;
}
.rewards-image-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-height: 300px;
}
.rewards-image {
width: 100%;
max-width: 300px;
height: 300px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.rewards-image:hover {
transform: scale(1.02);
}
/* Partner Story Card within Ecosystem */
.our-ecosystem .partner-story-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
margin-top: 40px;
}
.our-ecosystem .partner-story-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.partner-story-content {
padding-right: 30px;
}
.partner-story-title {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 36px;
color: #000;
margin-bottom: 20px;
line-height: 1.3;
}
.partner-story-description {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 20px;
color: #000;
line-height: 1.6;
margin-bottom: 25px;
}
.partner-info {
margin-bottom: 25px;
}
.partner-avatar {
display: flex;
align-items: center;
gap: 15px;
}
.avatar-circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.partner-details {
display: flex;
flex-direction: column;
}
.partner-name {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 16px;
color: #000;
margin-bottom: 2px;
}
.partner-address {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 14px;
color: #666;
}
.play-use-case-btn {
background: #0040B8;
color: white;
border: none;
border-radius: 25px;
padding: 12px 24px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
}
.play-use-case-btn:hover {
background: #001d6c;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 64, 184, 0.3);
}
.play-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.partner-image-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-height: 300px;
}
.partner-image {
width: 100%;
max-width: 500px;
height: 400px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.partner-image:hover {
transform: scale(1.02);
}
.shells {
position: absolute;
width: 100%;
height: 50px;
background: rgba(255, 255, 255, 0.95);
margin: -40px 0 60px 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transform: rotate(-1.5deg);
z-index: 10;
overflow: hidden;
}
.shells-text {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 25px;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
color: #0040B8;
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
overflow: hidden;
animation: scroll-text 30s linear infinite;
width: 200%;
}
.shells-text span {
display: inline-block;
padding: 0 25px;
flex-shrink: 0;
}
.shells-svg{
height: 100px;
}
.our-ecosystem-cards {
/* width: 100%;
margin: 0 auto; */
padding: 0;
}
.our-ecosystem-cards .row.gy-4 {
--bs-gutter-y: 1.5rem;
}
.our-ecosystem-cards .row.justify-content-center {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
.our-ecosystem-cards .col-lg-4 {
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
.our-ecosystem-cards .row.gy-4 {
--bs-gutter-y: 0.25rem;
}
/* Mobile grid alignment improvements */
.how-content .container,
.our-ecosystem .container {
max-width: 100%;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.how-content .row.justify-content-center,
.our-ecosystem-cards .row.justify-content-center,
.our-mission-why-choose .row.justify-content-center {
justify-content: center;
align-items: center;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.how-content .col-lg-4,
.our-ecosystem-cards .col-lg-4,
.our-mission-why-choose .col-lg-4 {
margin-bottom: 20px;
padding-left: 0;
padding-right: 0;
}
section, .hero, .how, .empowering-local-section, .our-ecosystem, .partner-story-section, .rewards-story-section, .our-mission-why-choose, .team, .prefooter-cta, .site-footer {
margin-bottom: 3rem;
}
}
.our-ecosystem-cards .col-lg-4,
.our-ecosystem-cards .col-md-6 {
display: flex;
}
.ecosystem-card {
flex: 1; /* ensures equal height */
display: flex;
flex-direction: column;
box-shadow: 0 8px 25px rgba(31, 19, 116, 0.45);
border: 1px solid #1F1374;
}
.ecosystem-subtitle {
font-size: 18px;
color: #0c0249;
opacity: 0.8;
margin-bottom: 60px;
line-height: 1.6;
}
.ecosystem-card {
background: #ffffff;
border: none;
border-radius: 20px;
padding: 35px 25px;
text-align: center;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
min-height: 450px;
margin-bottom: 20px;
border: #1F1374 0.7px solid;
}
.ecosystem-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0040B8 0%, #1F1374 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.ecosystem-card:hover {
transform: translateY(-5px);
box-shadow:
0 15px 35px rgba(31, 19, 116, 0.6),
/* 0 0 0 1px rgba(31, 19, 116, 0.3); */
/* border: 1px solid #1F1374; */
}
.ecosystem-card:hover::before {
opacity: 1;
}
.ecosystem-card-image {
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.ecosystem-round-icon {
width: 120px;
height: 120px;
border-radius: 50%;
background: transparent;
border: none;
box-shadow:
0 4px 15px rgba(0, 64, 184, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
margin: 0 auto 20px;
}
.ecosystem-card:hover .ecosystem-round-icon {
transform: scale(1.05);
box-shadow:
0 12px 30px rgba(0, 64, 184, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 0.9);
}
.ecosystem-icon-image {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 50%;
}
.ecosystem-card-title {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 20px;
color: #0040B8;
margin-bottom: 20px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
z-index: 2;
}
.ecosystem-card-title::before {
content: attr(data-watermark);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 40px;
color: rgba(0, 64, 184, 0.05);
text-transform: uppercase;
letter-spacing: 2px;
z-index: 1;
white-space: nowrap;
pointer-events: none;
}
.ecosystem-card-title::after {
display: none;
}
.ecosystem-card-features {
flex: 1;
margin-bottom: 20px;
}
.ecosystem-card-features ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.ecosystem-card-features li {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 15px;
color: #2c3e50;
line-height: 1.6;
margin-bottom: 12px;
position: relative;
padding-left: 20px;
transition: color 0.3s ease;
}
.ecosystem-card-features li:before {
content: "";
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
position: absolute;
left: 0;
top: 8px;
}
.ecosystem-card:hover .ecosystem-card-features li {
color: #1a252f;
}
.ecosystem-store-badges {
display: flex;
justify-content: center;
gap: 12px;
margin-top: auto;
flex-wrap: wrap;
}
.ecosystem-store-badges .store-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 12px;
text-decoration: none;
color: #fff;
font-size: 12px;
transition: all 0.3s ease;
background: #000;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15);
border: none;
margin: 0 5px;
}
.ecosystem-store-badges .store-badge:hover {
transform: translateY(-2px);
text-decoration: none;
color: #fff;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.25);
}
.ecosystem-store-badges .store-badge .texts small {
display: block;
line-height: 1;
opacity: 0.9;
font-size: 10px;
font-weight: 500;
}
.ecosystem-store-badges .store-badge .texts strong {
display: block;
line-height: 1.2;
font-size: 12px;
font-weight: 600;
}
.partner-button-container {
margin-top: auto;
padding-top: 10px;
}
.become-partner-btn {
background: #0040B8;
color: white;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow:
0 4px 15px rgba(0, 64, 184, 0.2);
position: relative;
overflow: hidden;
width: 100%;
max-width: 200px;
margin: 0 auto;
white-space: nowrap;
}
.become-partner-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.become-partner-btn:hover {
background: linear-gradient(135deg, #1F1374 0%, #0040B8 100%);
transform: translateY(-3px);
box-shadow:
0 10px 30px rgba(0, 64, 184, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.become-partner-btn:hover::before {
left: 100%;
}
#empowering-local-image {
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative;
}
#empowering-local-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 64, 184, 0.3);
border-radius: 20px;
z-index: 1;
}
@media (max-width: 991px) {
.mission-title {
font-size: 36px;
text-align: center;
}
.mission-text {
text-align: start;
margin-bottom: 30px;
}
.mission-image {
padding: 20px;
}
}
@media (max-width: 768px) {
/*.our-mission, .empowering-local, .our-ecosystem, .partner-story-section, .rewards-story-section {*/
.our-mission-why-choose, .empowering-local, .empowering-local-section, .our-ecosystem, .partner-story-section {
padding: 40px 0;
}
.rewards-story-card {
padding: 20px;
margin: 0 10px;
}
.rewards-story-content {
padding-left: 0;
margin-top: 20px;
text-align: center;
}
.rewards-line-1, .rewards-line-2, .rewards-line-4 {
font-size: 14px;
margin-bottom: 15px;
}
.rewards-line-3 {
font-size: 24px;
margin-bottom: 15px;
line-height: 1.1;
}
.rewards-image-container {
min-height: 200px;
margin-bottom: 20px;
}
.rewards-image {
max-width: 200px;
height: 200px;
}
.fayda-bazar-cta {
padding: 80px 0;
}
.fayda-bazar-cta .cta-line {
font-size: 18px;
margin-bottom: 16px;
}
.fayda-bazar-cta .cta-strong {
font-size: 32px;
margin: 20px 0 60px 0;
}
.fayda-bazar-cta .btn-cta {
width: 100%;
max-width: 280px;
}
.partner-story-card {
padding: 20px;
margin: 0 10px;
}
.partner-story-card .row {
display: flex;
flex-direction: column;
}
.partner-story-card .col-lg-7 {
order: 2; /* Text content appears second on mobile */
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.partner-story-card .col-lg-3 {
order: 1; /* Image appears first on mobile */
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.partner-story-content {
padding-right: 0;
margin-bottom: 20px;
text-align: center;
}
.partner-story-title {
font-size: 26px;
margin-bottom: 12px;
line-height: 1.2;
}
.partner-story-description {
font-size: 18px;
margin-bottom: 15px;
line-height: 1.4;
}
.partner-info {
margin-bottom: 15px;
justify-content: center;
}
.avatar-circle {
width: 40px;
height: 40px;
}
.partner-name {
font-size: 14px;
}
.partner-address {
font-size: 12px;
}
.play-use-case-btn {
padding: 8px 16px;
font-size: 12px;
width: 100%;
justify-content: center;
}
.partner-image-container {
min-height: 200px;
margin-bottom: 20px;
}
.partner-image {
max-width: 400px;
height: 280px;
}
.ecosystem-title {
font-size: 36px;
}
.ecosystem-combined-title .ecosystem-first-title,
.ecosystem-combined-title .ecosystem-title {
font-size: 36px;
}
.ecosystem-subtitle {
font-size: 16px;
margin-bottom: 40px;
}
.ecosystem-card {
padding: 18px 12px;
margin-bottom: 5px;
min-height: 280px;
padding: 20px;
}
.ecosystem-round-icon {
width: 70px;
height: 70px;
margin-bottom: 10px;
}
.ecosystem-icon-image {
width: 70px;
height: 70px;
}
.ecosystem-card-title {
font-size: 15px;
margin-bottom: 12px;
}
.ecosystem-card-title::before {
font-size: 30px;
letter-spacing: 1px;
}
.ecosystem-card-features {
margin-bottom: 15px;
}
.ecosystem-card-features li {
font-size: 14px;
margin-bottom: 8px;
padding-left: 15px;
}
.become-partner-btn {
padding: 8px 16px;
font-size: 12px;
width: 100%;
}
.ecosystem-store-badges {
flex-direction: row !important;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.ecosystem-store-badges .store-badge {
display: inline-flex !important;
padding: 6px 8px;
gap: 6px;
width: 45%;
min-width: 0;
flex-shrink: 1;
justify-content: center;
}
.ecosystem-store-badges .store-badge .texts small {
font-size: 8px;
}
.ecosystem-store-badges .store-badge .texts strong {
font-size: 10px;
}
.mission-title {
font-size: 32px;
}
.mission-text p {
font-size: 15px;
}
.empowering-title {
font-size: 28px;
}
.empowering-text p {
font-size: 14px;
}
.hashtag {
font-size: 16px;
}
.network-diagram {
width: 250px;
height: 250px;
}
}
/* Why Choose Us - Now merged with Our Mission */
.why-choose-title {
font-family: 'Abril Fatface', serif;
font-size: 48px;
color: #fff;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Why Choose Us grid alignment improvements */
.our-mission-why-choose .row.justify-content-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
.our-mission-why-choose .col-lg-4 {
display: flex;
flex-direction: column;
}
.why-choose-subtitle {
font-size: 18px;
color: #fff;
opacity: 0.9;
margin-bottom: 60px;
line-height: 1.6;
}
.why-card {
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
padding: 40px 24px;
text-align: center;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.why-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.why-card-icon {
margin-bottom: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.why-card-icon img {
width: 60px;
height: 60px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.why-card-title {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 20px;
color: #0c0249;
margin-bottom: 16px;
line-height: 1.3;
position: relative;
z-index: 2;
}
.why-card-title::before {
content: attr(data-watermark);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 40px;
color: rgba(0, 0, 0, 0.05);
text-transform: uppercase;
letter-spacing: 2px;
z-index: 1;
white-space: nowrap;
pointer-events: none;
}
.why-card-text {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 14px;
color: #5b697f;
line-height: 1.5;
margin: 0;
}
@media (max-width: 768px) {
.why-choose-title {
font-size: 36px;
}
.why-choose-subtitle {
font-size: 16px;
margin-bottom: 40px;
}
.why-card {
padding: 30px 20px;
}
.why-card-icon img {
width: 50px;
height: 50px;
}
.why-card-title {
font-size: 18px;
}
.why-card-title::before {
font-size: 36px;
letter-spacing: 1px;
}
}
/* Empowering Local Section */
.empowering-local-section {
padding: 80px 0 120px;
background: linear-gradient(135deg, #5E91EE 0%, #4464b6 61%, #3a336d 80%, #413978 100%);
color: #fff;
position: relative;
overflow: hidden;
margin-top: -80px; /* Pull up to eliminate gap */
}
.our-app-image-container {
text-align: center;
margin-bottom: 60px;
margin-top: 60px;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.our-app-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.our-app-image:hover {
transform: translateY(-10px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}
.empowering-content {
padding: 40px 0;
}
.empowering-title {
font-size: 45px;
color: #fff;
margin-bottom: 0;
line-height: 1.2;
font-weight: 400;
}
.empowering-word-abril {
font-family: 'Abril Fatface', serif;
}
.empowering-word-poppins {
font-family: 'Poppins', serif;
}
.empowering-text {
margin: 30px 0;
}
.empowering-text p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
color: #fff;
opacity: 0.9;
}
.empowering-text p:last-child {
margin-bottom: 0;
}
.hashtag {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 18px;
color: #fff;
margin-top: 20px;
letter-spacing: 1px;
}
.empowering-visual {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
}
.empowering-image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 100%;
}
.empowering-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 20px;
transition: transform 0.3s ease;
}
.empowering-image:hover {
transform: translateY(-5px);
}
.network-diagram {
position: relative;
width: 400px;
height: 400px;
margin: 0 auto;
}
.central-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.logo-circle {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
overflow: hidden;
animation: logo-flip 3s ease-in-out infinite;
}
.logo-circle:hover {
transform: scale(1.05);
animation-play-state: paused;
}
.main-logo {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
}
/* Logo flipping animation */
@keyframes logo-flip {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
25% {
transform: rotateY(90deg) rotateX(0deg);
}
50% {
transform: rotateY(180deg) rotateX(0deg);
}
75% {
transform: rotateY(270deg) rotateX(0deg);
}
100% {
transform: rotateY(360deg) rotateX(0deg);
}
}
.network-icons {
position: relative;
width: 100%;
height: 100%;
}
.network-icon {
position: absolute;
width: 70px;
height: 70px;
z-index: 10;
}
.icon-circle {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
overflow: hidden;
z-index: 11;
position: relative;
}
.network-icon:hover .icon-circle {
transform: scale(1.15);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.icon-img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 50%;
z-index: 12;
position: relative;
}
/* Position 6 icons in 3 orbits - 2 icons per ring */
/* Inner ring - 2 icons */
.icon-1 {
left: 50%;
top: 50%;
animation: orbit-inner 6s linear infinite;
}
.icon-2 {
left: 50%;
top: 50%;
animation: orbit-inner 6s linear infinite;
animation-delay: -3s;
}
/* Middle ring - 2 icons */
.icon-3 {
left: 50%;
top: 50%;
animation: orbit-middle 9s linear infinite;
}
.icon-4 {
left: 50%;
top: 50%;
animation: orbit-middle 9s linear infinite;
animation-delay: -4.5s;
}
/* Outer ring - 2 icons */
.icon-5 {
left: 50%;
top: 50%;
animation: orbit-outer 12s linear infinite;
}
.icon-6 {
left: 50%;
top: 50%;
animation: orbit-outer 12s linear infinite;
animation-delay: -6s;
}
/* Multiple connection rings */
.network-diagram::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
z-index: 1;
}
.network-diagram::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
z-index: 1;
}
/* Additional rings */
.network-diagram {
position: relative;
}
.network-diagram .ring-1 {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
z-index: 1;
}
.network-diagram .ring-2 {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
z-index: 1;
}
/* Connection points removed - no blue dots on images */
/* Orbit animations for 3 rings with 2 icons each */
@keyframes orbit-inner {
0% {
transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg);
}
}
@keyframes orbit-middle {
0% {
transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg);
}
}
@keyframes orbit-outer {
0% {
transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg) translateX(200px) rotate(-360deg);
}
}
/* All icons positioned at center for orbiting */
.icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 {
transform-origin: 0 0;
}
/* Stats Bar Overlay */
.stats-bar-overlay {
position: relative;
z-index: 20;
margin: -80px auto 0;
max-width: 1400px;
width: calc(90% - 50px);
padding: 0 10px;
}
.stats-bar-overlay .container {
pointer-events: auto;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(176, 212, 251, 0.9) 100%);
border-radius: 20px;
padding: 25px 35px;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.stats-bar-overlay .row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
}
.stats-bar-overlay .col-lg-2,
.stats-bar-overlay .col-md-4,
.stats-bar-overlay .col-6 {
flex: 1;
max-width: none;
padding: 0 10px;
}
/* Legacy stats-bar for backward compatibility */
.stats-bar {
background: rgba(255, 255, 255, 0.95);
margin-top: 10px;
padding: 30px 0;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.stat-item {
text-align: center;
padding: 15px 10px;
position: relative;
}
.stats-bar-overlay .stat-item {
padding: 15px 20px;
text-align: center;
position: relative;
transition: transform 0.3s ease;
}
.stats-bar-overlay .stat-item:hover {
transform: translateY(-3px);
}
.stat-number {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 22px;
color: #1F1374;
margin-bottom: 8px;
line-height: 1;
}
.stats-bar-overlay .stat-number {
color: #0040B8;
font-size: 32px;
font-weight: 800;
margin-bottom: 8px;
line-height: 1;
text-shadow: 0 2px 8px rgba(0, 64, 184, 0.2);
letter-spacing: -0.5px;
background: linear-gradient(135deg, #0040B8 0%, #1F1374 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
}
.stat-label {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 14px;
color: #1F1374;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stats-bar-overlay .stat-label {
color: #1F1374;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.8;
line-height: 1.2;
text-align: center;
}
/* Stats Bar Responsive */
@media (max-width: 768px) {
.stats-bar-overlay .row {
flex-wrap: wrap;
justify-content: center;
}
.stats-bar-overlay .col-lg-2,
.stats-bar-overlay .col-md-4,
.stats-bar-overlay .col-6 {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 15px;
}
}
@media (max-width: 480px) {
.stats-bar-overlay .col-lg-2,
.stats-bar-overlay .col-md-4,
.stats-bar-overlay .col-6 {
flex: 0 0 100%;
max-width: 100%;
}
.hero-title{
margin-top: 0;
}
}
/* Responsive Design */
@media (max-width: 991px) {
.empowering-local-section {
padding: 60px 0;
}
.empowering-title {
font-size: 36px;
}
.network-diagram {
width: 300px;
height: 300px;
}
.logo-circle {
width: 120px;
height: 120px;
animation: logo-flip 3s ease-in-out infinite;
}
.main-logo {
width: 120px;
height: 120px;
}
.network-icon {
width: 60px;
height: 60px;
}
.icon-circle {
width: 60px;
height: 60px;
}
.icon-img {
width: 60px;
height: 60px;
}
/* Adjust orbit distances for tablet */
@keyframes orbit-inner {
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(75px) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(75px) rotate(-360deg); }
}
@keyframes orbit-middle {
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(110px) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(110px) rotate(-360deg); }
}
@keyframes orbit-outer {
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg); }
}
.stat-number {
font-size: 28px;
}
.stat-label {
font-size: 12px;
}
.stats-bar-overlay {
margin: -50px auto 0;
width: calc(100% - 20px);
padding: 0 10px;
max-width: 1000px;
position: absolute;
left: 5%;
}
.stats-bar-overlay .container {
padding: 20px 25px;
border-radius: 18px;
}
.stats-bar-overlay .stat-item {
padding: 12px 15px;
}
.stats-bar-overlay .stat-number {
font-size: 26px;
}
.stats-bar-overlay .stat-label {
font-size: 12px;
letter-spacing: 0.8px;
}
}
@media (max-width: 768px) {
.empowering-local-section {
padding: 20px 0 250px 0;
margin-bottom: 0;
}
.our-ecosystem {
padding: 250px 0 80px 0;
top: 0;
}
.stats-bar-overlay {
margin: -30px auto 10px;
width: calc(85% - 20px);
padding: 0 5px;
position: absolute;
left: auto;
}
.stats-bar-overlay .stat-number {
font-size: 28px;
margin-bottom: 8px;
}
.stats-bar-overlay .stat-label {
font-size: 13px;
letter-spacing: 0.8px;
line-height: 1.2;
}
/* Fix any remaining white space issues */
.how {
padding: 40px 0;
margin: 0;
}
.our-mission-why-choose {
padding: 40px 0;
margin: 0;
}
.team {
padding: 40px 0;
margin: 0;
}
.prefooter-cta {
padding: 60px 0;
margin: 0;
}
.our-app-image-container {
margin-bottom: 30px;
margin-top: 30px;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.our-app-image {
max-width: 100%;
border-radius: 15px;
object-fit: contain;
}
.empowering-title {
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
.empowering-text {
text-align: center;
margin: 20px 0;
}
.empowering-text p {
font-size: 14px;
margin-bottom: 15px;
}
.hashtag {
font-size: 16px;
text-align: center;
margin-top: 15px;
}
.empowering-visual {
padding: 30px 0;
}
.empowering-image-container {
margin-bottom: 30px;
margin-top: 30px;
}
.empowering-image {
max-width: 95%;
max-height: 400px;
width: auto;
height: auto;
border-radius: 15px;
object-fit: contain;
}
.network-diagram {
width: 200px;
height: 200px;
}
.logo-circle {
width: 60px;
height: 60px;
animation: logo-flip 3s ease-in-out infinite;
}
.main-logo {
width: 60px;
height: 60px;
}
.network-icon {
width: 40px;
height: 40px;
}
.icon-circle {
width: 40px;
height: 40px;
}
.icon-img {
width: 40px;
height: 40px;
}
.stats-bar {
margin-top: 40px;
padding: 20px 0;
}
.stat-number {
font-size: 24px;
}
.stat-label {
font-size: 11px;
}
}
/* Mobile-specific keyframes for network diagram */
@media (max-width: 768px) {
@keyframes orbit-inner {
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(50px) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}
@keyframes orbit-middle {
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(75px) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(75px) rotate(-360deg); }
}
@keyframes orbit-outer {
0% { transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg); }
}
.stats-bar {
margin-top: 40px;
padding: 20px 0;
}
.stat-number {
font-size: 24px;
}
.stat-label {
font-size: 11px;
}
.stats-bar-overlay {
margin: -12rem auto 5px;
width: calc(80% - 20px);
padding: 0 5px;
max-width: 90%;
position: absolute;
left: 12%;
}
.stats-bar-overlay .container {
padding: 18px 15px;
border-radius: 15px;
}
.stats-bar-overlay .stat-item {
padding: 10px 6px;
}
.stats-bar-overlay .stat-number {
font-size: 24px;
margin-bottom: 6px;
}
.stats-bar-overlay .stat-label {
font-size: 12px;
letter-spacing: 0.6px;
line-height: 1.1;
}
}
/* Team section */
.team {
padding: 72px 0 60px;
background: linear-gradient(142deg, rgba(176,212,251,1) 21%, rgba(0,64,184,1) 83%);
color: #0c0249;
position: relative;
overflow: visible;
}
.team-title {
font-family: 'Abril Fatface', serif;
font: 700 14px/1 'Poppins';
font-size: 48px;
color: #0c0249;
margin-bottom: 16px;
}
.team-subtitle {
font-family: 'Abril Fatface', serif;
font-size: 48px;
color: #0c0249;
margin-top: 6px;
opacity: .9;
margin-bottom: 60px;
}
/* Footer Mobile Responsive */
@media (max-width: 768px) {
.site-footer .row {
text-align: center;
}
.site-footer .col-6 {
margin-bottom: 30px;
}
.site-footer .col-12 {
margin-bottom: 20px;
}
/* Mobile footer brand - center aligned */
.footer-brand {
text-align: center;
margin-bottom: 20px;
}
.footer-brand .navbar-brand {
justify-content: center;
}
/* Mobile footer description - center aligned */
.footer-description {
text-align: center;
margin-bottom: 20px;
}
.footer-bullet-list {
text-align: left;
display: inline-block;
padding-left: 20px;
}
/* Mobile download text */
.download-text {
text-align: center;
margin: 20px 0;
}
.footer-badges {
flex-direction: row;
align-items: center;
gap: 15px !important;
justify-content: center;
flex-wrap: wrap;
}
.footer-badges .badge-official {
width: 140px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.footer-badges .app-store-button {
width: 140px;
height: 42px;
}
.footer-badges .google-play {
width: 140px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.footer-badges .google-play svg {
width: 140px;
height: 42px;
}
.socials {
justify-content: center !important;
margin: 20px 0;
}
.footer-contact {
text-align: center;
margin-top: 20px;
max-width: 100%;
}
.footer-contact .contact-item {
margin: 12px 0;
align-items: center;
justify-content: center;
gap: 5px;
flex-direction: column;
text-align: center;
}
.footer-contact .contact-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
margin-top: 3px;
}
.footer-contact .contact-text {
flex: 1;
min-width: 0;
text-align: center;
}
.footer-contact .contact-text .label {
font-size: 13px;
margin-bottom: 1px;
text-align: center;
}
.footer-contact .contact-text .value {
font-size: 13px;
line-height: 1.3;
text-align: center;
}
}
@media (max-width: 768px) {
.team {
padding: 60px 0 70px;
}
.team-title {
font-size: 36px;
}
.team-subtitle {
font-size: 16px;
margin-bottom: 40px;
}
/* Mobile team cards */
.team-card {
min-height: 380px;
padding: 16px;
margin: 0 auto;
max-width: 300px;
width: 100%;
}
.team-photo {
width: 100%;
height: 200px;
}
.team-name {
font-size: 16px;
margin-bottom: 5px;
}
.team-role {
font-size: 14px;
}
.team-socials {
gap: 12px;
}
.team-socials a {
width: 36px;
height: 36px;
}
.team-socials a img {
width: 18px;
height: 18px;
}
}
/* Medium mobile devices */
@media (max-width: 576px) {
.hero .row {
flex-direction: column;
}
.hero .col-lg-6 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
.hero-content {
margin-top: 0;
text-align: center;
order: 1;
padding: 0 15px;
}
.hero .col-lg-6:last-child {
order: 2;
}
.hero-title {
font-size: 32px;
white-space: normal;
line-height: 1.2;
}
.hero-sub {
font-size: 24px;
}
.phone-stage {
height: 450px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.phone {
width: 110px;
height: 220px;
position: relative;
transform: none;
}
.phone-main {
position: relative;
top: auto;
left: auto;
transform: none;
order: 1;
}
.phone-left {
position: relative;
left: auto;
top: auto;
transform: none;
order: 2;
}
.hero-badges {
margin-top: 18px;
}
.store-badge {
width: 190px;
justify-content: center;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.hero {
padding: 20px 0 30px;
min-height: 100vh;
}
.hero .row {
flex-direction: column;
}
.hero .col-lg-6 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
.hero-title-section {
text-align: center;
order: 1;
padding: 0 15px;
margin-bottom: 15px;
}
.mobile-hero {
order: 2;
margin-bottom: 30px;
}
.hero-details-section {
text-align: center;
order: 3;
padding: 0 15px;
margin-top: 15px;
}
.hero-title {
font-size: 28px;
white-space: normal;
line-height: 1.2;
}
.hero-sub {
font-size: 22px;
}
.hero-eyebrow {
font-size: 12px;
}
.hero-copy {
font-size: 13px;
}
.phone-stage {
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.phone {
width: 100px;
height: 200px;
position: relative;
transform: none;
}
.phone-main {
position: relative;
top: auto;
left: auto;
transform: none;
order: 1;
}
.phone-left {
position: relative;
left: auto;
top: auto;
transform: none;
order: 2;
}
.coin-ribbon {
min-width: 250px;
padding: 8px 12px;
font-size: 10px;
position: relative;
margin-top: 15px;
}
.coin-icon {
width: 20px;
height: 20px;
}
.ribbon-text {
font-size: 10px;
}
.hero-badges {
margin-top: 15px;
}
.store-badge {
padding: 6px 10px;
font-size: 10px;
width: 180px;
justify-content: center;
}
/* Store badge images small mobile styles */
.store-badge-img {
height: 35px;
max-width: 100px;
}
.hero-badges .store-badge-img {
height: 35px;
max-width: 100px;
}
.ecosystem-store-badges .store-badge-img {
height: 30px;
max-width: 90px;
}
.footer-badges .store-badge-img {
height: 30px;
max-width: 90px;
}
.ecosystem-store-badges {
flex-direction: row !important;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
.ecosystem-store-badges .store-badge {
display: inline-flex !important;
padding: 6px 8px;
gap: 6px;
width: 45%;
min-width: 0;
flex-shrink: 1;
justify-content: center;
}
/* Reduce gaps between how-cards on extra small mobile */
.how-content .row.gy-4 {
--bs-gutter-y: 0.75rem;
}
.how-card {
min-height: 300px;
margin-bottom: 0.75rem;
}
.how-card-content {
padding: 18px 15px 12px;
}
.how-card .small {
font-size: 42px;
top: 10px;
left: 15px;
}
.how-card .how-title {
font-size: 16px;
margin: 8px 0 5px 0;
}
.how-card .how-copy {
font-size: 13px;
line-height: 1.3;
margin: 5px 0 0 0;
}
.our-app-image-container {
margin-bottom: 15px;
margin-top: 15px;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.our-app-image {
max-width: 70%;
max-height: 250px;
width: auto;
height: auto;
border-radius: 12px;
object-fit: contain;
}
.empowering-image-container {
margin-bottom: 25px;
margin-top: 25px;
}
.empowering-image {
max-width: 90%;
max-height: 350px;
width: auto;
height: auto;
border-radius: 12px;
object-fit: contain;
}
.empowering-title {
font-size: 24px;
}
.empowering-text p {
font-size: 13px;
}
.network-diagram {
width: 180px;
height: 180px;
}
.logo-circle {
width: 50px;
height: 50px;
}
.main-logo {
width: 50px;
height: 50px;
}
.network-icon {
width: 35px;
height: 35px;
}
.icon-circle {
width: 35px;
height: 35px;
}
.icon-img {
width: 35px;
height: 35px;
}
.stats-bar-overlay .stat-number {
font-size: 22px;
}
.stats-bar-overlay .stat-label {
font-size: 11px;
}
.ecosystem-card {
padding: 15px 10px;
margin-bottom: 3px;
min-height: 250px;
}
.our-ecosystem-cards .row.gy-4 {
--bs-gutter-y: 0.1rem;
}
.ecosystem-round-icon {
width: 60px;
height: 60px;
margin-bottom: 8px;
}
.ecosystem-icon-image {
width: 60px;
height: 60px;
}
.ecosystem-card-title {
font-size: 16px;
}
.ecosystem-card-features li {
font-size: 13px;
}
.become-partner-btn {
padding: 6px 12px;
font-size: 11px;
}
.rewards-story-card {
padding: 15px;
margin: 0 5px;
}
.rewards-line-1, .rewards-line-2, .rewards-line-4 {
font-size: 13px;
}
.rewards-line-3 {
font-size: 20px;
}
.rewards-image {
max-width: 150px;
height: 150px;
}
.partner-story-card {
padding: 15px;
margin: 0 5px;
}
.partner-story-card .row {
display: flex;
flex-direction: column;
}
.partner-story-card .col-lg-7 {
order: 2; /* Text content appears second on mobile */
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.partner-story-card .col-lg-3 {
order: 1; /* Image appears first on mobile */
width: 100%;
flex: 0 0 100%;
max-width: 100%;
}
.partner-story-title {
font-size: 22px;
}
.partner-story-description {
font-size: 16px;
}
.partner-image {
max-width: 400px;
height: 200px;
}
/* Extra small mobile team cards */
.team-card {
min-height: 360px;
padding: 14px;
margin: 0 auto;
max-width: 280px;
width: 100%;
}
.team-photo {
width: 100%;
height: 180px;
}
.team-name {
font-size: 14px;
margin-bottom: 3px;
}
.team-role {
font-size: 12px;
}
.team-socials {
gap: 10px;
}
.team-socials a {
width: 32px;
height: 32px;
}
.team-socials a img {
width: 16px;
height: 16px;
}
.footer-brand .brand-text {
font-size: 18px;
}
.footer-bullets {
font-size: 12px;
}
.footer-list a {
font-size: 12px;
}
.app-store-button {
width: 90px;
height: 28px;
}
.social {
width: 28px;
height: 28px;
}
}
/* Mobile Padding Adjustments */
@media (max-width: 768px) {
:root {
--container-padding: var(--global-padding-sm);
--section-padding: var(--global-padding-sm);
--hero-padding: var(--global-padding-sm);
}
/* Override any remaining Bootstrap margins */
.container, .container-fluid {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Ensure all sections are full width */
section, .hero, .how, .empowering-local-section, .our-ecosystem,
.partner-story-section, .rewards-story-section, .our-mission-why-choose,
.team, .prefooter-cta, .site-footer {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Fix any remaining row issues */
.row {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
/* Ensure no horizontal scroll */
html, body {
overflow-x: hidden !important;
width: 100% !important;
}
}
/* Mobile touch improvements */
@media (max-width: 768px) {
/* Reset body and html for mobile */
html, body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
}
/* Ensure all sections have proper spacing */
.top-strip,
.main-nav,
.hero,
.how,
.empowering-local-section,
.our-ecosystem,
.partner-story-section,
.rewards-story-section,
.our-mission-why-choose,
.team,
.prefooter-cta,
.site-footer {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.container {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.row {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.btn, .store-badge, .become-partner-btn, .play-use-case-btn {
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.navbar-toggler {
min-height: 44px;
min-width: 44px;
}
.team-socials a {
min-height: 44px;
min-width: 44px;
}
.social {
min-height: 44px;
min-width: 44px;
}
/* Improve text readability on mobile */
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Improve form elements */
input, textarea, select {
font-size: 16px; /* Prevents zoom on iOS */
}
/* Better scrolling on mobile */
.navbar-collapse {
max-height: 80vh;
overflow-y: auto;
}
}
/* Ensure team cards are exactly similar */
.team-card {
text-align: center;
border-radius: 16px;
background: #fff;
padding: 18px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
min-height: 460px;
width: 100%;
max-width: 280px;
margin: 0 auto;
}
/* Reduce spacing between team cards */
.team .row {
gap: 4px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.team .col-lg-3,
.team .col-md-4,
.team .col-sm-6 {
padding-left: 2px;
padding-right: 2px;
flex: 0 0 auto;
}
/* Mobile responsive layout */
@media (max-width: 991px) {
.team .row {
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.team .col-md-4 {
flex: 0 0 100%;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 767px) {
.team .row {
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.team .col-sm-6 {
flex: 0 0 100%;
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 575px) {
.team .row {
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}
.team .col-sm-6 {
flex: 0 0 100%;
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px -8px rgba(145, 158, 171, 0.2), 0 0 4px 0px rgba(145, 158, 171, 0.3);
}
.team-info {
order: 1;
margin-bottom: 20px;
width: 100%;
}
.team-name {
font-family: 'Public Sans', sans-serif;
font-weight: 700;
font-size: 20px;
color: #2c3e50;
margin-bottom: 8px;
line-height: 1.2;
}
.team-role {
font-family: 'Public Sans', sans-serif;
font-weight: 500;
font-size: 16px;
color: #7f8c8d;
margin-bottom: 0;
line-height: 1.3;
}
.team-image-container {
order: 2;
margin-bottom: 15px;
width: 100%;
display: flex;
justify-content: center;
min-height: 280px;
}
.team-photo {
width: 100%;
height: 280px;
border-radius: 12px;
object-fit: cover;
object-position: top;
display: block;
margin: 0 auto;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.team-socials {
order: 3;
display: flex;
justify-content: center;
gap: 16px;
width: 100%;
}
.team-socials a {
color: #637381;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f8f9fa;
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.team-socials a:hover {
color: #fff;
background: #0c0249;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(12, 2, 73, 0.3);
}
.team-socials a img {
width: 18px;
height: 18px;
object-fit: contain;
transition: all 0.3s ease;
}
.team-socials a:hover img {
filter: brightness(0) invert(1);
transform: scale(1.1);
}
/* Team Carousel Styles */
.team-carousel-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 60px;
}
/* Team Carousel Navigation */
.team-carousel-navigation {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 20;
pointer-events: none;
}
.team-nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.4);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
pointer-events: all;
backdrop-filter: blur(10px);
}
.team-nav-arrow:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.6);
transform: translateY(-50%) scale(1.1);
}
.team-nav-prev {
left: 10px;
}
.team-nav-next {
right: 10px;
}
.team-carousel-navigation {
visibility: hidden;
}
.team-carousel-navigation .team-nav-arrow {
visibility: hidden;
pointer-events: none;
}
/* Team Carousel Dots */
.team-carousel-dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
z-index: 10;
}
.team-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.team-dot.active {
background: white;
transform: scale(1.2);
}
.team-dot:hover {
background: rgba(255, 255, 255, 0.7);
}
/* Team Carousel Track */
.team-carousel-track {
overflow: hidden;
border-radius: 16px;
}
.team-carousel-inner {
display: flex;
transition: transform 0.6s ease;
gap: 0;
}
.team-carousel-slide {
flex: 0 0 100%;
padding: 0 15px;
display: flex;
justify-content: center;
}
/* Desktop: Show 3 cards at a time */
@media (min-width: 992px) {
.team-carousel-slide {
flex: 0 0 33.333%;
}
.team-carousel-container {
padding: 0 80px;
}
.team-nav-arrow {
width: 60px;
height: 60px;
}
.team-nav-prev {
left: 20px;
}
.team-nav-next {
right: 20px;
}
}
/* Tablet: Show 2 cards at a time */
@media (min-width: 768px) and (max-width: 991px) {
.team-carousel-slide {
flex: 0 0 50%;
}
.team-carousel-container {
padding: 0 70px;
}
}
/* Mobile: Show 1 card at a time */
@media (max-width: 767px) {
.team-carousel-container {
padding: 0 50px;
}
.team-nav-arrow {
width: 40px;
height: 40px;
}
.team-nav-prev {
left: 5px;
}
.team-nav-next {
right: 5px;
}
.team-carousel-dots {
margin-top: 20px;
}
}
/* Extra small mobile */
@media (max-width: 480px) {
.team-carousel-container {
padding: 0 40px;
}
.team-nav-arrow {
width: 35px;
height: 35px;
}
.team-nav-prev {
left: 2px;
}
.team-nav-next {
right: 2px;
}
}
/* Hide navigation arrows on very small screens */
@media (max-width: 360px) {
.team-carousel-navigation {
display: none;
}
.team-carousel-container {
padding: 0 20px;
}
}
.copyright-section{
padding-left: 6rem;
padding-bottom: 1rem;
@media (max-width: 768px) {
padding-left: 1rem;
text-align: center;
margin-top: 1rem;
}
}
.whatsapp-contact-link {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.whatsapp-contact-link:hover {
color: #25D366; /* WhatsApp green color */
text-decoration: none;
}
.whatsapp-contact-link:hover .contact-item {
background-color: rgba(37, 211, 102, 0.1);
border-radius: 8px;
padding: 8px;
margin: -8px;
}