@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap");
body {
font-family: 'Poppins';
overflow-x: hidden;
padding-top: 76px;
padding-bottom: 56px;
}
:root {
--gradient-blue: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
--white: #ffffff;
--heading-title-size: 3rem;
--text-gray: #6c757d;
--border-color: #d1d5db;
--brand-blue: #023be2;
--text-dark: #1a1a1a;
--bg-blue: #E0E6EC;
--bg-green: #E0ECE0;
--navbar-height: 76px;
--contact-shell-bg: #f1f2f4;
--contact-form-bg: white;
--contact-text-main: #0f172a;
--contact-text-muted: #e4e9f0;
--contact-border: #b5bac3;
--contact-input-bg: white;
--sticky-slider-height: 56px;
--section-spacing: 60px;
--section-spacing-mobile: 40px;
--section-width:1280px;
--card-height: 660px; --card-gap: 30px;
--visible-window: 80vh;
--card-bg: #2b50ed; --hold-time: 1%;
--move-time: 1%;
--cycle: 5s; 
}
.background-dark{
background-color: #0b101e !important;
}
.text-white{
color:e2e8f0;
} .hero-section {
--clip-flat-start: 35%;
--clip-top-start: 42%;
background-color: #f9fafb;
padding: var(--section-spacing) 20px 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-container {
max-width: var(--section-width);
margin: 0 auto;
padding: 40px 0;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.growth-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.growth-label {
color: #6b7280;
font-size: 16px;
font-weight: 500;
}
.growth-btn {
padding: 6px 18px;
border: 1.5px solid #023be2;
border-radius: 50px;
background: white;
color: #023be2;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.growth-btn:hover {
background: rgba(2, 59, 226, 0.08);
}
.growth-trust-line {
margin: -10px 0 26px 0;
color: #6b7280;
font-size: 16px;
font-weight: 500;
opacity: 0;
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
will-change: transform, opacity;
}
.hero-title {
font-size: 64px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 30px 0;
line-height: 1.2;
opacity: 0;
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
will-change: transform, opacity;
}
.hero-highlight {
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sparkles {
display: inline-block;
margin-left: 10px;
width: 60px;
height: 60px;
vertical-align: middle;
filter: invert(56%) sepia(72%) saturate(465%) hue-rotate(155deg) brightness(108%) contrast(88%);
animation: sparkleRotate 3s ease-in-out infinite;
}
@keyframes sparkleRotate {
0%, 100% {
transform: rotate(0deg);
}
50% {
transform: rotate(15deg);
}
}
@keyframes titleReveal {
0% {
opacity: 0;
transform: translateY(18px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.hero-subtitle {
font-size: 20px;
color: #4b5563;
margin: 0 0 20px 0;
font-weight: 400;
max-width: 900px;
opacity: 0;
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
will-change: transform, opacity;
}
.cta-button {
padding: 14px 40px;
background: #023be2;
color: white;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 0;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(2, 59, 226, 0.2);
}
.arrow {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}
.cta-button:hover .arrow {
transform: rotate(35deg);
}
.hero-trust-line {
margin: 24px 0 0 0;
font-size: 15px;
font-weight: 500;
color: #4b5563;
letter-spacing: 0.1px;
opacity: 0;
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.35s;
will-change: transform, opacity;
}
.clip-description {
position: absolute;
left: 15%;
bottom: 64px;
margin: 0;
max-width: min(32vw, 420px);
color: #4b5563;
font-size: clamp(11px, 1.05vw, 15px);
font-weight: 500;
line-height: 1.5;
text-align: left;
text-wrap: balance;
overflow-wrap: anywhere;
z-index: 3;
}
.clip-description-emphasis {
font-size: clamp(16px, 2.2vw, 30px);
font-weight: 700;
line-height: 1;
background: linear-gradient(90.38deg, #121213 2.06%, #161616 99.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
margin-right: 6px;
}
.logo-strip {
position: absolute;
right: 20px;
bottom: clamp(18px, 2.5vw, 32px);
width: calc(100% - var(--clip-top-start) + 80px);
height: clamp(56px, 6.2vw, 78px);
display: flex;
align-items: center;
z-index: 3;
overflow: hidden;
clip-path: polygon(0 0, 7% 7%, 0 100%, 100% 100%, 100% 0);
}
.logo-strip::before {
content: none;
}
.logo-slider {
flex: 1;
overflow: hidden;
position: relative;
z-index: 1;
}
.logo-track {
width: max-content;
display: flex;
align-items: center;
gap: clamp(24px, 4.5vw, 64px);
animation: logoLoop 35s linear infinite;
padding-right: clamp(24px, 4.5vw, 64px);
}
.logo-track:hover {
animation-play-state: paused;
}
.logo-item {
height: clamp(18px, 2.8vw, 34px);
max-width: clamp(96px, 12vw, 180px);
width: auto;
object-fit: contain;
opacity: 0.9;
flex-shrink: 0;
filter: grayscale(95%);
}
.logo-item:hover {
filter: grayscale(0);
}
@keyframes logoLoop {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes swingIn {
0% {
opacity: 0;
transform: perspective(1000px) rotateX(-90deg) translateZ(-100px);
transform-origin: top;
}
100% {
opacity: 1;
transform: perspective(1000px) rotateX(0deg) translateZ(0);
transform-origin: top;
}
}
@media (min-width:1600px){
.logo-strip {
width: calc(100% - var(--clip-top-start) + 110px);
}
}
@media (max-width: 1024px) {
.hero-title {
font-size: 52px;
}
.hero-subtitle {
font-size: 16px;
}
.logo-strip {
width: calc(100% - var(--clip-top-start) + 30px);
bottom: 60px;
}
.clip-description {
left: 7%;
bottom: 60px;
max-width: min(38vw, 340px);
}
.logo-item {
max-width: clamp(96px, 14vw, 150px);
}
}
@media (max-width: 768px) {
.hero-section {
padding: var(--section-spacing-mobile) 16px 40px;
}
.hero-container {
padding: 40px 0;
}
.growth-buttons {
gap: 8px;
margin-bottom: 24px;
}
.growth-label {
font-size: 14px;
width: 100%;
margin-bottom: 8px;
}
.growth-btn {
padding: 8px 20px;
font-size: 14px;
}
.growth-trust-line {
margin: 0 0 24px 0;
font-size: 14px;
}
.hero-title {
font-size: 32px;
margin-bottom: 24px;
line-height: 1.3;
}
.sparkles {
width: 40px;
height: 40px;
}
.hero-subtitle {
font-size: 16px;
line-height: 1.6;
padding: 0 10px;
}
.cta-button {
padding: 14px 32px;
font-size: 16px;
margin-top: 8px;
}
.hero-trust-line {
margin-top: 20px;
font-size: 12px;
line-height: 1.6;
padding: 0 10px;
}
.logo-strip {
width: calc(100% - var(--clip-top-start) + 35px);
left: auto;
right: 0;
bottom: 70px;
height: clamp(48px, 5.5vw, 64px);
}
.clip-description {
left: 20px;
bottom: 70px;
max-width: min(42vw, 240px);
font-size: clamp(9px, 1vw, 12px);
}
.logo-strip::before {
display: none;
}
.logo-item {
max-width: clamp(120px, 25vw, 180px);
}
}
@media (max-width: 480px) {
.hero-section {
padding: var(--section-spacing-mobile) 16px 40px;
}
.hero-container {
padding: 30px 0;
}
.hero-title {
font-size: 26px;
margin-bottom: 20px;
line-height: 1.35;
}
.sparkles {
width: 32px;
height: 32px;
margin-left: 4px;
}
.hero-subtitle {
font-size: 15px;
line-height: 1.65;
padding: 0 5px;
}
.growth-btn {
padding: 6px 16px;
font-size: 13px;
}
.growth-trust-line {
margin: 0 0 20px 0;
font-size: 13px;
line-height: 1.5;
}
.cta-button {
padding: 12px 28px;
font-size: 15px;
margin-top: 6px;
}
.hero-trust-line {
margin-top: 18px;
font-size: 11px;
line-height: 1.6;
padding: 0 5px;
}
.logo-strip {
width: calc(100% - var(--clip-top-start) + 25px);
left: auto;
right: 0;
bottom: 60px;
height: clamp(42px, 5vw, 56px);
}
.clip-description {
left: 16px;
bottom: 60px;
max-width: min(38vw, 200px);
line-height: 1.4;
font-size: clamp(8px, 1vw, 11px);
}
.clip-description-emphasis {
font-size: clamp(16px, 3vw, 24px);
} .contact-section,
.contact-section .container,
.contact-shell,
.contact-form-panel,
.contact-form-grid{
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.contact-field,
.contact-field input,
.contact-field select,
.contact-field textarea {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
.contact-shell {
padding: 10px !important;
border-radius: 18px !important;
gap: 16px !important;
grid-template-columns: 1fr !important;
}
.contact-form-panel {
padding: 10px !important;
border-radius: 14px !important;
}
.contact-form-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
font-size: 13px !important;
padding: 10px 8px !important;
}
.contact-form-action {
padding: 0 !important;
margin: 0 !important;
}
body {
overflow-x: hidden !important;
}
} .section-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: #023be2;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 1.2px;
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.section-tag::before {
content: '*';
color: #023be2;
font-size: 30px;
line-height: 1;
margin-top: 10px;
}
.tech-stack-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.section-main-title {
margin: 0;
font-size: 50px;
font-weight: 700;
line-height: 1.2;
color: #1a1a1a;
}
.section-main-subtitle {
margin: 0;
font-size: 43px;
font-weight: 700;
line-height: 1.2;
color: #1a1a1a;
padding-top:2px
}
.section-main-title .text-blue {
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: 18px;
color: #6c757d;
line-height: 1.6;
margin-bottom: 1.5rem;
}
@media (max-width: 1024px) {
.section-main-title {
font-size: 48px;
}
.section-subtitle {
font-size: 17px;
}
.section-main-subtitle {
font-size: 38px;
}
}
@media (max-width: 768px) {
.section-main-title {
font-size: 36px;
}
.section-subtitle {
font-size: 16px;
}
.section-main-subtitle {
font-size: 28px;
}
}
@media (max-width: 480px) {
.section-main-title {
font-size: 28px;
}
.section-subtitle {
font-size: 15px;
}
} .navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1200;
}
.nav-link {
color: #333;
font-weight: 400;
font-size: 16px;
margin: 0 20px;
position: relative;
transition: color 0.2s ease;
}
.nav-link:hover,
.nav-link.is-active,
.nav-link.active {
color: #023be2;
}
.nav-link .arrow {
font-size: 18px;
margin-left: 5px;
transform: rotate(0deg);
display: inline-block;
vertical-align: middle;
position: relative;
top: 1px;
}
.divider {
color: #d1d1d1;
font-weight: 200;
font-size: 18px;
}
@media (min-width: 1024px) and (max-width: 1400px) {
.nav-link {
font-size: 14px;
margin: 0 12px;
}
.btn-gradient {
padding: 8px 18px;
font-size: 13px;
}
.divider {
font-size: 16px;
}
}
@media (max-width: 1199px) {
.offcanvas-body .btn-gradient{
max-width: 200px;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
}
.btn-gradient {
background: #023be2;
color: var(--white);
padding: 10px 25px;
border-radius: 12px;
font-weight: 500;
font-size: 14px;
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
overflow: visible;
}
.btn-gradient::before {
content: '';
position: absolute;
inset: -5px;
background: var(--gradient-blue);
border-radius: 17px;
z-index: -1;
opacity: 0.15;
animation: pulseOut 3s infinite;
transition: opacity 0.3s ease-out;
pointer-events: none;
}
.btn-gradient.no-pulse::before {
content: none;
animation: none;
}
.btn-gradient:hover {
background: #023be2;
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(2, 59, 226, 0.2);
}
.btn-gradient:hover::before {
opacity: 0.3;
}
.btn-gradient .arrow-icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.btn-gradient:hover .arrow-icon {
transform: rotate(35deg);
}
.nav-link-animated {
position: relative;
display: inline-block;
padding-bottom: 4px;
}
.nav-link-animated::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
transition: width 0.3s ease;
}
.nav-link-animated:hover::after {
width: 100%;
}
.custom-navbar {
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.custom-navbar::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
transition: width 0.4s ease;
}
.custom-navbar:hover::after {
width: 100%;
}
.nav-item-wrapper {
position: relative;
display: inline-block;
}
.mobile-menu-item {
border-bottom: 1px solid #f0f0f0;
}
.mobile-submenu {
background: transparent;
padding: 0;
margin-bottom: 0;
border-radius: 0;
}
.mobile-toggle {
padding: 12px 0;
font-size: 16px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.2s ease;
}
.mobile-toggle.active-mobile-item,
.mobile-link:hover,
.mobile-link.is-active,
.mobile-submenu a:hover,
.mobile-submenu a.is-active {
color: #023be2;
}
.mobile-arrow {
transition: transform 0.3s;
}
.mobile-arrow.rotated {
transform: rotate(90deg);
}
.mobile-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: transparent;
padding: 0;
margin-bottom: 0;
}
.mobile-submenu.expanded {
max-height: 1000px;
background: #f9f9f9;
padding: 10px 0;
margin-bottom: 10px;
border-radius: 8px;
}
.submenu-category {
margin-left: 15px;
margin-top: 8px;
}
.category-title {
font-weight: 600;
font-size: 14px;
color: #023be2;
margin-bottom: 5px;
}
.mobile-submenu a {
display: block;
padding: 6px 0;
font-size: 14px;
color: #666;
text-decoration: none;
}
.mobile-link {
display: block;
padding: 12px 0;
font-size: 16px;
color: #333;
text-decoration: none;
border-bottom: 1px solid #eee;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(8, 106, 218, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(8, 106, 218, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(8, 106, 218, 0);
}
}
@keyframes pulseOut {
0% {
transform: scale(0.95);
opacity: 0;
}
5% {
transform: scale(1);
opacity: 0.3;
}
95% {
transform: scale(1.3);
opacity: 0;
}
100% {
transform: scale(1.3);
opacity: 0;
}
} .mega-menu {
position: fixed;
left: 0;
right: 0;
top: var(--navbar-height);
background: white;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1100;
max-height: 0;
overflow: hidden;
}
.mega-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
max-height: 80vh;
}
.mega-menu-content {
padding: 0;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.mega-menu.show .mega-menu-content {
opacity: 1;
transform: translateY(0);
} .mega-menu-header {
padding: 16px 0 14px;
position: relative;
}
.mega-menu-header::after {
content: none;
}
.mega-menu-header .container-xl {
display: flex;
flex-direction: column;
position: relative;
}
.mega-menu-header .container-xl::after {
content: '';
position: absolute;
bottom: -14px;
left: 12px;
right: 12px;
height: 1.5px;
background: var(--gradient-blue);
}
.mega-menu-header-title {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
margin: 0;
}
.mega-menu-header-subtitle {
font-size: 13px;
color: #666;
margin: 3px 0 0;
} .mega-menu-grid {
display: grid;
grid-template-columns: 280px 1fr 340px;
min-height: 400px;
} .mega-menu-sidebar {
border-right: 1px solid #f0f0f0;
padding: 20px 20px;
}
.mega-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.mega-menu-list li {
margin-bottom: 8px;
position: relative;
}
.mega-menu-list a,
.mega-menu-list .menu-item-trigger {
color: #4b5563;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 12px 15px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
}
.mega-menu-list a .cat-icon ,
.mega-menu-list .menu-item-trigger .cat-icon {
width: 44px;
height: 44px;
background: #f8fafc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #64748b;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
.mega-menu-list a:hover .cat-icon,
.mega-menu-list .menu-item-trigger:hover .cat-icon  {
background: #eef2ff;
color: #023be2;
transform: scale(1.05);
}
.mega-menu-list li.active a .cat-icon,
.mega-menu-list li.active .menu-item-trigger .cat-icon  {
background: var(--gradient-blue);
color: white;
box-shadow: 0 4px 15px rgba(2, 59, 226, 0.25);
transform: none;
}
.mega-menu-list li.active a,
.mega-menu-list li.active .menu-item-trigger {
background: transparent;
color: #1a1a1a;
box-shadow: none;
font-weight: 700;
}
.mega-menu-list li.active::after {
content: '';
position: absolute;
right: -28px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
filter: drop-shadow(2px 0 1px rgba(0,0,0,0.05));
z-index: 10;
}
.mega-menu-list a:hover,
.mega-menu-list .menu-item-trigger:hover {
color: #023be2;
} .mega-menu-main {
padding: 20px 40px;
background: white;
}
.column-label {
font-size: 14px;
font-weight: 600;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
display: block;
}
.mega-menu-main .row {
margin: 0 -15px;
}
.service-item-link {
display: block;
padding: 12px 18px;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 4px;
border-bottom: 2px solid transparent;
}
.service-item-link:hover {
background: rgba(2, 59, 226, 0.08);
border-bottom-color: #023be2;
}
.service-item-title {
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 2px;
display: block;
}
.service-item-desc {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
display: block;
} .mega-menu-engagement {
border-left: 1px solid #f0f0f0;
padding: 20px 30px;
background: rgba(2, 59, 226, 0.03); 
}
.engagement-title {
font-size: 17px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.engagement-subtitle {
font-size: 12px;
color: #6b7280;
line-height: 1;
margin-bottom: 20px;
}
.engagement-list {
list-style: none;
padding: 0;
margin: 0;
}
.engagement-item {
display: flex;
gap: 12px;
margin-bottom: 18px;
}
.engagement-icon-wrapper {
width: 50px;
height: 50px;
min-width: 50px;
background: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #023be2;
border: 1px solid #f0f0f0;
transition: background 0.3s, color 0.3s;
}
.engagement-item:hover .engagement-icon-wrapper{
background: #023be2; 
color: white; 
}
.engagement-text-title {
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 3px;
}
.engagement-text p {
font-size: 12px;
color: #6b7280;
margin: 0;
line-height: 1.3;
} @media (max-width: 991px) {
.mega-menu-grid {
grid-template-columns: 1fr;
}
.mega-menu-engagement {
display: none;
}
}
@media (max-width: 768px) {
.mega-menu {
display: none;
}
} .mega-menu-footer {
margin-top:0px; padding: 0px 0 30px;
border-top: 1px solid #f0f0f0;
}
.footer-label {
font-size: 11px;
color: #9ca3af;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
} .award-img {
height: 65px; width: auto;
object-fit: contain;
} .btn-footer {
background: #023be2; border: none;
padding: 12px 28px;
border-radius: 8px;
color: white;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(2, 59, 226, 0.15);
text-decoration:none;
}
.btn-footer:hover {
background: #012bb3;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(2, 59, 226, 0.25);
} .mega-menu.show {
max-height: 90vh; overflow-y: auto;
} @media (max-width: 991px) {
.mega-menu-footer .d-flex {
flex-direction: column !important;
align-items: flex-start !important;
gap: 25px;
}
.award-img {
height: 40px; }
.btn-footer {
width: 100%;
text-align: center;
}
} .choose-section {
padding: var(--section-spacing) 20px;
margin: 0;
background: #ffffff;
}
.choose-section .container {
max-width: var(--section-width);
padding: 0;
}
@media (max-width: 768px) {
.choose-section {
padding: var(--section-spacing-mobile) 20px;
}
}
.choose-section h6,
.choose-section h1,
.choose-section p {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.choose-section.animate-in h6 {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.choose-section.animate-in h1 {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.choose-section.animate-in p {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.text-blue {
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.rotating-text-container {
position: absolute;
top: -40px;
left: -40px;
width: 180px;
height: 180px;
z-index: 2;
animation: rotateText 15s linear infinite;
}
@keyframes rotateText {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#circlePath { fill: transparent; }
.rotating-text-content {
fill: #023be2;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
}
.col-lg-6.position-relative {
overflow: visible;
scrollbar-width: none;
-ms-overflow-style: none;
}
.col-lg-6.position-relative::-webkit-scrollbar {
display: none;
}
.col-lg-6.position-relative::before,
.col-lg-6.position-relative::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.1);
z-index: 10;
pointer-events: none;
opacity: 0;
transition: transform 3.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0s;
}
.col-lg-6.position-relative::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
transform: translate(0%, 0%);
}
.col-lg-6.position-relative::after {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
transform: translate(0%, 0%);
}
.col-lg-6.position-relative:hover::before {
opacity: 1;
transform: translate(-100%, -100%);
}
.col-lg-6.position-relative:hover::after {
opacity: 1;
transform: translate(100%, 100%);
}
.col-lg-6.position-relative:hover .main-hero-img {
transform: scale(1.03);
}
.main-hero-img {
border: 1px solid rgba(2, 59, 226, 0.1);
box-shadow: 0 20px 40px rgba(2, 59, 226, 0.1);
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.2s;
transition: transform 0.8s ease;
min-height: 600px;
object-fit: cover;
}
@media (max-width: 480px) {
.main-hero-img {
min-height: 320px; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stats-container {
background: white;
border: 8px solid transparent; 
border-radius: 30px;
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, #023be2 0%, rgba(2, 59, 226, 0.1) 50%, transparent 60%) border-box;
position: relative;
box-shadow: 0 0 20px rgba(2, 59, 226, 0.1);
margin-top: -20px;
max-width: 90%;
z-index: 10;
} 
.stat-card-horizontal {
padding: 5px;
}
.stat-circle-number {
width: 70px;
height: 70px;
border-radius: 50%;
border: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
background: #023be2;
flex-shrink: 0;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
}
.stat-circle-number::before {
content: '';
position: absolute;
width: 0;
height: 0;
border-radius: 50%;
background: #00a1c5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
z-index: 0;
}
.stat-circle-number:hover::before {
width: 100%;
height: 100%;
}
.stat-circle-number h2 {
color: white;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 1;
}
.stat-label {
font-size: 16px;
font-weight: 500;
color: #333;
text-align: left;
}
.check-circle {
width: 20px;
height: 20px;
min-width: 20px;
border: 2px solid #023be2;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.check-circle::after {
content: '';
width: 8px;
height: 8px;
background: #023be2;
border-radius: 50%;
}
@media (max-width: 991px) {
.rotating-text-container {
width: 120px;
height: 120px;
top: -30px;
left: -30px;
}
}
@media (max-width: 1280px) {
.stats-container {
margin-top: 2rem;
}
}
@media (max-width: 1024px) {
.stats-container {
max-width: 95%;
border-width: 6px;
}
.stats-container .col-md-3 {
flex: 0 0 50%;
max-width: 50%;
}
.stat-circle-number {
width: 60px;
height: 60px;
}
.stat-circle-number h2 {
font-size: 18px;
}
.stat-label {
font-size: 14px;
}
.clip-description {
bottom: 60px;
}
.services-showcase .container {
max-width: 100%;
}
}
@media (max-width: 768px) {
.choose-section .display-4 {
font-size: 2rem;
}
.choose-section .text-secondary {
font-size: 14px;
}
.stats-container {
margin-top: 2rem;
max-width: 100%;
border-width: 5px;
padding: 1rem !important;
}
.stats-container .col-md-3,
.stats-container .col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
.stat-card-horizontal {
flex-direction: column;
text-align: center;
gap: 0.5rem !important;
}
.rotating-text-container {
width: 100px;
height: 100px;
top: -25px;
left: -10px;
}
.rotating-text-content {
font-size: 6px;
}
.stat-circle-number {
width: 50px;
height: 50px;
}
.stat-circle-number h2 {
font-size: 14px;
}
.stat-label {
font-size: 12px;
}
}
@media (max-width: 480px) {
.stats-container {
border-width: 4px;
padding: 0.75rem !important;
}
.stat-circle-number {
width: 45px;
height: 45px;
}
.stat-circle-number h2 {
font-size: 12px;
}
.stat-label {
font-size: 11px;
}
} .grid-section {
padding: var(--section-spacing) 20px;
background: #f9fafb;
}
.grid-section .section-main-title,
.grid-section .section-subtitle {
opacity: 0;
}
.grid-section .section-tag {
opacity: 0;
}
.grid-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.grid-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.grid-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.grid-container {
display: grid;
grid-template-columns: 0.75fr 1.4fr 0.8fr;
grid-template-rows: 330px;
grid-auto-rows: 330px;
gap: 20px;
max-width: var(--section-width);
width: 100%;
margin: 0 auto;
} .grid-container .card {
border-radius: 24px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.btn-white {
background: #ffffff;
color: #000;
padding: 10px 25px;
border-radius: 12px; font-weight: 500;
font-size: 14px;
border: none;
display: inline-flex;
align-items: center;
gap: 8px;
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
cursor: pointer;
transition: 0.3s ease;
text-decoration: none;
} .btn-arrow {
width: 16px;
height: 16px;
object-fit: contain;
transition: transform 0.3s ease;
filter:brightness(0);
}
.btn-white:hover .btn-arrow {
transform: rotate(35deg);
}
.reviewed-text {
font-size: 12px;
letter-spacing: 0.5px;
color: #5c6368;
font-weight: 400;
position: absolute;
top: 30px;
left: 20%;
transform: translateX(-50%);
z-index: 2;
}
.arrow-img {
width: 40px;
height: 40px;
margin-left: auto;
transition: transform 0.3s ease;
filter: brightness(0);
} .card-header:hover .arrow-img {
transform: rotate(37deg);
}
.grid-container .card-white { background: #fff;     border: 1px solid rgba(2, 59, 226, 0.15); box-shadow: 0 4px 20px rgba(0,0,0,0.02); }
.grid-container .card-white.span-wide { padding-top: 40px; padding-bottom: 40px;     border: 1px solid rgba(2, 59, 226, 0.15);}
.grid-container .card-light-green { background:  linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%);     border: 1px solid rgba(2, 59, 226, 0.15);}
.grid-container .card-light-blue { background:  linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%);     border: 1px solid rgba(2, 59, 226, 0.15);}
.grid-container .card-orange { background-color: white; padding: 0; align-items: center; justify-content: center; } .grid-container .span-wide { grid-column: span 1; }
.grid-container .span-extra-wide { grid-column: span 2; } .grid-title { font-size: 1.4rem; color: var(--text-dark); font-weight: 500;}
.grid-container p {  line-height: 1.45; color: var(--text-gray); margin-bottom: 15px; }
.grid-container .brand { color: var(--brand-blue); font-weight: 700; } .grid-container .card-header { display: flex; align-items: center; gap: 30px; margin-bottom: 20px; background-color: transparent; border-bottom: none; padding: 0; text-decoration: none; }
.grid-container .logo { width: 50px; height: 50px; }
.grid-container .rating { font-size: 0.95rem; font-weight: 300; color: #5c6368;}
.grid-container .card-light-blue .card-header {
position: relative;
flex-wrap: wrap;
padding-top: 22px;
row-gap: 10px;
}
.grid-container .card-light-blue .reviewed-text {
top: 0;
left: 0;
transform: none;
}
.grid-container .stars {
display: flex;
gap:0.5px;
padding-bottom: 8px;
}
.star {
width: 17px;
height: 17px;
fill: #e62415;
stroke: #e62415;
stroke-width: 2;
stroke-linejoin: round;   
stroke-linecap: round;
}
.grid-container .explore { font-weight: 700; text-decoration: none; color: #000; font-size: 0.85rem; margin-top: auto; }
.grid-container .explore span { color: #ff4f4f; font-size: 1rem; } .grid-container .contact-badge {
position: absolute;
top: 20px;
background: #fff;
padding: 8px 16px;
border-radius: 10px;
font-size: 0.8rem;
font-weight: 700;
}
.grid-container .person-img { width: 100%; height: 100%; object-fit: cover; } .grid-container .card-horizontal {
display: flex;
flex-direction: row;
padding: 0;
}
.grid-container .hero-img { width: 50%; height: 100%; object-fit: cover; }
.grid-container .card-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 1024px) {
.grid-container { grid-template-columns: repeat(2, 1fr); }
.grid-container { 
grid-template-columns: repeat(2, 1fr); 
grid-template-rows: auto;
grid-auto-rows: auto;
}
.grid-container .span-extra-wide { grid-column: span 2; }
.grid-container h3 { font-size: 1.3rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.reviewed-text { top: 30px; }
.grid-container .card-horizontal .card-body {
padding-left: 50px;
}
.grid-container .card:nth-child(1) { grid-column: 1;
grid-row: 1;
}
.grid-container .card:nth-child(4) { grid-column: 2;
grid-row: 1;
}
.grid-container .card:nth-child(2) { grid-column: 1;
grid-row: 2;
}
.grid-container .card:nth-child(3) { grid-column: 2;
grid-row: 2;
}
.grid-container .card:nth-child(5) { grid-row: 3;
}
}
@media (max-width: 768px) {
.grid-container { grid-template-columns: 1fr; }
.grid-container .span-extra-wide, .grid-container .span-wide { grid-column: span 1; }
.grid-container .card-horizontal { flex-direction: column; }
.grid-container .hero-img { width: 100%; height: 200px; }
.grid-container h3 { font-size: 1.2rem; }
.grid-container .card-light-blue .card-header {
padding-top: 24px;
gap: 12px;
}
.grid-container .card-light-blue .logo {
width: 44px;
height: 44px;
}
} .services-showcase {
padding: 56px 20px;
background: #ffffff;
}
.services-showcase .container {
max-width: var(--section-width);
}
@media (max-width: 768px) {
.services-showcase {
padding: var(--section-spacing-mobile) 16px;
}
}
.section-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: #023be2;
margin-bottom: 16px;
text-transform: uppercase;
}
.section-description {
color: #6c757d;
margin-bottom: 1.5rem;
}
.section-tag-dot {
width: 22px;
height: 22px;
border: 2px solid #023be2;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #023be2;
}
.heading-grid {
display: grid;
grid-template-columns: minmax(320px, 1.2fr) minmax(320px, 1fr);
gap: 30px;
align-items: start;
margin-bottom: 38px;
}
.heading-title {
margin: 0;
font-size: clamp(28px, 4vw, 56px);
font-weight: 700;
line-height: 1.2;
max-width: 820px;
}
.services-showcase .section-tag,
.services-showcase .section-main-title,
.services-showcase .section-subtitle,
.services-showcase .heading-title,
.services-showcase .heading-copy {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.heading-copy {
margin: 0;
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.55;
color: #6c757d;
max-width: 620px;
}
.services-showcase.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.services-showcase.animate-in .section-main-title,
.services-showcase.animate-in .heading-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.services-showcase.animate-in .section-subtitle,
.services-showcase.animate-in .heading-copy {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.panel-shell {
background: #f8f9fa;
border-radius: 48px;
padding: 25px;
}
.panel-grid {
display: grid;
grid-template-columns: minmax(250px, 360px) 1fr;
gap: 20px;
align-items: stretch;
}
.tabs-col,
.details-col {
background: #ffffff;
border-radius: 30px;
padding: 16px;
}
.service-tab {
width: 100%;
border: 0;
background: #f8f9fa;
border-radius: 999px;
min-height: 56px;
margin-bottom: 10px;
padding: 12px 14px 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
font-family: inherit;
font-size: 16px;
font-weight: 500;
color: #111827;
text-align: left;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.service-tab:last-child {
margin-bottom: 0;
}
.service-tab:hover {
transform: translateX(2px);
}
.service-tab.active {
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.1) 2.06%, rgba(0, 161, 197, 0.1) 99.67%);
color: #023be2;
}
.tab-arrow-img {
width: 25px;
height: 25px;
padding: 4px;
background: linear-gradient(
90.38deg,
rgba(2, 59, 226, 0.8) 2.06%,
rgba(0, 161, 197, 0.8) 99.67%
);
border-radius: 50%;
transition: all 0.25s ease;
transform: rotate(125deg);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
transform: rotate(125deg) translateZ(0);
}
.service-tab.active .tab-arrow-img {
transform: rotate(37deg) translateZ(0);
}
.details-col {
padding: 28px;
position: relative;
min-height: 500px;
display: flex;
flex-direction: column;
}
.services-showcase .details-col[hidden] {
display: none !important;
}
.panel-cta-float {
position: absolute;
top: 26px;
right: 26px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 0;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
color: #ffffff;
font-size: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 1;
overflow: visible;
}
.panel-cta-float::before {
content: '';
position: absolute;
inset: -5px;
background: var(--gradient-blue);
border-radius: 50%;
z-index: -1;
opacity: 0.15;
animation: pulseOut 3s infinite;
transition: opacity 0.3s ease-out;
pointer-events: none;
}
.panel-cta-float:hover::before {
opacity: 0.3;
}
.detail-title {
margin: 0 0 12px;
font-size: clamp(26px, 2vw, 38px);
line-height: 1.2;
max-width: calc(100% - 86px);
font-weight: 410;
}
.detail-copy {
margin: 0;
color: #6c757d;
line-height: 1.45;
max-width: 1000px;
}
.feature-grid {
list-style: none;
padding: 0;
margin: 35px 0;
display: grid;
grid-template-columns: repeat(2, minmax(230px, 1fr));
gap: 20px 34px;
}
.feature-item {
display: flex;
align-items: center;
gap: 10px;
color: #111827;
font-size: 18px;
line-height: 1.25;
position: relative;
cursor:default !important;
}
.feature-item::before {
content: '';
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
min-width: 18px;
border: 2px solid #023be2;
border-radius: 50%;
flex-shrink: 0;
background-color: #023be2;
background-clip: content-box;
padding: 4px;
}
.feature-item:hover {
color: #023be2;
cursor: pointer;
}
.detail-bottom {
margin-top: auto;
border: 1px solid rgba(2, 59, 226, 0.25);
background: rgba(2, 59, 226, 0.05);
border-radius: 20px;
padding: 20px;
}
.bottom-title {
margin: 0 0 14px;
font-size: 20px;
line-height: 1.35;
font-weight:500;
}
.cta-pill {
display: inline-flex;
align-items: center;
text-decoration: none;
background: #ffffff;
border: 1px solid #023be2;
border-radius: 999px;
color: #023be2;
padding: 4px 4px 4px 20px;
font-weight: 500;
transition: all 0.3s ease;
overflow: visible;
white-space: nowrap;
}
.cta-pill:hover {
transform: translateY(-1px);
background: #023be2;
color: #ffffff;
}
.cta-pill-arrow {
width: 38px;
height: 38px;
border-radius: 50%;
margin-left: 12px;
margin-right: -20px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #023be2;
border: 2px solid transparent;
position: relative;
z-index: 1;
overflow: visible;
transition: all 0.3s ease;
}
.cta-pill:hover .cta-pill-arrow {
background: #ffffff;
border-color: #023be2;
}
.cta-pill-arrow img {
width: 20px;
height: 20px;
transform: rotate(20deg);
transition: all 0.3s ease;
}
.cta-pill:hover .cta-pill-arrow img {
transform: rotate(37deg);
filter: brightness(0) invert(0);
}
.panel-cta-float img {
width: 26px;
height: 26px;
transform: rotate(10deg);
transition: transform 0.3s ease;
}
.panel-cta-float:hover img {
transform: rotate(37deg);
} .custom-app-cta-section {
padding: 60px 20px 60px;
background: #ffffff;
}
.custom-app-cta-section.dark-bg {
background: #0b101e;
}
.custom-app-cta-card {
max-width: var(--section-width);
margin: 0 auto;
border-radius: 30px;
overflow: hidden;
background-image: url(https://primocys.com/wp-content/uploads/2026/03/Frame-38486.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.custom-app-cta-card::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.08);
}
.custom-app-cta-content {
position: relative;
z-index: 1;
text-align: center;
padding: clamp(50px, 5vw, 80px) clamp(20px, 5vw, 48px);
max-width: 920px;
margin: 0 auto;
}
.custom-app-cta-content .section-subtitle {
color: #ffffff;
}
.custom-app-cta-title {
margin: 0;
margin-bottom:10px;
color: #ffffff;
font-size: clamp(26px, 2.8vw, 38px);
font-weight: 700;
line-height: 1.2; opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.custom-app-cta-section.animate-in .custom-app-cta-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.custom-app-cta-text {
margin: 12px auto 18px;
max-width: 760px;
color: #ffffff;
font-size: 20px;
font-weight: 500;
line-height: 1.45;
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.custom-app-cta-section.animate-in .custom-app-cta-text {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.custom-app-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 180px;
padding: 12px 24px;
border-radius: 14px;
background: #ffffff;
color: #0664d8;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.4px;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-app-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.custom-app-cta-btn img {
width: 22px;
height: 22px;
transform: rotate(20deg);
transition: transform 0.3s ease;
}
.custom-app-cta-btn:hover img {
transform: rotate(36deg);
}
@media (max-width: 1199px) {
.heading-grid {
grid-template-columns: 1fr;
}
.panel-shell {
padding: 20px;
border-radius: 32px;
}
.panel-grid {
grid-template-columns: 1fr;
}
.panel-grid > .details-col {
display: none;
}
.tabs-col.accordion-mode {
background: transparent;
border-radius: 0;
padding: 0;
display: grid;
gap: 12px;
}
.tabs-col.accordion-mode .service-accordion-item {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 24px;
padding: 8px;
}
.tabs-col.accordion-mode .service-tab {
margin-bottom: 0;
border-radius: 18px;
min-height: 54px;
background: #f8f9fa;
}
.tabs-col.accordion-mode .service-tab.active {
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.12) 2.06%, rgba(0, 161, 197, 0.12) 99.67%);
}
.tabs-col.accordion-mode .service-accordion-panel {
margin-top: 8px;
padding: 6px 12px 12px;
}
.tabs-col.accordion-mode .service-accordion-panel[hidden] {
display: none;
}
.tabs-col.accordion-mode .service-accordion-panel .detail-title {
max-width: none;
font-size: clamp(24px, 3vw, 32px);
}
.tabs-col.accordion-mode .service-accordion-panel .feature-grid {
grid-template-columns: 1fr;
gap: 12px;
margin: 22px 0 20px;
}
.tabs-col.accordion-mode .service-accordion-panel .feature-item {
font-size: 16px;
}
.tabs-col.accordion-mode .service-accordion-panel .detail-bottom {
margin-top: 0;
}
.custom-app-cta-title {
font-size: clamp(24px, 3vw, 34px);
white-space: normal;
}
.custom-app-cta-text {
font-size: 18px;
}
.custom-app-cta-btn {
font-size: 16px;
padding: 11px 22px;
}
.tabs-col.accordion-mode .service-tab .tab-arrow-img {
transform: rotate(-55deg);
}
.tabs-col.accordion-mode .service-tab.active .tab-arrow-img {
transform: rotate(125deg);
}
}
@media (max-width: 1024px) {
.tabs-col:not(.accordion-mode) .tab-arrow-img {
transform: rotate(-55deg) translateZ(0);
}
.tabs-col:not(.accordion-mode) .service-tab.active .tab-arrow-img {
transform: rotate(124deg) translateZ(0);
}
}
@media (max-width: 767px) {
.services-showcase {
padding: var(--section-spacing-mobile) 16px;
}
.tabs-col,
.details-col {
border-radius: 22px;
}
.details-col {
padding: 20px;
}
.panel-cta-float {
width: 48px;
height: 48px;
top: 18px;
right: 18px;
}
.detail-title {
max-width: calc(100% - 62px);
}
.feature-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.cta-pill {
padding-left: 14px;
}
.service-tab {
min-height: 52px;
font-size: 16px;
padding-left: 14px;
}
.custom-app-cta-section {
padding: var(--section-spacing-mobile) 20px;
}
.custom-app-cta-card {
border-radius: 22px;
}
.custom-app-cta-content {
padding: 24px 16px;
}
.custom-app-cta-title {
font-size: clamp(20px, 5.5vw, 28px);
white-space: normal;
}
.custom-app-cta-text {
margin: 16px auto 24px;
font-size: 16px;
line-height: 1.5;
}
.custom-app-cta-btn {
min-width: 160px;
padding: 10px 18px;
border-radius: 12px;
font-size: 15px;
}
.custom-app-cta-btn img {
width: 18px;
height: 18px;
}
} .smart-solutions-section {
background: #f9fafb;
padding: var(--section-spacing) 20px;
}
.smart-solutions-container {
max-width: var(--section-width);
margin: 0 auto;
}
.smart-solutions-section .section-tag,
.smart-solutions-section .section-main-title,
.smart-solutions-section .heading-copy {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.smart-solutions-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.smart-solutions-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.smart-solutions-section.animate-in .heading-copy {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.smart-solutions-heading {
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.8fr);
gap: 24px;
margin-bottom: 28px;
align-items: center;
}
.smart-solutions-title-main {
margin: 0;
color: #1a1a1a;
font-size: clamp(36px, 5vw, 64px);
font-weight: 700;
line-height: 1.02;
letter-spacing: 0.4px;
}
.smart-solutions-title-sub {
margin: 6px 0 0;
color: #111827;
font-size: clamp(30px, 4vw, 54px);
font-weight: 500;
line-height: 1.05;
}
.smart-solutions-intro {
margin: 0;
color: #4b5563;
font-size: clamp(16px, 1.25vw, 22px);
line-height: 1.4;
max-width: 540px;
}
.smart-solutions-table {
border: 1px solid #d1d5db;
border-left: 0;
border-right: 0;
background: #f9fafb;
}
.smart-solutions-row {
display: grid;
grid-template-columns: 130px minmax(220px, 0.8fr) 1fr;
align-items: center;
min-height: 180px;
border-bottom: 1px solid #d1d5db;
transition: all 0.3s ease;
}
.smart-solutions-row:hover {
background: rgba(2, 59, 226, 0.03);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(2, 59, 226, 0.1);
}
.smart-solutions-row:hover .smart-icon-cell {
color: #023be2;
}
.smart-solutions-row:last-child {
border-bottom: 0;
}
.smart-icon-cell {
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #d1d5db;
color: #6b7280;
transition: all 0.3s ease;
}
.smart-icon-cell svg {
width: 62px;
height: 62px;
transition: transform 0.3s ease;
transform-origin: center;
}
.smart-solutions-row:hover .smart-icon-cell svg {
transform: scale(1.4);
}
.smart-title-cell,
.smart-copy-cell{
padding: 28px 24px;
}
.smart-title-cell h3 {
margin: 0;
color: #1a1a1a;
font-size: 30px;
font-weight: 500;
line-height: 1.12;
}
.smart-copy-cell p {
margin: 0;
color: #4b5563;
font-size: clamp(14px, 1.1vw, 16px);
line-height: 1.45;
max-width: 560px;
}
.smart-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}
.smart-tags span,
.smart-tags a,
.smart-solutions-tags {
display: inline-flex;
align-items: center;
background:  linear-gradient(90.38deg, rgba(2, 59, 226, 0.15) 2.06%, rgba(0, 161, 197, 0.15) 99.67%);
border: 1px solid rgba(2, 59, 226, 0.25);
color:#023be2;
border-radius: 999px;
padding: 8px 16px;
font-size: 16px;
line-height: 1;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
@media (max-width: 1199px) {
.smart-solutions-heading {
grid-template-columns: 1fr;
gap: 16px;
}
.smart-solutions-row {
grid-template-columns: 96px minmax(180px, 0.9fr) 1fr;
}
.smart-icon-cell,
.smart-solutions-row {
min-height: 160px;
}
.smart-title-cell,
.smart-copy-cell{
padding: 20px 16px;
}
.smart-title-cell h3 {
font-size: 25px;
}
.smart-tags span {
font-size: 14px;
}
}
@media (max-width: 767px) {
.smart-solutions-section {
padding: var(--section-spacing-mobile) 20px;
}
.smart-solutions-row {
grid-template-columns: 72px 1fr;
align-items: start;
min-height: auto;
}
.smart-icon-cell {
min-height: 100%;
padding-top: 20px;
grid-row: 1 / span 2;
}
.smart-icon-cell svg {
width: 42px;
height: 42px;
}
.smart-title-cell {
padding-bottom: 8px;
}
.smart-title-cell h3 {
font-size: 24px;
}
.smart-copy-cell {
grid-column: 2;
padding-top: 0;
padding-bottom: 10px;
}
.smart-tags {
gap: 8px;
margin-top: 14px;
}
.smart-tags span {
padding: 7px 12px;
font-size: 13px;
}
} .testimonials-section {
padding: var(--section-spacing) 20px;
background-color: #f9f9f9;
}
.testimonials-section .container {
max-width: var(--section-width);
background-color: #f9f9f9;
}
.testimonials-section .section-tag,
.testimonials-section .section-main-title {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.testimonials-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.testimonials-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.testimonials-header {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: flex-start;
margin-bottom: 36px;
}
.clutch-widget {
display: flex;
justify-content: flex-end;
align-items: center;
}
.testimonials-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: #023be2;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.all-testimonials-btn {
margin-top: 30px;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #ffffff;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
font-size: 17px;
font-weight: 500;
padding: 12px 12px 12px 22px;
backdrop-filter: blur(6px);
}
.all-testimonials-arrow {
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
font-size: 22px;
line-height: 1;
}
.testimonials-main-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 24px;
}
.rating-card {
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%);
border: 1px solid rgba(2, 59, 226, 0.15);
border-radius: 30px;
padding: 36px 26px;
color: #1a1a1a;
display: flex;
flex-direction: column;
justify-content: center;
}
.rating-avatars {
display: flex;
}
.rating-avatars img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #ffffff;
object-fit: cover;
margin-left: -10px;
}
.rating-avatars img:first-child {
margin-left: 0;
}
.rating-client-text {
margin: 0 0 16px 0;
text-align: center;
font-size: 28px;
color: #1a1a1a;
font-weight: 600;
line-height: 1;
}
.rating-client-line {
display: flex;
align-items: center;
justify-content: center;
}
.rating-card-description {
margin: 32px 0;
text-align: center;
font-size: 16px;
line-height: 1.5;
font-weight: 500;
color: #1a1a1a;
}
.rating-card .btn-gradient {
margin: 0 auto;
}
.testimonials-slider-shell {
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 30px;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%);
padding: 26px 20px;
overflow: hidden;
position: relative;
}
.testimonials-slider {
display: grid;
grid-template-columns: repeat(6, calc(50% - 8px));
gap: 14px;
transition: transform 0.5s ease;
}
.testimonial-review-card {
padding: 10px 18px 12px;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
}
.testimonial-review-card:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 10%;
height: 80%;
width: 1px;
background: rgba(2, 59, 226, 0.2);
}
.testimonials-slider .testimonial-review-card.is-second-visible::after {
display: none;
}
.testimonial-review-card:nth-child(2) {
border-right: none;
}
.testimonial-review-card:first-child {
border-right: none;
}
.testimonial-brand-row {
display: flex;
align-items: center;
gap: 8px;
}
.testimonial-brand-mark {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
}
.testimonial-brand-name {
color: #1a1a1a;
font-size: 28px;
line-height: 1;
font-weight: 600;
}
.testimonial-quote {
margin-left: auto;
color: #00a1c5;
font-size: 42px;
line-height: 0.7;
font-weight: 700;
}
.testimonial-review-card p {
margin: 20px 0 auto;
color: #4b5563;
font-size: 16px;
}
.testimonial-review-footer {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-end;
}
.testimonial-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ffffff;
}
.client-name {
margin: 0;
font-size: 20px;
line-height: 1.05;
font-weight: 600;
}
.testimonial-review-footer span {
color: #6c757d;
font-size: 16px;
}
.testimonial-stars {
color: #FDB022 !important; 
font-size: 18px !important;
letter-spacing: 2px;
}
.testimonials-dots {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 12px;
}
.testimonials-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(2, 59, 226, 0.3);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.dot-mobile-only {
display: none;
}
.testimonials-dots .dot.active {
width: 10px;
height: 10px;
background: #023be2;
}
.testimonials-dots .dot.active::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 1px solid #023be2;
border-radius: 50%;
}
.testimonials-logos-grid {
margin-top: 34px;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 18px;
}
.testimonial-logo-box {
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
min-height: 96px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.95);
font-size: clamp(22px, 1.7vw, 33px);
font-weight: 600;
background: rgba(0, 0, 0, 0.18);
}
@media (max-width: 1199px) {
.testimonials-main-grid {
grid-template-columns: 1fr;
}
.rating-card {
max-width: 100%;
align-items: center;
text-align: center;
}
.testimonials-logos-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.testimonials-header {
flex-direction: column;
margin-bottom: 24px;
}
.testimonials-clutch-wrap {
margin-left: 0;
}
.all-testimonials-btn {
margin-top: 0;
}
.testimonials-slider {
grid-template-columns: repeat(4, calc(50% - 7px));
}
.testimonial-review-card:nth-child(2) {
border-right: none;
}
.testimonial-review-card:first-child::after {
display: block;
}
}
@media (max-width: 768px) {
.testimonial-review-card::after {
display: none !important;
}
.testimonials-slider {
grid-template-columns: repeat(4, 100%);
gap: 0;
}
.dot-mobile-only {
display: block;
}
}
@media (max-width: 767px) {
.testimonials-section {
padding: var(--section-spacing-mobile) 16px;
}
.testimonials-slider {
grid-template-columns: repeat(4, 100%);
gap: 0;
}
.testimonials-slider-shell {
padding: 20px 16px;
}
.testimonials-slider-shell::before {
display: none;
}
.testimonial-review-card {
padding: 16px;
}
.testimonial-brand-name {
font-size: 22px;
}
.testimonial-review-card p {
font-size: 14px;
margin: 16px 0 20px;
}
.dot-mobile-only {
display: block;
}
.testimonials-logos-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.testimonial-logo-box {
min-height: 80px;
font-size: 24px;
}
.client-name {
font-size: 16px;
}
.testimonial-review-footer span {
font-size: 18px;
}
}
.google-review-widget {
display: inline-flex;
align-items: center;
text-decoration: none;
padding: 8px 55px 8px 30px ;
position: relative;
transition: all 0.3s ease;
min-height: 54px;
}
.review-widget-border {
border: 1px solid rgba(2, 59, 226, 0.2);
border-radius: 10px;
}
.google-review-widget::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
width: 30px;
height: 30px;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.3s ease;
background: url(https://dev.primocys.com/wp-content/uploads/2026/01/arrow-up-1.webp) center/contain no-repeat;
filter: brightness(0);
}
.google-review-widget:hover::after {
transform: translateY(-50%) rotate(37deg);
}
.bg-gradient{
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%) !important;
}
.google-review-widget .reviewed-text {
position: absolute;
top: 15px;
left: 80px;
font-size: 11px;
color: #5c6368;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
.google-review-widget .logo {
width: 100px;
height: 60px;
margin-right: 12px;
margin-top: 17.5px;
object-fit: contain;
filter:grayscale(100%)
}
.google-review-widget .rating {
display: flex;
flex-direction: column;
justify-content: center; }
.google-review-widget .stars {
display: flex;
gap: 2px;
line-height: 1;
}
.google-review-widget .star {
width: 16px;
height: 16px;
}
.google-review-widget .rating span {
font-size: 0.95rem;
color: #5c6368;
font-weight: 300;
line-height: 1.2;
margin-top: 10px;
}
.upwork-review-widget .logo {
width: 106px;
height: 30px;
margin-right: 0;
margin-top: 0;
}
.upwork-review-widget {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
min-width: 146px;
padding: 20px 55px 20px 30px;
position: relative;
text-decoration: none;
transition: all 0.3s ease;
min-height: 54px;
}
.upwork-review-widget::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
width: 30px;
height: 30px;
transform: translateY(-50%);
background: url(https://dev.primocys.com/wp-content/uploads/2026/01/arrow-up-1.webp) center/contain no-repeat;
filter:brightness(0)
}
.upwork-review-widget .reviewed-text {
position: static;
}
.upwork-review-widget .rating {
align-items: center;
}
.upwork-review-widget .rating span {
margin-top: 0;
}
.testimonial-play-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease;
margin-left: auto;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.testimonial-play-btn::before {
content: '';
position: absolute;
inset: -5px;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
border-radius: 50%;
z-index: -1;
opacity: 0.3;
animation: videoPulse 2s infinite;
}
@keyframes videoPulse {
0% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.3);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.testimonial-play-btn:hover {
transform: scale(1.1);
}
.testimonial-play-btn svg {
margin-left: 2px;
}
.video-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.video-modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.video-modal-content {
position: relative;
width: 90%;
max-width: 900px;
aspect-ratio: 16/9;
}
.video-modal-close {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: white;
font-size: 40px;
cursor: pointer;
line-height: 1;
}
.video-modal-close:hover {
color: #00a1c5;
} .services-section {
padding: var(--section-spacing) 20px;
background: #ffffff;
}
.services-section .container {
max-width: var(--section-width);
padding: 0;
}
.services-section .section-tag,
.services-section .section-main-title,
.services-section .section-subtitle {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.services-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.services-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.services-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 60px;
}
.main-heading {
font-size: var(--heading-title-size);
font-weight: 800;
line-height: 1.1;
margin: 0;
letter-spacing: -1px;
}
.explore-top {
max-width: 350px;
}
.explore-top a {
text-decoration: none;
color: #000;
font-weight: bold;
display: block;
margin-bottom: 15px;
}
.explore-top p {
color: var(--text-gray);
font-size: 0.95rem;
line-height: 1.5;
} .services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--border-color);
}
.service-card {
padding: 50px 30px;
border-bottom: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
} .service-card:nth-child(3n) {
border-right: none;
}
.card-number {
font-size: 1.8rem;
margin-top: 0;
margin-bottom: 15px;
}
.card-desc {
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 30px;
min-height: 50px; } .tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.tags span {
border: 1px solid #ddd;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.1) 2.06%, rgba(0, 161, 197, 0.1) 99.67%);
border: 1px solid rgba(2, 59, 226, 0.15);
padding: 6px 18px;
border-radius: 50px;
font-size: 0.85rem;
color: #333;
color: #023be2;
font-weight: 500;
}
.service-card .btn-gradient::before {
display: none;
} .explore-btn {
background: #111;
color: white;
border: none;
padding: 12px 28px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.explore-btn:hover {
background: var(--gradient-blue);
} @media (max-width: 992px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
.service-card:nth-child(3n) { border-right: 1px solid var(--border-color); }
.service-card:nth-child(2n) { border-right: none; }
.services-section {
padding: var(--section-spacing-mobile) 20px;
}
.service-card {
padding: 40px 24px;
}
}
@media (max-width: 768px) {
.service-card,
.service-card:nth-child(3n) {
border-right: none;
}
}
@media (max-width: 600px) {
.services-grid { grid-template-columns: 1fr; }
.service-card { border-right: none; }
.service-card:last-child { border-bottom: none; }
.header-container { flex-direction: column; gap: 20px; }
.explore-top { max-width: 100%; }
.main-heading { font-size: 2.2rem; }
.service-card { padding: 30px 20px; }
} .blog-container {
padding: var(--section-spacing) 20px;
background:#ffffff
}
.blog-container .container {
max-width: var(--section-width);
padding: 0;
}
.blog-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 50px;
}
.blog-container .section-tag,
.blog-container .section-main-title,
.blog-container .section-subtitle {
opacity: 0;
}
.blog-header .section-subtitle {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
max-width: 440px;
}
.blog-explore-btn {
text-decoration: none;
color: #000;
font-weight: 500;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
transition: color 0.3s ease;
}
.blog-explore-btn img {
width: 20px;
height: 20px;
margin-left: 8px;
transition: transform 0.3s ease;
filter: brightness(0);
}
.blog-explore-btn:hover img {
transform: rotate(37deg);
}
.blog-container.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.blog-container.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.blog-container.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.header-left h1 {
font-size: 3rem;
font-weight: 400;
color: #333;
letter-spacing: 2px;
}
.header-right {
max-width: 350px;
text-align: left;
}
.explore-link {
display: block;
font-weight: 700;
text-decoration: none;
color: #000;
margin-bottom: 10px;
font-size: 0.9rem;
}
.header-right p {
color: #666;
font-size: 0.95rem;
line-height: 1.5;
} .blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
} .blog-card {
background: #fff;
border: 1px solid #eee;
overflow: hidden;
transition: transform 0.4s ease-out, box-shadow 0.3s ease;
will-change: transform;
}
.blog-card:hover {
transition-property: transform, box-shadow;
transition-duration: 0.1s, 0.3s;
transition-timing-function: linear, ease;
}
.card-image img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
transition: filter 0.3s ease, transform 0.3s ease;
}
.card-content {
padding: 25px;
}
.card-meta {
display: flex;
gap: 15px;
font-size: 0.75rem;
color: #555;
font-weight: 400;
margin-bottom: 15px;
}
.card-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.card-meta:hover span {
color:#0230b8
}
.card-meta svg {
width: 16px;
height: 16px;
color: #023be2;
}
.card-content h3 {
font-size: 1.25rem;
line-height: 1.4;
font-weight: 430;
color: #1a1a1a;
margin-bottom: 25px;
min-height: 3.5em; cursor: pointer;
}
.card-content:hover h3 {
color:#023be2
}
.read-more {
text-decoration: none;
color: #000;
font-weight: 500;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
transition: 0.3s;
}
.read-more img {
width: 20px;
height: 20px;
margin-left: 8px;
transition: transform 0.3s ease;
filter: brightness(0);
}
.blog-card:hover .read-more img {
transform: rotate(37deg);
}
.explore-more {
text-decoration: none;
color: #000;
font-weight: 500;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
transition: 0.3s;
}
.explore-more img {
width: 20px;
height: 20px;
margin-left: 8px;
transition: transform 0.3s ease;
filter: brightness(0);
}
.card:hover .explore-more img {
transform: rotate(37deg);
} @media (max-width: 768px) {
.blog-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.blog-container {
padding: 40px 0;
padding: 40px 20px;
}
} .contact-section {
padding: 24px 20px 72px;
}
.contact-section .container {
max-width: var(--section-width);
padding: 0;
background: #fafafa;
}
.contact-shell {
background: var(--contact-shell-bg);
border-radius: 40px;
padding: 36px;
display: grid;
grid-template-columns: 1fr 1.08fr;
gap: 34px;
}
.contact-info-panel {
padding: 10px 6px;
}
.contact-kicker {
margin: 0 0 14px;
color: #023be2;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.contact-title {
margin: 0;
max-width: 520px;
font-size: clamp(28px, 3.5vw, 42px);
line-height: 1.2;
color: var(--contact-text-main);
font-weight: 700;
}
.contact-info-list {
margin-top: 56px;
display: grid;
gap: 28px;
}
.contact-label {
margin: 0 0 6px;
color: black;
font-size: 14px;
line-height: 1.4;
}
.contact-link {
color: var(--contact-text-main);
text-decoration: none;
font-size: 20px;
font-weight: 500;
line-height: 1.4;
display: inline-flex;
align-items: center;
gap: 10px;
}
.contact-link:hover {
color: #023be2;
}
.contact-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.contact-icon-placeholder {
display: inline-block;
width: 24px;
}
.contact-socials {
margin-top: 34px;
}
.contact-social-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.contact-social-row a {
width: auto;
height: auto;
border: none;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #000000;
text-decoration: none;
transition: all 0.25s ease;
padding: 2px 6px;
}
.contact-social-row a:hover {
color: #023be2;
transform: translateY(-1px);
}
.contact-social-row a i {
font-size: 28px;
line-height: 1;
}
.contact-form-panel {
background: var(--contact-form-bg);
border-radius: 28px;
padding: 30px 30px 34px;
}
.contact-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 20px;
}
.contact-field {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-field label {
font-size: 14px;
color: var(--contact-text-main);
font-weight: 500;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
border: 1px solid var(--contact-border);
border-radius: 12px;
background: var(--contact-input-bg);
padding: 12px 16px;
font-size: 15px;
color: var(--contact-text-main);
outline: none;
}
.contact-field select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
min-height: 48px;
line-height: 1.3;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23616b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.contact-field select::-ms-expand {
display: none;
}
.contact-field select option {
color: var(--contact-text-main);
}
.contact-custom-select {
position: relative;
}
.contact-select-trigger {
width: 100%;
border: 1px solid var(--contact-border);
border-radius: 12px;
background: var(--contact-input-bg);
padding: 12px 44px 12px 16px;
min-height: 48px;
font-size: 15px;
color: var(--contact-text-main);
text-align: left;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
}
.contact-select-trigger::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23616b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
transition: transform 0.2s ease;
}
.contact-custom-select.is-open .contact-select-trigger::after {
transform: translateY(-50%) rotate(180deg);
}
.contact-select-value {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
width: 100%;
min-height: 22px;
}
.contact-select-placeholder {
color: #616b7a;
}
.contact-select-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: #eef2f7;
border-radius: 999px;
padding: 5px 10px;
font-size: 14px;
line-height: 1.2;
}
.contact-select-chip-label {
white-space: nowrap;
}
.contact-select-chip-remove {
color: #023be2;
font-size: 14px;
line-height: 1;
cursor: pointer;
user-select: none;
}
.contact-select-menu {
list-style: none;
margin: 8px 0 0;
padding: 8px;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 30;
background: #ffffff;
border: 1px solid var(--contact-border);
border-radius: 12px;
max-height: 220px;
overflow-y: auto;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
display: none;
}
.contact-custom-select.is-open .contact-select-menu {
display: block;
}
.contact-select-menu li button {
width: 100%;
border: 0;
background: transparent;
text-align: left;
padding: 10px 12px;
border-radius: 8px;
font-size: 14px;
color: var(--contact-text-main);
}
.contact-select-menu li button:hover,
.contact-select-menu li button.is-selected {
background: rgba(2, 59, 226, 0.1);
color: #023be2;
}
.contact-custom-select.is-invalid .contact-select-trigger {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}
.phone-input-container {
display: flex;
align-items: center;
border: 1px solid var(--contact-border);
border-radius: 12px;
background: var(--contact-input-bg);
position: relative;
transition: border-color .2s ease, box-shadow .2s ease;
}
.phone-input-container #contactPhone {
flex: 1;
min-width: 0;
border: none;
background: transparent;
}
.contact-country-select {
position: relative;
flex-shrink: 0;
}
.contact-country-trigger {
width: 100%;
border: none;
border-radius: 0;
background: transparent;
min-height: 48px;
padding: 10px 34px 10px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: var(--contact-text-main);
position: relative;
}
.contact-country-trigger::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23616b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
transition: transform 0.2s ease;
}
.contact-country-select.is-open .contact-country-trigger::after {
transform: translateY(-50%) rotate(180deg);
}
.country-flag {
font-size: 16px;
line-height: 1;
}
.country-code {
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.contact-country-menu {
list-style: none;
margin: 8px 0 0;
padding: 8px;
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
z-index: 35;
background: #ffffff;
border: 1px solid var(--contact-border);
border-radius: 12px;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
max-height: 240px;
overflow-y: auto;
display: none;
}
.contact-country-select.is-open .contact-country-menu {
display: block;
}
.contact-country-menu li button {
width: 100%;
border: 0;
background: transparent;
text-align: left;
padding: 10px 12px;
border-radius: 8px;
font-size: 14px;
color: var(--contact-text-main);
}
.contact-country-menu li button:hover,
.contact-country-menu li button.is-selected {
background: rgba(2, 59, 226, 0.1);
color: #023be2;
}
.contact-field textarea {
resize: vertical;
border-radius: 12px;
min-height: 180px;
}
.contact-field input::placeholder,
.contact-field select,
.contact-field textarea::placeholder {
color: #7c8696;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
border-color: #023be2;
box-shadow: 0 0 0 3px rgba(2, 59, 226, 0.12);
}
.phone-input-container:focus-within {
border-color: #023be2;
box-shadow: 0 0 0 3px rgba(2, 59, 226, 0.12);
}
.phone-input-container #contactPhone:focus {
box-shadow: none;
}
.file-input-container {
position: relative;
border: 1px solid var(--contact-border);
border-radius: 12px;
background: var(--contact-input-bg);
min-height: 48px;
display: flex;
align-items: center;
overflow: hidden;
cursor: pointer;
}
.file-input-hidden {
position: absolute;
inset: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 2;
}
.file-custom-label {
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
color: #7c8696;
font-size: 15px;
width: 100%;
pointer-events: none;
}
.contact-field-full {
grid-column: 1 / -1;
}
.contact-form-action {
grid-column: 1 / -1;
margin-top: 4px;
text-align: center;
}
.contact-form-action .btn-gradient::before {
display: none;
}
@media (max-width: 1200px) {
.contact-shell {
grid-template-columns: 1fr;
}
.contact-title {
max-width: 100%;
}
}
@media (max-width: 768px) {
.contact-section {
padding: var(--section-spacing-mobile) 16px;
}
.contact-shell {
border-radius: 26px;
padding: 22px;
gap: 30px;
}
.contact-kicker {
font-size: 14px;
}
.contact-title {
font-size: 24px;
}
.contact-info-list {
margin-top: 34px;
gap: 20px;
}
.contact-label {
font-size: 13px;
}
.contact-link {
font-size: 18px;
}
.contact-form-panel {
border-radius: 20px;
padding: 24px 20px;
}
.contact-form-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.contact-field label {
font-size: 14px;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
font-size: 14px;
padding: 12px 14px;
}
.contact-field select {
min-height: 44px;
padding-right: 40px;
background-position: right 12px center;
background-size: 14px;
}
.contact-select-trigger {
min-height: 44px;
padding: 12px 40px 12px 14px;
font-size: 14px;
}
.contact-select-chip {
padding: 4px 8px;
font-size: 13px;
}
.contact-select-trigger::after {
right: 12px;
width: 14px;
height: 14px;
background-size: 14px;
}
.contact-select-menu li button {
font-size: 13px;
}
.contact-country-select {
min-width: 116px;
}
.contact-country-trigger {
min-height: 44px;
padding: 10px 30px 10px 8px;
}
.country-flag {
font-size: 14px;
}
.country-code {
font-size: 13px;
}
.contact-country-menu {
min-width: 200px;
}
.contact-country-menu li button {
font-size: 13px;
}
} .faq-section {
padding: 72px 20px;
background: #ffffff;
}
.no-padding{
padding:20px 0px !important;
background: #f7f7f7 !important;
}
.faq-section .container {
max-width: var(--section-width);
padding: 0;
}
.faq-section .section-main-title,
.faq-section .section-subtitle {
opacity: 0;
}
.faq-section .section-tag {
opacity: 0;
}
.faq-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.faq-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.faq-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.15s;
}
.faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
margin-top: 40px;
}
.faq-column {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-section details {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 16px;
transition: all 0.3s ease;
overflow: hidden;
}
.faq-section summary {
padding: 20px 24px;
list-style: none;
cursor: pointer;
font-weight: 450;
color: #1a1a1a;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.05rem;
}
.faq-section summary h3 {
font-weight: 450;
color: #1a1a1a;
font-size: 1.05rem;
margin: 0;
}
.faq-section summary::-webkit-details-marker {
display: none;
}
.faq-section .icon::before {
content: "+";
font-size: 1.5rem;
font-weight: 400;
color: #023be2;
}
.faq-section details[open] .icon::before {
content: "\2212"; }
.faq-section details[open] {
border-color: #023be2;
box-shadow: 0 4px 20px rgba(2, 59, 226, 0.08);
}
.faq-section .content {
padding: 0 24px 24px 24px;
color: #6c757d;
line-height: 1.6;
font-size: 0.95rem;
overflow: hidden;
}
@media (max-width: 991px) {
.faq-grid {
grid-template-columns: 1fr;
}
} .footer-country-slider-section {
background: #021a6e;
border-top: 1px solid rgba(255, 255, 255, 0.18);
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-country-slider {
overflow: hidden;
}
.footer-country-track {
display: flex;
width: max-content;
animation: footerCountryLoop 130s linear infinite;
will-change: transform;
}
.footer-country-track:hover {
animation-play-state: paused;
}
.footer-country-group {
display: flex;
}
.footer-country-item {
display: inline-flex;
align-items: center;
gap: 22px;
min-width: 285px;
padding: 26px 40px;
border-right: 1px solid rgba(255, 255, 255, 0.14);
flex-shrink: 0;
}
.footer-country-item img {
width: 62px;
height: 42px;
border-radius: 2px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.footer-country-item span {
color: #ffffff;
font-size: 1.25rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.01em;
}
@keyframes footerCountryLoop {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.site-footer-lite {
background: #edf4ff;
color: #000000;
border-top: 1px solid rgba(0, 0, 0, 0.12);
margin-top: 0;
}
.site-footer-lite a {
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
.site-footer-lite a:hover {
color: #023be2;
}
.site-footer-lite .container {
max-width: var(--section-width);
padding: 0px 20px;
background: #edf4ff;
}
.footer-top {
padding: 0 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 0.9fr;
}
.footer-col {
padding: 84px 22px 56px;
border-right: 1px solid rgba(0, 0, 0, 0.14);
}
.footer-col:last-child {
border-right: none;
}
.footer-col h4 {
margin: 0 0 14px;
font-size: 1.35rem;
font-weight: 700;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col li {
margin-bottom: 10px;
}
.footer-col a,
.footer-col p {
margin: 0 0 8px;
font-size: 0.95rem;
line-height: 1.55;
opacity: 0.95;
}
.footer-office-col h4:not(:first-child) {
margin-top: 24px;
}
.footer-middle {
border-top: 1px solid rgba(0, 0, 0, 0.14);
border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.footer-middle-wrap {
padding: 20px 20px !important;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
gap: 20px;
}
.footer-brand h3 {
margin: 0 0 8px;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.6px;
}
.footer-brand p {
margin: 0;
font-size: 0.95rem;
max-width: 480px;
line-height: 1.6;
}
.footer-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
flex-wrap: nowrap;
justify-content: center;
overflow-x: auto;
padding-bottom: 5px;
}
.footer-badge {
padding: 8px 10px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 82px;
min-height: 142px;
flex-shrink: 0;
}
.footer-badge img {
height: 80px;
height: 140px;
width: auto;
display: block;
object-fit: contain;
}
.footer-bottom-wrap {
padding: 20px 20px !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.footer-certifications {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.footer-cert {
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 8px;
padding: 8px 12px;
font-size: 0.8rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.55);
}
.footer-socials {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
}
.footer-bottom-links {
display: flex;
gap: 12px;
align-items: center;
}
.footer-bottom-links a:not(:last-child)::after {
content: '|';
margin-left: 12px;
color: rgba(0, 0, 0, 0.3);
}
.footer-socials > span {
font-size: 1rem;
font-weight: 500;
}
.footer-social-list {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.footer-social-list a {
width: auto;
height: auto;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #000000;
font-size: 30px;
line-height: 1;
padding: 2px 6px;
transition: all 0.25s ease;
}
.footer-social-list a:hover {
color: #023be2;
transform: translateY(-1px);
}
@media (max-width: 1199px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-col:nth-child(2) {
border-right: none;
}
.footer-col:nth-child(3),
.footer-col:nth-child(4) {
border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.footer-middle-wrap,
.footer-bottom-wrap {
flex-direction: column;
align-items: center;
}
.footer-badges {
justify-content: flex-start;
}
}
@media (max-width: 1024px) {
.footer-badge {
min-height: 100px;
}
.footer-badge img {
height: 90px;
}
}
@media (max-width: 768px) {
.footer-badges {
flex-wrap: wrap;
overflow-x: visible;
justify-content: center;
}
.footer-badge {
flex: 0 0 calc(25% - 8px);
max-width: calc(25% - 8px);
}
}
@media (max-width: 767px) {
.footer-country-item {
min-width: 200px;
padding: 18px 22px;
gap: 14px;
}
.footer-country-item img {
width: 42px;
height: 30px;
}
.footer-country-item span {
font-size: 1.2rem;
}
.footer-top {
padding: 44px 0 26px;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-col {
border-right: none;
border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.footer-col:first-child {
border-top: none;
}
.footer-col h4 {
font-size: 1.2rem;
}
.footer-brand h3 {
font-size: 1.55rem;
}
.footer-brand p {
font-size: 0.92rem;
}
.footer-socials {
width: 100%;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.footer-social-list a {
font-size: 24px;
padding: 2px 4px;
}
.footer-bottom-wrap {
padding: 22px 16px;
}
.footer-badge {
min-height: 80px;
}
.footer-badge img {
height: 70px;
}
}
@media (max-width: 480px) {
.footer-badge {
min-height: 60px;
padding: 4px 6px;
}
.footer-badge img {
height: 50px;
max-width: 100%;
}
}
@media (max-width: 480px) {
.footer-badge {
min-height: 60px;
padding: 4px 6px;
flex: 0 0 calc(33.33% - 7px);
max-width: calc(33.33% - 7px);
}
.footer-badge img {
height: 50px;
}
} .sticky-expert-slider {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1200;
height: var(--sticky-slider-height);
display: flex;
align-items: center;
padding: 0 12px 0 16px;
gap: 12px;
background: linear-gradient(90deg, #4f27f8 0%, #2c49f8 40%, #0e75ee 70%, #00a1c5 100%);
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.22);
}
.sticky-expert-marquee {
flex: 1;
overflow: hidden;
white-space: nowrap;
}
.sticky-expert-track {
width: max-content;
display: inline-flex;
align-items: center;
animation: stickyExpertLoop 16s linear infinite;
}
.sticky-expert-track span {
color: #ffffff;
font-size: 1rem;
font-weight: 500;
opacity: 0.96;
padding-right: 52px;
}
.sticky-expert-btn {
flex-shrink: 0;
background: #ffffff;
color: #111827;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
padding: 8px 20px;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sticky-expert-btn:hover {
color: #111827;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
.sticky-expert-close-btn {
flex-shrink: 0;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 600;
line-height: 1;
padding: 6px 8px;
border: none;
cursor: pointer;
transition: background 0.25s ease;
}
.sticky-expert-close-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.sticky-expert-slider.is-hidden {
display: none;
}
@keyframes stickyExpertLoop {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (max-width: 1199px) {
.sticky-expert-track span {
font-size: 1rem;
}
.sticky-expert-btn {
font-size: 0.9rem;
padding: 10px 16px;
}
}
@media (max-width: 767px) {
:root {
--sticky-slider-height: 50px;
}
body {
padding-bottom: 50px;
}
.sticky-expert-slider {
padding: 0 10px;
}
.sticky-expert-track span {
font-size: 0.84rem;
}
.sticky-expert-btn {
font-size: 0.76rem;
padding: 8px 12px;
border-radius: 7px;
}
} .about-hero {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(140px, 15vw, 180px) 20px clamp(90px, 9vw, 120px);
background: linear-gradient(
90.38deg,
rgba(2, 59, 226, 0.3) 2.06%,
rgba(0, 161, 197, 0.3) 99.67%
);
}
body.about-page {
padding-top: 0;
padding-bottom: 0;
}
.about-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.55), transparent 42%),
radial-gradient(circle at 85% 10%, rgba(255, 245, 220, 0.6), transparent 38%),
radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.2), transparent 44%);
z-index: -2;
}
.about-hero-container {
position: relative;
z-index: 2;
max-width: var(--section-width);
margin: 0 auto;
text-align: center;
}
.about-hero-rings {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
z-index: 1;
}
.about-hero-rings .ring {
position: absolute;
border-radius: 50%;
border: 1.5px solid white;
transform-origin: center;
animation: aboutRingPulse 4.2s ease-in-out infinite;
}
.about-hero-rings .ring-1 {
width: clamp(90px, 9vw, 130px);
aspect-ratio: 1 / 1;
animation-delay: 0s;
}
.about-hero-rings .ring-2 {
width: clamp(180px, 18vw, 260px);
aspect-ratio: 1 / 1;
animation-delay: 0.45s;
}
.about-hero-rings .ring-3 {
width: clamp(300px, 29vw, 420px);
aspect-ratio: 1 / 1;
animation-delay: 0.9s;
}
.about-hero-rings .ring-4 {
width: clamp(440px, 42vw, 600px);
aspect-ratio: 1 / 1;
animation-delay: 1.35s;
}
@keyframes aboutRingPulse {
0%,
100% {
opacity: 0.65;
transform: scale(1);
}
50% {
opacity: 0.25;
transform: scale(1.08);
}
}
@media (max-width: 992px) {
.about-hero-description {
max-width: 95%;
}
.about-hero-cta {
font-size: 1.35rem;
}
}
@media (max-width: 576px) {
.about-hero {
padding: 120px 16px 84px;
}
.about-hero-title {
font-size: clamp(1.8rem, 7.5vw, 2.4rem);
}
.about-hero-description {
font-size: 0.98rem;
line-height: 1.65;
}
.about-hero-cta {
width: 100%;
max-width: 260px;
font-size: 1.15rem;
}
} .about-first-section {
padding: 80px 20px;
}
.about-first-container {
max-width: var(--section-width);
margin: 0 auto;
padding: 0 12px;
}
.about-first-header {
max-width: 1280px;
margin: 0 auto;
}
.about-first-section .section-tag,
.about-first-section .section-main-title,
.about-first-section .section-subtitle,
.banner-section .banner-title,
.banner-section .banner-subtitle,
.about-approach-section .section-tag,
.about-approach-section .section-main-title,
.about-approach-section .section-subtitle,
.about-stats-section .section-tag,
.about-stats-section .section-main-title,
.about-stats-section .section-subtitle,
.featured-awards-section .section-tag,
.featured-awards-section .section-main-title,
.featured-awards-section .featured-awards-headline,
.branding-services-section .section-tag,
.branding-services-section .section-main-title,
.branding-services-section .section-subtitle,
.problem-vision-section .section-tag,
.problem-vision-section .section-main-title,
.tech-innovation-section .section-tag,
.tech-innovation-section .section-main-title,
.tech-innovation-section .section-subtitle,
.about-strategy-section .section-tag,
.about-strategy-section .section-main-title,
.about-strategy-section .section-subtitle,
.typography-color-section .section-tag,
.typography-color-section .section-main-title,
.typography-color-section .section-subtitle,
.insights-section .section-tag,
.insights-section .section-main-title,
.insights-section .section-subtitle,
.case-tech-stack-section .section-tag,
.case-tech-stack-section .section-main-title,
.how-it-works-section .section-tag,
.how-it-works-section .section-main-title,
.how-it-works-section .section-subtitle,
.app-services-section .section-tag,
.app-services-section .section-main-title,
.app-services-section .section-subtitle,
.expert-solutions-section .section-tag,
.expert-solutions-section .section-main-title,
.expert-solutions-section .section-subtitle,
.process-section .section-tag,
.process-section .section-main-title,
.process-section .section-subtitle,
.phone-gallery .section-tag,
.phone-gallery .section-main-title,
.phone-gallery .section-subtitle ,
.tech-stack-section .section-tag,
.tech-stack-section .section-subtitle,
.tech-stack-section .section-main-title{
opacity: 0;
}
.about-first-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.about-first-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.about-first-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.banner-section.animate-in .banner-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.banner-section.animate-in .banner-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.about-strategy-section.animate-in .section-tag,
.about-approach-section.animate-in .section-tag,
.about-stats-section.animate-in .section-tag,
.featured-awards-section.animate-in .section-tag,
.branding-services-section.animate-in .section-tag,
.problem-vision-section.animate-in .section-tag,
.tech-innovation-section.animate-in .section-tag,
.typography-color-section.animate-in .section-tag,
.insights-section.animate-in .section-tag,
.case-tech-stack-section.animate-in .section-tag,
.how-it-works-section.animate-in .section-tag,
.app-services-section.animate-in .section-tag,
.expert-solutions-section.animate-in .section-tag,
.process-section.animate-in .section-tag,
.phone-gallery.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.about-strategy-section.animate-in .section-main-title,
.about-approach-section.animate-in .section-main-title,
.about-stats-section.animate-in .section-main-title,
.featured-awards-section.animate-in .section-main-title,
.featured-awards-section.animate-in .featured-awards-headline,
.branding-services-section.animate-in .section-main-title,
.problem-vision-section.animate-in .section-main-title,
.tech-innovation-section.animate-in .section-main-title,
.typography-color-section.animate-in .section-main-title,
.insights-section.animate-in .section-main-title,
.case-tech-stack-section.animate-in .section-main-title,
.how-it-works-section.animate-in .section-main-title,
.app-services-section.animate-in .section-main-title,
.expert-solutions-section.animate-in .section-main-title,
.process-section.animate-in .section-main-title,
.phone-gallery.animate-in .section-main-title ,
.tech-stack-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.about-strategy-section.animate-in .section-subtitle,
.about-approach-section.animate-in .section-subtitle,
.about-stats-section.animate-in .section-subtitle,
.tech-innovation-section.animate-in .section-subtitle,
.branding-services-section.animate-in .section-subtitle,
.typography-color-section.animate-in .section-subtitle,
.insights-section.animate-in .section-subtitle,
.how-it-works-section.animate-in .section-subtitle,
.app-services-section.animate-in .section-subtitle,
.expert-solutions-section.animate-in .section-subtitle,
.process-section.animate-in .section-subtitle,
.phone-gallery.animate-in .section-subtitle ,
.tech-stack-section.animate-in .section-subtitle{
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.about-first-left {
display: flex;
flex-direction: column;
gap: 28px;
}
.about-first-metric {
display: flex;
align-items: flex-start;
gap: 18px;
}
.about-first-icon {
width: 78px;
min-width: 78px;
height: 78px;
display: grid;
place-items: center;
}
.about-first-icon svg {
width: 68px;
height: 68px;
}
.about-first-icon img {
width: 68px;
height: 68px;
object-fit: cover;
}
.about-metric-numbers {
margin: 0;
font-size: clamp(2rem, 2.7vw, 3rem);
line-height: 1;
font-weight: 550;
color: #111827;
}
.about-first-metric p {
margin: 10px 0 0;
color: #374151;
font-size: clamp(1rem, 1.2vw, 1.35rem);
line-height: 1.5;
}
.about-first-btn {
align-self: flex-start;
margin-top: 10px;
}
.about-first-right {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
align-items: end;
gap:5px;
}
.about-first-photo-copy {
display: flex;
flex-direction: column;
gap: 16px;
}
.about-first-photo-top {
width: 90%;
height: clamp(180px, 20vw, 280px);
object-fit: cover;
}
.about-first-text {
margin: 0;
color: #6c757d;
font-size: 18px;
line-height: 1.6;
}
.about-first-photo-tall {
width: 100%;
height: clamp(320px, 38vw, 550px);
object-fit: cover;
}
@media (max-width: 1199px) {
.about-first-container {
grid-template-columns: 1fr;
}
.about-first-photo-tall {
height: clamp(300px, 52vw, 520px);
}
.about-first-left {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.about-first-btn {
grid-column: 1 / -1;
justify-self: center;
margin-top: 10px;
}
.about-first-text{
font-size: 17px;
}
}
@media (max-width: 768px) {
.about-first-text {
font-size: 16px;
}
}
@media (max-width: 576px) {
.about-first-section {
padding: 40px 20px;
}
.about-first-metric {
gap: 12px;
}
.about-first-icon {
width: 62px;
min-width: 62px;
height: 62px;
}
.about-first-icon svg {
width: 56px;
height: 56px;
}
.about-first-left {
grid-template-columns: 1fr;
}
.about-first-text{
font-size: 15px;
}
}
@media (max-width: 480px) {
.section-main-title {
font-size: 36px;
}
.section-subtitle, .about-first-text {
font-size: 12px;
}
} .bg-gray-50 {
background-color: #f9fafb;
}
.about-strategy-section {
padding: var(--section-spacing) 20px;
}
.about-strategy-wrap {
max-width: var(--section-width);
margin: 0 auto;
border-radius: 26px;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: clamp(22px, 3.5vw, 40px);
overflow: hidden;
}
.about-strategy-media {
position: relative;
min-height: 520px;
display: flex;
align-items: flex-end;
gap: 20px;
justify-content: center;
}
.about-strategy-photo-wrapper {
position: relative;
overflow: hidden;
border-radius: 260px;
}
.about-strategy-photo {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform 0.8s ease;
}
.about-strategy-photo-small {
width: clamp(155px, 18vw, 210px);
height: clamp(255px, 29vw, 330px);
margin-bottom: 150px;
}
.about-strategy-photo-tall {
width: clamp(175px, 20vw, 235px);
height: clamp(325px, 36vw, 435px);
}
.about-strategy-photo-wrapper::before,
.about-strategy-photo-wrapper::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.1);
z-index: 10;
pointer-events: none;
opacity: 0;
transition: transform 3.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0s;
}
.about-strategy-photo-wrapper::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
transform: translate(0%, 0%);
}
.about-strategy-photo-wrapper::after {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
transform: translate(0%, 0%);
}
.about-strategy-photo-wrapper:hover::before {
opacity: 1;
transform: translate(-100%, -100%);
}
.about-strategy-photo-wrapper:hover::after {
opacity: 1;
transform: translate(100%, 100%);
}
.about-strategy-photo-wrapper:hover .about-strategy-photo {
transform: scale(1.03);
}
.about-strategy-sparkle {
position: absolute;
top: 40px;
left: 45%;
transform: translateX(-50%);
font-size: clamp(52px, 6vw, 74px);
line-height: 1;
display: block;
filter: invert(56%) sepia(72%) saturate(465%) hue-rotate(155deg) brightness(108%) contrast(88%);
animation: sparkleRotate 3s ease-in-out infinite;
}
.about-strategy-learn {
position: absolute;
left: 10px;
bottom: 12px;
width: 102px;
height: 102px;
border: 2px dashed #023be2;
border-radius: 50%;
color: #023be2;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
display: grid;
place-items: center;
}
.about-strategy-learn span {
transform: rotate(-18deg);
}
.about-strategy-cards {
display: grid;
gap: 24px;
align-content: center;
position: relative;
}
.about-strategy-card {
display: flex;
gap: 18px;
align-items: flex-start;
padding: clamp(22px, 3vw, 34px);
border-radius: 20px;
border: 1px solid rgba(167, 243, 51, 0.14);
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%);
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.about-strategy-card.active {
background: transparent;
box-shadow: none;
border-color: transparent;
}
.about-strategy-card.active.case-study{
background:#f7f7f7;
box-shadow: none;
border-color: transparent;
}
.about-strategy-card:hover {
transform: translateY(-4px) scale(1);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.about-strategy-card:not(.active):hover {
border-color: rgba(0, 0, 0, 0.15);
background: #fff; 
} .about-strategy-card.active:hover {
border-color: #2563eb !important;
}
.strategy-card-slider {
position: absolute;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
z-index: 0;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
pointer-events: none;
}
.about-strategy-icon {
width: 52px;
height: 52px;
min-width: 52px;
border-radius: 12px;
color: #023be2;
display: grid;
place-items: center;
font-size: 24px;
}
.about-strategy-card-title {
margin: 0 0 8px;
color: var(--text-dark);
font-size: clamp(0.9rem, 1vw, 1.1rem);
line-height: 1.2;
font-weight:500;
}
.about-strategy-card p {
margin: 0;
color: var(--text-dark);
font-size: clamp(0.75rem, 0.8vw, 0.85rem);
line-height: 1.5;
}
.strategy-rotating-text .rotating-text-content {
font-size: 8px;
}
.strategy-rotating-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
filter: brightness(0);
}
.about-strategy-media .rotating-text-container {
top: auto;
left: 100px;
bottom: 0;
width: 140px;
height: 140px;
} @media (max-width: 1199px) {
.about-strategy-media {
min-height: auto;
justify-content: center;
padding-top: 86px;
padding-bottom: 80px;
}
.about-strategy-photo-small {
margin-bottom: 60px;
width: 42%;
height: auto;
aspect-ratio: 2/3;
}
.about-strategy-photo-tall {
width: 48%;
height: auto;
aspect-ratio: 1/2;
}
.about-strategy-learn {
left: 50%;
bottom: 8px;
transform: translateX(-50%);
}
}
@media (max-width: 767px) {
.about-strategy-section {
padding: 50px 20px 70px;
}
.about-strategy-wrap {
grid-template-columns: 1fr;
border-radius: 20px;
padding: 18px;
margin-top: -30px;
}
.about-strategy-media {
gap: 12px;
padding-top: 40px;
padding-bottom: 60px;
}
.about-strategy-photo-small {
width: 48%;
height: auto;
aspect-ratio: 2/3;
margin-bottom: 30px;
}
.about-strategy-photo-tall {
width: 54%;
height: auto;
aspect-ratio: 1/2;
}
.about-strategy-card {
border-radius: 16px;
padding: 20px 16px;
}
.about-strategy-sparkle {
width: 45px;
top: 15px;
left: 50%;
}
}
@media (max-width: 767px) {
.about-strategy-media .rotating-text-container {
width: 100px;
height: 100px;
margin-left: -50px;
bottom: 10px;
}
.strategy-rotating-img {
width: 24px;
height: 24px;
}
} @media (max-width: 576px) {
.about-strategy-section {
padding: 40px 16px 60px;
}
.about-strategy-wrap {
padding: 14px;
}
.about-strategy-media {
padding-top: 30px;
padding-bottom: 50px;
}
.about-strategy-photo-small {
width: 45%;
margin-bottom: 20px;
}
.about-strategy-photo-tall {
width: 60%;
}
.about-strategy-card {
padding: 16px 14px;
gap: 14px;
}
.about-strategy-icon {
width: 46px;
height: 46px;
min-width: 46px;
font-size: 20px;
}
.about-strategy-card h3 {
font-size: 1rem;
}
.about-strategy-card p {
font-size: 0.8rem;
}
.about-strategy-media .rotating-text-container {
width: 80px;
height: 80px;
margin-left: -40px;
bottom: 8px;
}
.strategy-rotating-img {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.about-strategy-photo-small {
width: 42%;
}
.about-strategy-photo-tall {
width: 68%;
}
.about-strategy-card {
padding: 14px 12px;
}
.about-strategy-icon {
width: 42px;
height: 42px;
min-width: 42px;
font-size: 18px;
}
.about-strategy-card h3 {
font-size: 0.95rem;
}
.about-strategy-card p {
font-size: 0.75rem;
}
.about-strategy-media .rotating-text-container {
width: 70px;
height: 70px;
margin-left: -35px;
bottom: 6px;
}
.strategy-rotating-img {
width: 18px;
height: 18px;
}
.about-strategy-sparkle {
width: 35px;
top: 10px;
left:40%;
}
} .about-approach-section {
padding: var(--section-spacing) 20px;
}
.about-approach-container {
max-width: var(--section-width);
margin: 0 auto;
}
.about-approach-header {
display: grid;
grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 1fr);
gap: clamp(24px, 3vw, 48px);
align-items: start;
margin-bottom: clamp(40px, 5vw, 60px);
}
.about-approach-title-wrap {
margin: 0;
}
.about-approach-title-wrap .section-tag {
margin-bottom: 12px;
}
.about-approach-title {
margin: 0;
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 700;
line-height: 1.2;
color: var(--text-dark);
}
.about-approach-desc {
margin: 0;
font-size: clamp(15px, 1vw, 18px);
line-height: 1.6;
color: var(--text-gray);
}
.about-approach-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.5vw, 32px);
margin-bottom: clamp(24px, 3vw, 36px);
}
.about-approach-card {
padding: clamp(24px, 2.5vw, 36px);
border-radius: 20px;  transition: all 0.3s ease;
}
.about-approach-card:hover {
border-color: rgba(2, 59, 226, 0.25);
box-shadow: 0 8px 32px rgba(2, 59, 226, 0.08);
}
.about-approach-card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.about-approach-icon {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 12px;
color: var(--brand-blue); display: grid;
place-items: center;
font-size: 22px;
margin-bottom: 0;
}
.about-approach-card-title {
margin: 0;
font-size: clamp(1rem, 1.1vw, 1.2rem);
font-weight: 700;
color: var(--brand-blue);
}
.about-approach-card-text {
margin: 0;
font-size: clamp(14px, 0.9vw, 15px);
line-height: 1.6;
color: var(--text-dark);
}
.about-approach-divider {
border-top: 1px solid var(--border-color);
margin-bottom: clamp(24px, 3vw, 36px);
}
.about-approach-logo-slider {
overflow: hidden;
}
.about-approach-logo-slider::-webkit-scrollbar {
display: none;
}
.about-approach-logo-track {
display: flex;
align-items: center;
gap: clamp(32px, 4vw, 56px);
width: max-content;
padding-right: clamp(32px, 4vw, 56px);
animation: logoLoop 35s linear infinite;
}
.about-approach-logo-track:hover {
animation-play-state: paused;
}
.about-approach-logo-img {
height: clamp(28px, 3vw, 44px);
max-width: clamp(80px, 10vw, 140px);
width: auto;
object-fit: contain;
opacity: 0.85;
flex-shrink: 0;
filter: grayscale(95%);
transition: all 0.3s ease;
pointer-events: auto;
-webkit-user-drag: none;
user-select: none;
}
.about-approach-logo-img:hover {
filter: grayscale(0);
opacity: 1;
}
@media (max-width: 991px) {
.about-approach-header {
grid-template-columns: 1fr;
}
.about-approach-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.about-approach-section {
padding: var(--section-spacing-mobile) 20px;
}
.about-approach-container {
padding: 0 4px;
}
.about-approach-header {
margin-bottom: 36px;
}
.about-approach-cards {
margin-bottom: 40px;
}
.about-approach-logo-slider {
margin: 0 -16px;
}
} .about-stats-section {
padding: var(--section-spacing) 20px;
}
.about-stats-container {
max-width: var(--section-width);
margin: 0 auto;
}
.about-stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(20px, 2.5vw, 32px);
}
.about-stats-grid .about-stats-panel:nth-child(1),
.about-stats-grid .about-stats-panel:nth-child(4) {
grid-column: span 2;
}
.about-stats-grid .about-stats-panel:nth-child(2),
.about-stats-grid .about-stats-panel:nth-child(3) {
grid-column: span 3;
}
@media (max-width: 1280px) {
.about-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-stats-grid .about-stats-panel:nth-child(1),
.about-stats-grid .about-stats-panel:nth-child(2),
.about-stats-grid .about-stats-panel:nth-child(3),
.about-stats-grid .about-stats-panel:nth-child(4) {
grid-column: span 1;
}
.about-stats-grid .about-stats-panel:first-child {
border-top-left-radius: 24px;
}
.about-stats-grid .about-stats-panel:nth-child(4) {
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
}
}
@media (min-width: 1281px) {
.about-stats-grid .about-stats-panel:nth-child(2) {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: min-content min-content;
align-content: center;
align-items: center;
gap: 0 30px;
}
.about-stats-grid .about-stats-panel:nth-child(2) .about-stats-title {
grid-column: 1;
grid-row: 1;
}
.about-stats-grid .about-stats-panel:nth-child(2) .about-stats-metric {
grid-column: 1;
grid-row: 2;
margin-bottom: 0;
}
.about-stats-grid .about-stats-panel:nth-child(2) .about-stats-tags,
.about-stats-grid .about-stats-panel:nth-child(2) .about-stats-awards {
grid-column: 2;
grid-row: 1 / span 2;
}
}
.about-stats-panel {
border-radius: 24px;
padding: clamp(28px, 3vw, 40px);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.about-stats-grid .about-stats-panel:first-child ,
.about-stats-grid .about-stats-panel:nth-child(4) {
border-top-left-radius: 0;
}
.about-stats-panel-gradient {
background: linear-gradient(180deg, rgba(2, 59, 226, 0.06) 0%, rgba(0, 161, 197, 0.08) 100%);
border: 1px solid rgba(2, 59, 226, 0.12);
}
.about-stats-panel-dark {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border: 1px solid rgba(2, 59, 226, 0.2);
}
.about-stats-title {
margin: 0 0 12px;
font-size: clamp(14px, 1vw, 16px);
font-weight: 600;
color: var(--text-dark);
line-height: 1.4;
}
.about-stats-panel-dark .about-stats-title {
color: rgba(255, 255, 255, 0.9);
}
.about-stats-metric {
margin: 0 0 clamp(20px, 2.5vw, 28px);
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 700;
background: var(--gradient-blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
}
.about-stats-panel-dark .about-stats-metric {
background: linear-gradient(90.38deg, #60a5fa 2.06%, #38bdf8 99.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-stats-tags {
display: flex;
align-items: center;
justify-content: center;
}
.about-stats-tags-img {
width: 100%;
max-width: 320px;
height: auto;
object-fit: contain;
}
.about-stats-awards {
display: flex;
align-items: center;
}
.about-stats-awards-img {
width: 100%;
max-width: 340px;
height: auto;
object-fit: contain;
}
.about-stats-brands {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
align-items: center;
}
.about-stats-brand-img {
height: clamp(24px, 2.5vw, 36px);
width: auto;
max-width: 80px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.8;
}
.about-stats-panel-apps {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
position: relative;
}
.about-stats-apps-content {
flex: 1;
min-width: 180px;
padding-right: clamp(140px, 18vw, 200px);
align-self: flex-start;
}
.about-stats-apps-visual {
position: absolute;
bottom: 0;
right: 0;
width: clamp(220px, 26vw, 320px);
height: auto;
overflow: visible;
}
.about-stats-app-img {
width: 100%;
height: auto;
object-fit: contain;
object-position: right ;
display: block;
}
.about-stats-panel-apps .about-stats-arrow {
position: absolute;
top: clamp(28px, 3vw, 40px);
right: clamp(28px, 3vw, 40px);
width: 40px;
height: 40px;
display: grid;
place-items: center;
transition: transform 0.3s ease;
z-index: 2;
}
.about-stats-arrow:hover {
transform: scale(1.1);
}
.about-stats-arrow img {
width: 24px;
height: 24px;
object-fit: contain;
}
@media (max-width: 991px) {
.about-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-stats-brands {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.about-stats-section {
padding: var(--section-spacing-mobile) 20px;
}
.about-stats-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.about-stats-grid .about-stats-panel {
flex: 1 1 auto;
min-width: auto;
max-width: none;
}
.about-stats-panel {
padding: 24px;
}
.about-stats-brands {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.about-stats-panel-apps {
flex-direction: column;
align-items: stretch;
}
.about-stats-apps-content {
min-width: auto;
padding-right: 0;
padding-bottom: 140px;
}
.about-stats-apps-visual {
bottom: 0;
right: 0;
width: 220px;
height: auto;
}
}
@media (max-width: 480px) {
.about-stats-tags-img {
max-width: 100%;
}
.about-stats-awards-img {
max-width: 70%;
}
.about-stats-apps-content {
padding-bottom: 120px;
}
.about-stats-apps-visual {
width: 200px;
height: auto;
}
} .banner-section {
position: relative;
margin-top: 0;
margin-bottom: -120px; z-index: 2;
}
.banner-container {
max-width: var(--section-width);
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: center;
}
.banner-content {
background-image: url(https://primocys.com/wp-content/uploads/2026/03/Frame-38486.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 32px;
padding: clamp(36px, 4.8vw, 64px) clamp(24px, 5vw, 72px);
color: #ffffff;
max-width: 100%;
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
}
.banner-tag {
color: #ffffff;
}
.banner-title {
margin: 0;
font-size: 28px;
font-weight: 500;
line-height: 1.4;
text-align: center;
}
.banner-title span {
font-weight: 700;
}
.banner-subtitle {
margin: 0;
max-width: 720px;
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
text-align: center;
align-self: center;
}
.banner-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 12px;
align-self: center;
padding: 12px 24px;
border-radius: 14px;
border: none;
background-color: #ffffff;
color: #0664d8;
font-size: 18px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.banner-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.banner-btn img {
width: 22px;
height: 22px;
transform: rotate(20deg);
transition: transform 0.3s ease;
}
.banner-btn:hover img {
transform: rotate(36deg);
}
@media (max-width: 1024px) {
.banner-content {
max-width: 100%;
}
.banner-title {
font-size: 28px;
}
}
@media (max-width: 768px) {
.banner-section {
margin-bottom: -80px; }
.banner-container {
padding: 0 20px;
}
.banner-content {
border-radius: 24px;
}
.banner-title {
font-size: 24px;
}
}
@media (max-width: 480px) {
.banner-section {
margin-bottom: -56px; }
.banner-content {
padding: 24px 18px;
border-radius: 20px;
}
.banner-title {
font-size: 22px;
}
} .featured-awards-section {
background-color: #f9fafb; padding: calc(var(--section-spacing) + 120px) 0 var(--section-spacing);
overflow: hidden;
}
.featured-awards-container {
max-width: var(--section-width);
margin: 0 auto;
padding: 0 24px;
} .featured-awards-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.featured-awards-header-left {
flex: 1;
min-width: 220px;
}
.featured-awards-headline {
margin: 0;
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 400;
color: var(--text-dark);
line-height: 1.45;
}
.featured-awards-headline strong {
font-weight: 700;
color: var(--text-dark);
} .featured-awards-nav {
display: flex;
gap: 12px;
flex-shrink: 0;
}
.awards-nav-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.18);
background: #1e2636;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
flex-shrink: 0;
}
.awards-nav-btn:hover {
background: var(--brand-blue);
border-color: var(--brand-blue);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(2, 59, 226, 0.3);
}
.awards-nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
background: #1e2636;
} .featured-awards-track-wrap {
overflow: hidden;
border-radius: 20px;
}
.featured-awards-track {
display: flex;
gap: 20px;
transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
} .award-card {
flex: 0 0 calc(25% - 15px);
min-width: 0;
background: #1a2035;
border-radius: 16px;
padding: 28px 24px 28px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.06);
} .award-card-img-wrap {
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.award-card-img-wrap::before {
content: '';
position: absolute;
width: 110px;
height: 110px;
background-color: #2e3746;
border-radius: 50%;
z-index: -1;
left: -20px;
top: 50%;
transform: translateY(-50%);
}
.award-card-img {
width: 150px;
height: 150px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.award-card-title {
font-size: 16px;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px 0;
line-height: 1.35;
}
.award-card-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
margin: 0;
line-height: 1.6;
} @media (max-width: 1024px) {
.award-card {
flex: 0 0 calc(33.333% - 14px);
}
}
@media (max-width: 768px) {
.featured-awards-header {
align-items: flex-start;
margin-bottom: 28px;
}
.featured-awards-headline {
font-size: clamp(18px, 4vw, 22px);
}
.award-card {
flex: 0 0 calc(50% - 10px);
}
.awards-nav-btn {
width: 42px;
height: 42px;
}
}
@media (max-width: 480px) {
.featured-awards-section {
padding: calc(var(--section-spacing-mobile) + 56px) 0 var(--section-spacing-mobile);
}
.featured-awards-container {
padding: 0 20px;
}
.featured-awards-headline {
font-size: 18px;
}
.award-card {
flex: 0 0 calc(100% - 0px);
}
} .trusted-section {
background: #0b101e;
padding: 80px 20px 100px;
color: #fff;
text-align: center;
}
.trusted-section .container{
background: #0b101e;
}
.trusted-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 24px;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
opacity: 0;
will-change: transform, opacity;
}
.trusted-section.animate-in .trusted-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.trusted-subtitle {
font-size: 16px;
color: #e2e8f0;
max-width: 800px;
margin: 0 auto 60px;
line-height: 1.6;
opacity: 0;
will-change: transform, opacity;
}
.trusted-section.animate-in .trusted-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.trusted-logo-strip {
position: relative;
right: auto;
bottom: auto;
width: 100%;
clip-path: none;
height: 80px;
margin-bottom: 80px;
}
.trusted-logo-strip .logo-item {
filter: grayscale(100%);
}
.trusted-logo-strip .logo-item:hover{
filter: grayscale(0);
}
.trusted-stats-grid {
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 1200px;
margin: 0 auto;
gap: 20px;
text-align: left;
}
.trusted-stat-item {
flex: 1;
}
.trusted-stat-number {
font-size: 42px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.trusted-stat-text {
font-size: 14px;
color: #b4b8ca;
line-height: 1.5;
}
.trusted-stat-divider {
width: 1px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
margin-top: 15px;
}
@media (max-width: 991px) {
.trusted-stats-grid {
flex-wrap: wrap;
justify-content: center;
gap: 40px;
text-align: center;
}
.trusted-stat-item {
flex: 0 0 calc(50% - 20px);
}
.trusted-stat-divider {
display: none;
}
.trusted-stat-number {
justify-content: center;
}
}
@media (max-width: 576px) {
.trusted-stat-item {
flex: 0 0 100%;
}
} #contact.contact-section {
padding: 80px 20px;
background-color: #fafafa;
}
.contact-container {
max-width: var(--section-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.contact-container .section-tag {
margin-bottom: 8px;
} .contact-left-title {
font-size: 42px;
font-weight: 700;
color: #111827;
line-height: 1.2;
margin-bottom: 20px;
}
.contact-left-sub {
font-size: 16px;
color: #6b7280;
margin-bottom: 40px;
line-height: 1.5;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 50px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
color: #4b5563;
font-size: 15px;
font-weight: 500;
}
.contact-icon-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-testimonial-carousel-wrapper {
position: relative;
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
max-width: 600px;
}
.contact-testimonial-carousel {
overflow: hidden;
}
.contact-testimonial-track {
display: flex;
transition: transform 0.4s ease-in-out;
}
.contact-testimonial-card {
min-width: 100%;
padding-right: 20px;
box-sizing: border-box;
}
.contact-testimonial-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.contact-testimonial-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.contact-testimonial-name {
font-weight: 600;
color: #111827;
font-size: 16px;
margin-bottom: 2px;
}
.contact-testimonial-role {
font-size: 13px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-testimonial-text {
font-size: 14px;
color: #4b5563;
line-height: 1.6;
}
.contact-testimonial-next {
position: absolute;
right: -22px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: white;
border: 1px solid #e5e7eb;
color: #111827;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition: all 0.2s;
z-index: 2;
}
.contact-testimonial-next:hover {
background: #f9fafb;
} .contact-form-card {
background: white;
border-radius: 24px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.contact-form-title {
font-size: 28px;
font-weight: 700;
color: #111827;
margin-bottom: 10px;
}
.contact-form-sub {
font-size: 14px;
color: #6b7280;
margin-bottom: 30px;
}
.contact-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.contact-form-group {
display: flex;
flex-direction: column;
}
.contact-form-group label {
font-size: 13px;
font-weight: 500;
color: #374151;
margin-bottom: 8px;
}
.contact-form-group label span {
color: #ef4444;
margin-left: 2px;
}
.contact-form-control {
padding: 12px 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: white;
font-family: inherit;
font-size: 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
width: 100%;
}
.contact-form-control:focus {
border-color: #023be2;
box-shadow: 0 0 0 3px rgba(2, 59, 226, 0.1);
}
textarea.contact-form-control {
min-height: 120px;
resize: vertical;
}
.contact-full {
grid-column: 1 / -1;
}
.contact-submit-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.contact-submit-row span {
font-size: 12px;
color: #6b7280;
width: 100%;
}
.contact-submit-row .btn-gradient {
padding: 12px 24px;
border-radius: 8px;
flex-shrink: 0;
font-weight: 600;
width: 37%;
justify-content: center;
}
.contact-submit-row .btn-gradient::before {
display: none;
}
.contact-response-note {
font-size: 12px;
color: #6b7280;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e5e7eb;
}
.contact-form-badges {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 30px;
flex-wrap: wrap;
justify-content: center;
}
.contact-form-badge-img {
height: 110px;
max-width: 23%;
object-fit: contain;
}
@media (max-width: 768px) {
.contact-form-badge-img {
height: 120px;
max-width: 45%;
}
} .iti {
width: 100%;
} @media (max-width: 1024px) {
.contact-container {
display: flex;
flex-direction: column;
gap: 40px;
}
.contact-left-col {
display: contents;
}
.contact-intro { order: 1; }
.contact-form-card { order: 2; }
.contact-info { order: 3; }
.contact-testimonial-carousel-wrapper { order: 4; }
.contact-testimonial-next {
right: 0;
}
.contact-form-card {
padding: 30px;
width: 100%;
}
.contact-testimonial-carousel-wrapper {
max-width: 100%;
width: 100%;
}
.contact-left-sub{
margin-bottom: 0px;
}
.contact-info{
margin-bottom: 0px;
}
}
@media (max-width: 620px) {
#contact.contact-section {
padding: 40px 20px; overflow-x: hidden; width: 100%;
box-sizing: border-box;
}
.contact-container {
display: flex; flex-direction: column;
width: 100%;
max-width: 100vw;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contact-left-title {
font-size: 24px;
width: 100%;
word-wrap: break-word; }
.contact-testimonial-carousel-wrapper {
max-width: 100% !important;
width: 100% !important;
margin: 20px 0;
padding: 15px;
box-sizing: border-box; overflow: hidden; 
}
.contact-testimonial-carousel {
overflow: hidden;
}
.contact-testimonial-track {
display: flex;
width: 100%;
}
.contact-testimonial-card {
min-width: 100%; padding-right: 0 !important;
box-sizing: border-box;
}
.contact-form-card {
width: 100% !important;
max-width: 100% !important;
margin: 0;
padding: 20px !important;
box-sizing: border-box; 
border-radius: 16px;
}
.contact-form-grid {
display: flex;
flex-direction: column; width: 100%;
gap: 15px;
}
.contact-form-group {
width: 100%;
box-sizing: border-box;
}
.contact-form-control {
width: 100% !important;
max-width: 100%;
box-sizing: border-box; 
} .contact-submit-row {
flex-direction: column;
width: 100%;
text-align: center;
} .contact-form-badges {
display: flex;
flex-wrap: wrap; 
justify-content: center;
gap: 10px;
}
.contact-form-badge-img {
height: 90px;
max-width: 45%;
}
} .header-section {
background-color: transparent; background: white; padding: 80px 15px;
}
.header-title {
font-size: 3.5rem;
font-weight: 800;
background: var(--gradient-blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
line-height: 1.2;
}
@media (max-width: 768px) {
.header-title {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
.header-title {
font-size: 2rem;
}
}
.header-subtitle {
color: #6b7280;
font-size: 1.1rem;
font-weight: 400;
margin-bottom: 50px;
}
.blog-tags-wrapper {
max-width: 900px;
margin: 0 auto;
overflow: hidden;
}
.blog-tags-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
padding: 0;
margin: 0;
list-style: none;
}
.blog-tag {
display: inline-block;
padding: 10px 24px;
border-radius: 10px;
border: 1px solid rgba(2, 59, 226, 0.15);
background-color: white;
color: black;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
white-space: nowrap;
}
.blog-tag:hover {
background: linear-gradient(
90.38deg,
rgba(2, 59, 226, 0.15) 2.06%,
rgba(0, 161, 197, 0.15) 99.67%
);
border: 1px solid rgba(2, 59, 226, 0.15);
color: black;
} @media (max-width: 768px) {
.blog-tags-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(2, 59, 226, 0.5) transparent;
margin-bottom: 30px;
}
.blog-tags-wrapper::-webkit-scrollbar {
height: 4px;
display: block;
}
.blog-tags-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.blog-tags-wrapper::-webkit-scrollbar-thumb {
background: rgba(2, 59, 226, 0.5);
border-radius: 4px;
}
.blog-tags-wrapper::-webkit-scrollbar-thumb:hover {
background: rgba(2, 59, 226, 0.8);
}
.blog-tags-container {
flex-wrap: nowrap;
justify-content: flex-start;
padding-bottom: 10px; width: max-content;
margin: 0 auto;
}
.blog-tag {
padding: 8px 20px;
font-size: 0.9rem;
}
}
.header-portfolio-btn-wrap {
margin-top: -15px;
margin-bottom: 60px;
}
@media (max-width: 480px) {
.hero-contact-btn {
justify-content: center;
padding: 12px 20px;
font-size: 15px;
}
.header-portfolio-btn-wrap {
margin-top: -10px;
margin-bottom: 40px;
}
} .blog-search-container {
max-width: 600px;
margin: 0 auto;
}
.blog-search-form {
display: flex;
background-color: white;
border: 1px solid rgba(2, 59, 226, 0.15);
border-radius: 10px;
padding: 0px;
align-items: center;
transition: border-color 0.3s ease;
}
.blog-search-form:focus-within {
border-color: rgba(2, 59, 226, 0.15);
}
.blog-search-input {
flex-grow: 1;
background: transparent;
border: none;
color: black;
padding: 15px 20px;
font-size: 1rem;
outline: none;
width: 100%;
}
.blog-search-input::placeholder {
color: #666;
}
.blog-search-btn {
background: linear-gradient(
90.38deg,
rgba(2, 59, 226, 0.15) 2.06%,
rgba(0, 161, 197, 0.15) 99.67%
);
color: #000;
border: none;
border-radius: 10px;
padding: 15.5px 30px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: background-color 0.3s ease;
white-space: nowrap;
}
@media (max-width: 576px) {
.blog-search-input {
padding: 10px 15px;
font-size: 0.9rem;
}
.blog-search-btn {
padding: 10px 20px;
font-size: 0.85rem;
}
} .blog-cards-section {
background-color: transparent;
padding: 60px 0;
}
.blog-grid-card {
display: flex;
flex-direction: column;
height: 100%;
cursor: pointer;
text-decoration: none;
background-color: transparent;
}
.blog-grid-img-wrap {
overflow: hidden;
border-radius: 8px;
position: relative;
width: 100%;
}
.blog-grid-img-wrap img {
border-radius: 8px;
max-width: 100%;
height: 100%;
aspect-ratio: 16/10;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-grid-card:hover .blog-grid-img-wrap img {
transform: scale(1.03);
}
.blog-grid-title {
font-size: 1.15rem;
font-weight: 500;
color: #333;
line-height: 1.5;
margin-top: 1rem;
margin-bottom: 0;
transition: color 0.3s ease;
}
.blog-grid-card:hover .blog-grid-title {
color: var(--brand-blue, #023be2);
}
@media (max-width: 768px) {
.blog-grid-title {
font-size: 1.1rem;
line-height: 1.4;
}
}
@media (max-width: 480px) {
.blog-cards-section {
padding: 0px 15px 40px 15px;
}
} .blog-read-more {
display: inline-flex;
align-items: center;
font-size: 1rem;
font-weight: 500;
color: #111;
transition: color 0.3s ease;
}
.blog-read-more img {
width: 20px;
height: 20px;
margin-left: 6px; transition: transform 0.3s ease;
filter: brightness(0);
}
.blog-grid-card:hover .blog-read-more img {
transform: rotate(37deg);
} .blog-grid-img-wrap::before, .blog-grid-img-wrap::after { 
content: ''; 
position: absolute; 
inset: 0; 
background: rgba(255, 255, 255, 0.15); 
z-index: 10; 
pointer-events: none; 
opacity: 0; 
transition: transform 3.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0s; 
}
.blog-grid-img-wrap::before { 
clip-path: polygon(0 0, 100% 0, 0 100%); 
transform: translate(0%, 0%); 
}
.blog-grid-img-wrap::after { 
clip-path: polygon(100% 0, 100% 100%, 0 100%); 
transform: translate(0%, 0%); 
}
.blog-grid-card:hover .blog-grid-img-wrap::before { 
opacity: 1; 
transform: translate(-100%, -100%); 
}
.blog-grid-card:hover .blog-grid-img-wrap::after { 
opacity: 1; 
transform: translate(100%, 100%); 
} .blog-grid-card {
opacity: 0;
transform: translateY(40px);
will-change: transform, opacity;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.blog-grid-card.animate-in {
opacity: 1;
transform: translateY(0);
} .header-section .header-title,
.header-section .header-subtitle {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.header-section.animate-in .header-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.header-section.animate-in .header-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
} .blog-content-container {
max-width: 950px;
margin: 0 auto;
padding: 3rem 15px;
}
.blog-content-title {
font-size: clamp(1.5rem, 3vw, 2.3rem);
line-height: 1.2;
margin-bottom: 1.5rem;
}
.blog-sub {
margin: 0;
font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 700;
line-height: 1.2;
color: #1a1a1a;
margin-bottom: 1.5rem;
}
.blog-content-text {
color: #666;
line-height: 1.8;
}
.blog-text-margin {
margin-top: 1.5rem;
}
.blog-content-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.blog-content-col {
flex: 1 1 100%;
}
.blog-list-section {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 1.5rem;
gap: 0.5rem;
}
.blog-content-col-half {
flex: 1 1 calc(50% - 1rem);
}
@media (max-width: 768px) {
.blog-content-col-half {
flex: 1 1 100%;
}
}
.blog-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.blog-list-item {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.blog-list-icon {
font-size: 1.1rem;
color: #333;
margin-right: 1rem;
margin-top: 0.25rem;
}
.blog-content-image {
max-width: 100%;
height: auto;
border-radius: 4px;
display: block;
margin-bottom: 40px;
}
@media (max-width: 768px) {
.blog-content-image {
margin: 20px auto;
}
}
.blog-quote-banner {
background-color: #1a1a1a;
position: relative;
padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
margin: 4.5rem 0;
}
.blog-quote-cutout-left,
.blog-quote-cutout-right {
display: none;
position: absolute;
top: 0;
bottom: 0;
width: 60px;
background-color: #373737;
}
.blog-quote-cutout-left {
left: 0;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.blog-quote-cutout-right {
right: 0;
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
@media (min-width: 768px) {
.blog-quote-cutout-left,
.blog-quote-cutout-right {
display: block;
}
}
.blog-quote-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.blog-quote-text {
color: #fff !important;
font-size: clamp(1.25rem, 2.5vw, 1.45rem);
line-height: 1.6;
margin-bottom: 0;
text-align: left;
} .blog-detail-layout {
max-width: 1200px;
margin: 0 auto;
padding:3rem 20px;
display: flex;
flex-direction: column;
gap: 2.5rem;
} @media (min-width: 992px) {
.blog-detail-layout {
display: grid;
grid-template-columns: 310px minmax(0, 1fr);
grid-template-rows: auto 1fr;
gap: 4rem;
align-items: start;
}
.blog-inner-img {
grid-column: 2;
grid-row: 1;
margin-bottom: 0;
}
.blog-toc-sidebar {
grid-column: 1;
grid-row: 1 / span 2;
position: sticky;
top: 100px;
}
.blog-content-main {
grid-column: 2;
grid-row: 2;
}
}
@media (max-width: 991px) {
.blog-toc-sidebar {
position: static;
margin-bottom: 1rem;
}
} .blog-toc-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #000;
}
.blog-toc-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.blog-toc-item {
position: relative;
padding-left: 1.5rem;
margin-bottom: 1.25rem;
}
.blog-toc-item::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #d1d5db; transition: all 0.3s ease;
}
.blog-toc-item.active::before {
background-image: linear-gradient(90deg, #ec4899, #8b5cf6); } .blog-toc-item.active::before {
background: currentColor;
background-color: currentColor;
}
.blog-toc-link {
font-size: 1.1rem;
color: #9ca3af; text-decoration: none;
line-height: 1.4;
display: block;
transition: all 0.3s ease;
}
.blog-toc-link:hover {
color: #374151;
} .blog-toc-item.active .blog-toc-link {
font-weight: 500;
} .blog-tags-wrapper {
margin-top: 2rem;
padding-bottom: 1rem;
}
.blog-tag-pill {
display: inline-flex;
align-items: center;
border: 1px solid #e5e5e5;
border-radius: 30px;
padding: 10px 24px;
}
.blog-tag-title {
font-weight: 700;
color: #1a1a1a;
margin-right: 10px;
font-size: 1.05rem;
}
.blog-tag-list {
color: #666;
font-size: 0.95rem;
font-weight: 500;
} .blog-images-row {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 3rem;
margin-top: 3rem;
}
.blog-image-col {
flex: 1 1 calc(50% - 15px);
}
@media (max-width: 768px) {
.blog-image-col {
flex: 1 1 100%;
}
} .blog-toc-cta {
margin-top: 2rem;
padding: 2rem 1.5rem;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%);
border-radius: 12px;
}
.blog-toc-cta-text {
font-size: 1.35rem;
font-weight: 700;
color: #1a1a1a;
line-height: 1.35;
margin-bottom: 1.25rem;
}
.blog-toc-cta-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #023be2;
color: #fff;
padding: 10px 22px;
border-radius: 12px;
font-weight: 500;
font-size: 14px;
border: none;
text-decoration: none;
transition: all 0.3s ease; }
.blog-toc-cta-btn:hover {
background: #023be2;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(2, 59, 226, 0.2);
}
.blog-toc-cta-btn .arrow-icon {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
}
.blog-toc-cta-btn:hover .arrow-icon {
transform: rotate(35deg);
} .blog-bottom-cta-section {
padding: var(--section-spacing, 80px) 20px;
}
.blog-bottom-cta-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.blog-bottom-cta-box {
background: #eff6ff; border-radius: 20px;
padding: 3.5rem 4rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.blog-bottom-cta-title {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 700;
color: #1a1a1a;
margin: 0;
line-height: 1.2;
}
.blog-bottom-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: #023be2;
color: #fff;
padding: 16px 36px;
border-radius: 12px;
font-weight: 600;
font-size: 1.15rem;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.blog-bottom-cta-btn:hover {
background: #023be2;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(2, 59, 226, 0.25);
}
.blog-bottom-cta-btn .arrow-icon {
width: 22px;
height: 22px;
transition: transform 0.3s ease;
}
.blog-bottom-cta-btn:hover .arrow-icon {
transform: rotate(35deg);
}
@media (max-width: 991px) {
.blog-bottom-cta-box {
padding: 3rem 2.5rem;
}
}
@media (max-width: 768px) {
.blog-bottom-cta-box {
flex-direction: column;
text-align: center;
padding: 2.5rem 1.5rem;
gap: 2rem;
}
.blog-bottom-cta-title {
font-size: 1.75rem;
}
.blog-bottom-cta-btn {
width: 100%;
justify-content: center;
padding: 14px 24px;
font-size: 1.05rem;
}
} .blog-comment-section {
padding: 3rem 1rem;
}
.blog-comment-box {
background: #f5f5f5;
border-radius: 16px;
padding: 2.5rem 2.5rem;
}
.blog-comment-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
color: #1a1a1a;
margin-bottom: 0.5rem;
}
.blog-comment-note {
font-size: 0.9rem;
color: #555;
margin-bottom: 1.75rem;
}
.blog-comment-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
} .blog-comment-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
} .blog-comment-input,
.blog-comment-textarea {
width: 100%;
padding: 14px 18px;
border: 1px solid #e0e0e0;
border-radius: 10px;
font-size: 0.95rem;
color: #333;
background: #fff;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
box-sizing: border-box;
}
.blog-comment-input:focus,
.blog-comment-textarea:focus {
border-color: #023be2;
box-shadow: 0 0 0 3px rgba(2, 59, 226, 0.08);
}
.blog-comment-textarea {
resize: vertical;
min-height: 150px;
} .blog-comment-checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.9rem;
color: #444;
cursor: pointer;
line-height: 1.5;
}
.blog-comment-checkbox {
margin-top: 3px;
flex-shrink: 0;
width: 16px;
height: 16px;
accent-color: #023be2;
cursor: pointer;
} .blog-comment-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #023be2;
color: #fff;
padding: 12px 28px;
border-radius: 12px;
font-weight: 500;
font-size: 15px;
border: none;
cursor: pointer;
text-decoration: none;
width: fit-content;
transition: all 0.3s ease;
}
.blog-comment-btn:hover {
background: #023be2;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(2, 59, 226, 0.2);
}
.blog-comment-btn .arrow-icon {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
}
.blog-comment-btn:hover .arrow-icon {
transform: rotate(35deg);
} @media (max-width: 767px) {
.blog-comment-box {
padding: 1.75rem 1.25rem;
}
.blog-comment-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.blog-comment-box {
padding: 1.25rem 1rem;
}
.blog-comment-title {
font-size: 1.4rem;
}
} .blog-share-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
text-decoration: none;
transition: border-color 0.25s ease;
}
.blog-share-icon i {
font-size: 1.5rem;
color: #333;
transition: color 0.25s ease;
}
.blog-share-icon:hover i {
color: #023be2;
} .blog-newsletter-section {
padding: 3.5rem 1rem;
background: #f5f5f5;
}
.blog-newsletter-box {
text-align: center;
}
.blog-newsletter-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
color: #1a1a1a;
margin-bottom: 0.75rem;
}
.blog-newsletter-desc {
font-size: 0.97rem;
color: #555;
max-width: 680px;
margin: 0 auto 2rem auto;
line-height: 1.65;
}
.blog-newsletter-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
} .blog-newsletter-input-group {
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
max-width: 580px;
width: 100%;
padding: 4px 4px 4px 20px;
gap: 0;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.blog-newsletter-input-group:focus-within {
border-color: #023be2;
box-shadow: 0 0 0 3px rgba(2, 59, 226, 0.08);
}
.blog-newsletter-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 0.95rem;
color: #333;
min-width: 0;
}
.blog-newsletter-input::placeholder {
color: #aaa;
}
.blog-newsletter-btn {
flex-shrink: 0;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.15) 2.06%, rgba(0, 161, 197, 0.15) 99.67%);;
color: black;
border: none;
border-radius: 10px;
padding: 10px 26px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s ease, transform 0.2s ease;
white-space: nowrap;
} .blog-newsletter-checkbox-label {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 8px;
font-size: 0.88rem;
color: #555;
cursor: pointer;
line-height: 1.5;
max-width: 580px;
text-align: left;
}
.blog-newsletter-checkbox {
margin-top: 3px;
flex-shrink: 0;
width: 15px;
height: 15px;
accent-color: #023be2;
cursor: pointer;
}
.blog-newsletter-policy-link {
color: #e05d5d;
text-decoration: underline;
font-weight: 500;
}
.blog-newsletter-policy-link:hover {
color: #c0392b;
} @media (max-width: 767px) {
.blog-newsletter-section {
padding: 2.5rem 1rem;
}
.blog-newsletter-input-group {
padding: 4px 4px 4px 16px;
}
.blog-newsletter-btn {
padding: 10px 18px;
font-size: 0.78rem;
}
}
@media (max-width: 480px) {
.blog-newsletter-section {
padding: 2rem 0.75rem;
}
.blog-newsletter-title {
font-size: 1.4rem;
}
.blog-newsletter-desc {
font-size: 0.9rem;
}
.blog-newsletter-input-group {
flex-direction: column;
border-radius: 12px;
padding: 12px;
gap: 10px;
align-items: stretch;
}
.blog-newsletter-input {
width: 100%;
padding: 6px 4px;
}
.blog-newsletter-btn {
width: 100%;
border-radius: 10px;
text-align: center;
padding: 12px 20px;
}
.blog-newsletter-checkbox-label {
font-size: 0.83rem;
}
}  .blog-hero-animate .header-title,
.blog-hero-animate .blog-hero-meta {
opacity: 0;
} .blog-hero-animate .section-tag {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
will-change: transform, opacity;
} .blog-hero-animate .header-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
} .blog-hero-animate .blog-hero-meta {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.4s;
} .popup-form-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
display: none; align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
opacity: 0;
transition: opacity 0.4s ease;
}
.popup-form-overlay.show {
display: flex;
opacity: 1;
}
.popup-form-container {
background: #fff;
width: 100%;
max-width: 1300px;
max-height: 95vh;
overflow-y: auto;
border-radius: 24px;
overflow-x: hidden;
position: relative;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
animation: popupSlideUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes popupSlideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.popup-close-btn {
position: absolute;
top: 20px;
right: 20px;
background: #f3f4f6;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.popup-content-wrap {
display: flex;
flex-wrap: wrap;
min-height: 500px;
}
.popup-left-col {
flex: 1;
min-width: 450px;
background: linear-gradient(135deg, #050b1a 0%, #0a1631 100%);
color: #fff;
padding: 40px 30px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.popup-left-col::before {
content: '';
position: absolute;
top: -20%;
right: -20%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(2, 59, 226, 0.3) 0%, transparent 70%);
filter: blur(40px);
}
.popup-right-col {
flex: 1.2;
min-width: 450px;
padding: 40px 30px;
background: #fff;
display: flex;
flex-direction: column;
}
.popup-title-main {
font-size: 42px;
font-weight: 800;
margin-bottom: 12px;
letter-spacing: -1px;
line-height: 1.1;
}
.trusted-popup-title {
font-size: 16px;
font-weight: 600;
color: #7c8696;
text-transform: uppercase;
letter-spacing: 1.5px;
text-align: center;
margin: 0 0 15px 0;
}
.popup-subtitle {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 25px;
} .popup-testimonial-slider {
position: relative;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
overflow: hidden;
min-height: 250px;
}
.popup-testimonial-track {
display: flex;
transition: transform 0.5s ease-in-out;
}
.popup-testimonial-card {
min-width: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.popup-testimonial-card.active {
opacity: 1;
}
.quote-icon {
margin-bottom: 20px;
}
.testimonial-text {
font-size: 13px;
line-height: 1.6;
margin-bottom: 25px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
background: #fff;
}
.author-info strong {
display: block;
font-size: 16px;
}
.author-info span {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.popup-slider-controls {
display: flex;
gap: 15px;
margin-top: 25px;
position: absolute;
bottom: 30px;
right: 30px;
}
.popup-slider-btn {
background: transparent;
border: none;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.popup-slider-dots {
display: none;
justify-content: center;
gap: 8px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.popup-slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.popup-slider-dot.active {
background: #fff;
width: 24px;
border-radius: 4px;
} .popup-awards-section {
position: relative;
}
.awards-title {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.awards-title::before,
.awards-title::after {
content: '';
height: 1px;
flex: 1;
background: rgba(255, 255, 255, 0.1);
}
.popup-awards-grid {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-top: 15px;
}
.popup-awards-grid img {
height: 110px;
width: auto;
object-fit: contain;
filter: brightness(1) contrast(1.1);
opacity: 1;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.popup-awards-grid img:hover {
transform: scale(1.05);
z-index: 2;
}
.popup-form-box {
margin-bottom: 20px;
transition: opacity 0.3s ease;
}
.popup-form-box .contact-field input,
.popup-form-box .contact-field textarea,
.popup-form-box .contact-field select,
.popup-form-box .contact-field .phone-input-container,
.popup-form-box .contact-field .file-input-container {
width: 100%;
padding: 15px 0;
border: none !important;
border-bottom: 1px solid #e5e7eb !important;
font-size: 16px;
background: transparent !important;
outline: none !important;
transition: border-color 0.3s ease, border-bottom-color 0.3s ease;
border-radius: 0 !important;
min-height: auto !important;
}
.popup-form-box .contact-field .phone-input-container input,
.popup-form-box .contact-field .file-input-container input {
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.popup-form-box .contact-field .contact-country-trigger {
background: transparent !important;
min-height: auto !important;
padding-left: 0 !important;
border: none !important;
}
.popup-form-box .contact-field .file-custom-label {
padding: 0 !important;
color: #7c8696;
}
.popup-form-box .contact-field input:focus,
.popup-form-box .contact-field textarea:focus,
.popup-form-box .contact-field select:focus,
.popup-form-box .contact-field .phone-input-container:focus-within,
.popup-form-box .contact-field .file-input-container:focus-within {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
border-bottom-color: #023be2 !important;
}
.popup-form-box .contact-field input:-webkit-autofill,
.popup-form-box .contact-field input:-webkit-autofill:hover,
.popup-form-box .contact-field input:-webkit-autofill:focus,
.popup-form-box .contact-field input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
.popup-form-box .contact-field textarea {
height: 100px;
resize: none;
padding-top: 20px;
}
.popup-form-box .contact-field select {
appearance: none;
cursor: pointer;
}
.popup-success-message {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeIn 0.5s ease forwards;
}
.popup-right-col.success-state .popup-success-message {
display: flex;
}
.popup-success-icon {
font-size: 60px;
font-weight: bold;
color: #ffffff;
margin-bottom: 20px;
}
.popup-success-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 12px;
color: #ffffff;
}
.popup-success-text {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
}
.popup-form-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.3;
}
.popup-form-title-sub {
display: block;
font-size: 15px;
font-weight: 400;
color: #6c757d;
margin-top: 8px;
}
.popup-form-row {
display: flex;
gap: 20px;
margin-bottom: 12px;
}
.popup-form-group {
margin-bottom: 20px;
}
.popup-form-group.half {
flex: 1;
margin-bottom: 0;
}
.popup-form-group input,
.popup-form-group textarea {
width: 100%;
padding: 15px 0;
border: none;
border-bottom: 1px solid #e5e7eb;
font-size: 16px;
transition: border-color 0.3s ease;
background: transparent;
outline: none !important;
}
.popup-form-group input:-webkit-autofill,
.popup-form-group input:-webkit-autofill:hover, 
.popup-form-group input:-webkit-autofill:focus, 
.popup-form-group input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
.popup-form-group input:focus,
.popup-form-group textarea:focus {
border-color: #023be2;
}
.popup-form-group textarea {
height: 100px;
resize: none;
padding-top: 20px;
}
.popup-form-protection {
margin-bottom: 20px;
padding: 10px 15px;
background: #fffbeb;
border-radius: 12px;
font-size: 14px;
color: #92400e;
}
.protection-tag::before {
content: '✓';
margin-right: 8px;
font-weight: bold;
}
.popup-captcha-row {
display: flex;
align-items: center;
gap: 15px;
}
.captcha-math {
font-size: 18px;
font-weight: 600;
color: #374151;
}
.captcha-input {
width: 80px;
height: 48px;
border: 1px solid #e5e7eb;
border-radius: 8px;
text-align: center;
font-size: 18px;
font-weight: 600;
}
.popup-submit-btn {
width: auto;
background: #023be2;
color: #fff;
border: none;
padding: 10px 25px;
border-radius: 12px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.popup-submit-btn::before {
display: none;
}
.popup-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(2, 59, 226, 0.2);
}
.popup-submit-btn:hover::before {
display: none;
}
.popup-submit-btn .arrow-icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.popup-submit-btn:hover .arrow-icon {
transform: rotate(35deg);
} .popup-trusted-brands {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid #f3f4f6;
}
.trusted-title {
font-size: 25px;
font-weight: 700;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
text-align: center;
}
.popup-logo-slider {
width: 100%;
overflow: hidden;
position: relative;
padding: 10px 0;
}
.popup-logo-track {
display: flex;
align-items: center;
gap: 40px;
animation: popupLogoScroll 30s linear infinite;
width: max-content;
}
.popup-logo-track img {
height: 35px;
width: auto;
opacity: 0.7;
filter: grayscale(1) contrast(1.2);
transition: all 0.3s ease;
}
.popup-logo-track img:hover {
opacity: 1;
filter: grayscale(0);
}
@keyframes popupLogoScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
} @media (max-width: 991px) {
.popup-form-container {
max-width: 600px;
}
.popup-left-col {
min-width: 100%;
padding: 40px;
order: 2;
}
.popup-right-col {
min-width: 100%;
padding: 40px 30px;
order: 1;
}
.popup-slider-dots {
display: flex;
}
.popup-slider-controls {
display: none;
}
.popup-awards-grid {
flex-wrap: wrap;
gap: 10px;
}
.popup-awards-grid img {
height: 70px;
}
}
@media (max-width: 480px) {
.popup-form-row {
flex-direction: column;
gap: 0;
}
.popup-right-col {
padding: 30px 20px;
}
.popup-form-title {
font-size: 20px;
}
.popup-captcha-row {
flex-wrap: wrap;
}
.popup-awards-grid img {
height: 60px;
}
} .popup-form-container .iti {
width: 100%;
margin-bottom: 20px;
}
.popup-form-container .iti__country-list {
z-index: 10001;
}
.popup-form-group.half .iti {
margin-bottom: 0;
}
.popup-form-row .half {
width: calc(50% - 10px);
}
@media (max-width: 480px) {
.popup-form-row .half {
width: 100%;
}
} .blog-tag.active {
background-color: #023be2 !important;
color: white !important;
border-color: #023be2 !important;
} .app-dev-hero {
position: relative;
padding: 80px 0; background: linear-gradient(
90.38deg, 
rgba(2, 59, 226, 0.05) 2.06%, 
rgba(0, 161, 197, 0.05) 99.67%
), #fafbfc;
overflow: hidden;
z-index: 1;
}
.app-dev-hero-bg {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 900px;
height: 90vw;
max-height: 900px;
border-radius: 50%;
background-color: rgba(2, 59, 226, 0.02);
z-index: -1;
pointer-events: none;
}
.app-dev-hero-bg::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55vw;
max-width: 550px;
height: 55vw;
max-height: 550px;
border-radius: 50%;
background-color: rgba(2, 59, 226, 0.025);
}
.app-dev-container {
z-index: 2;
position: relative;
max-width: 900px;
margin: 0 auto;
}
.app-dev-hero-breadcrumb {
font-size: 14px;
font-weight: 500;
color: #6c757d;
background: transparent;
padding: 0;
opacity: 0;
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
will-change: transform, opacity;
}
.app-dev-hero-breadcrumb a {
color: #111827;
text-decoration: none;
font-weight: 600;
}
.app-dev-hero-title {
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
margin-bottom: 24px;
line-height: 1.2;
opacity: 0;
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
will-change: transform, opacity;
}
.app-dev-hero .bg-text-gradient {
background: var(--gradient-blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.app-dev-hero-subtitle {
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.6;
color: #4b5563;
margin-bottom: 40px;
max-width: 760px;
margin-left: auto;
margin-right: auto;
opacity: 0;
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
will-change: transform, opacity;
}
.hero-contact-btn {
padding: 14px 32px;
font-size: 16px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
opacity: 0;
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.3s;
will-change: transform, opacity;
text-decoration: none;
font-weight: 600;
margin-bottom: 60px;
}
.hero-contact-btn::before {
display: none !important;
}
.hero-contact-btn.portfolio-btn {
margin-bottom: 0;
}
.app-dev-award-slider-container {
width: 100%;
background: transparent;
padding: 30px 0;
overflow: hidden;
position: relative;
}
.app-dev-award-track {
display: flex;
align-items: center;
width: max-content;
animation: logoLoop 40s linear infinite;
gap: 60px;
padding-right: 60px;
}
.app-dev-award-track:hover {
animation-play-state: paused;
}
.app-dev-award-item {
display: flex;
align-items: center;
}
.app-dev-award-img {
height: 60px;
width: auto;
filter: grayscale(1);
opacity: 0.6;
transition: filter 0.3s, opacity 0.3s;
}
.app-dev-award-divider {
width: 2px;
height: 48px;
background-color: #d1d5db; margin: 0 16px;
border-radius: 2px;
}
.app-dev-award-text {
font-size: 14px;
line-height: 1.3;
color: #111827; font-weight: 500;
text-align: left;
white-space: nowrap;
}
.app-dev-award-item:hover .app-dev-award-img {
filter: grayscale(0);
opacity: 1;
}
@media (max-width: 767px) {
.app-dev-hero {
padding: 60px 0 60px;
}
.app-dev-hero-bg {
width: 120vw;
height: 120vw;
}
.app-dev-hero-bg::after {
width: 80vw;
height: 80vw;
}
.app-dev-award-img {
height: 50px;
}
.app-dev-award-divider {
height: 40px;
margin: 0 12px;
}
.app-dev-award-text {
font-size: 12px;
}
.app-dev-award-track {
gap: 40px;
padding-right: 40px;
}
} .clone-hero-section {
position: relative;
overflow: hidden;
z-index: 1;
padding: clamp(54px, 7vw, 88px) 20px;
background: linear-gradient(
90.38deg, 
rgba(2, 59, 226, 0.05) 2.06%, 
rgba(0, 161, 197, 0.05) 99.67%
), #fafbfc;
}
.clone-hero-wrap {
position: relative;
z-index: 2;
max-width: var(--section-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1.25fr 0.7fr;
gap: clamp(24px, 3.5vw, 40px);
align-items: flex-start;
}
.clone-hero-left {
margin-top: 50px;
}
.clone-hero-left .section-main-title,
.clone-hero-left .section-main-subtitle,
.clone-hero-description,
.clone-hero-middle .section-subtitle {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.clone-hero-section.animate-in .clone-hero-left .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.clone-hero-section.animate-in .clone-hero-left .section-main-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.08s;
}
.clone-hero-description {
color: #4b5563;
font-size: 15px;
line-height: 1.6;
font-weight: 400;
margin: 42px 0 0;
}
.clone-hero-section.animate-in .clone-hero-description {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.12s;
}
.clone-hero-points {
list-style: none;
margin: 32px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.clone-hero-points li {
position: relative;
padding-left: 28px;
margin: 0;
color: #4b5563;
font-size: 15px;
line-height: 1.6;
font-weight: 400;
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.clone-hero-section.animate-in .clone-hero-points li {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.clone-hero-section.animate-in .clone-hero-points li:nth-child(1) { animation-delay: 0.32s; }
.clone-hero-section.animate-in .clone-hero-points li:nth-child(2) { animation-delay: 0.42s; }
.clone-hero-section.animate-in .clone-hero-points li:nth-child(3) { animation-delay: 0.52s; }
.clone-hero-section.animate-in .clone-hero-points li:nth-child(4) { animation-delay: 0.62s; }
.clone-hero-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 14px;
height: 14px;
border: 2px solid #023be2;
border-radius: 50%;
transform: translateY(-50%);
}
.clone-hero-points li::after {
content: "";
position: absolute;
left: 5px;
top: 0.5em;
width: 4px;
height: 4px;
background: #023be2;
border-radius: 50%;
transform: translateY(-50%);
}
.clone-hero-middle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 30px;
align-self: stretch;
padding-right: clamp(20px, 4vw, 60px); }
.clone-hero-section.animate-in .clone-hero-middle .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.24s;
}
.clone-hero-btn {
align-self: flex-start;
}
.clone-hero-right {
position: relative;
padding: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: flex-start;
align-self: stretch;
overflow: hidden;
border-left: none; } .clone-hero-right img {
width: 100%;
max-width: 430px;
height: auto;
max-height: 550px;
object-fit: contain;
margin-left: 0px; 
}
@media (max-width: 1199px) {
.clone-hero-wrap {
grid-template-columns: 1fr 1fr;
align-items: center; 
}
.clone-hero-middle, .clone-hero-right {
margin-top: 0;
align-self: auto;
}
.clone-hero-right {
grid-column: 1 / -1;
border-left: 0;
border-top: 1px solid #e5e7eb;
padding-left: 0;
padding-top: 24px;
min-height: 0;
}
}
.clone-hero-stats {
display: flex;
gap: clamp(20px, 4vw, 60px);
margin-top: clamp(30px, 5vw, 60px);
}
.creative-stat-item {
display: flex;
flex-direction: column;
}
.creative-stat-number {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: #111827;
line-height: 1;
margin-bottom: 8px;
font-family: 'Syne', sans-serif;
}
.creative-stat-label {
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
color: #4b5563;
font-weight: 500;
}
@media (max-width: 767px) {
.clone-hero-wrap {
grid-template-columns: 1fr;
}
.clone-hero-left .section-main-title {
font-size: clamp(2rem, 9vw, 2.9rem);
}
.clone-hero-left {
margin-top: 0;
}
} .app-services-section{
padding: var(--section-spacing, 80px) 20px;
position: relative;
}
.expert-solutions-section {
padding: var(--section-spacing, 80px) 20px;
position: relative;
background:#f9f9f9;
}
.app-services-section .container,
.expert-solutions-section .container {
max-width: var(--section-width);
margin: 0 auto;
background:#f9f9f9;
}
.app-services-section .section-tag,
.expert-solutions-section .section-tag {
opacity: 0;
will-change: transform, opacity;
}
.app-services-section.animate-in .section-tag,
.expert-solutions-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.app-services-section .section-main-title,
.expert-solutions-section .section-main-title {
opacity: 0;
will-change: transform, opacity;
}
.app-services-section.animate-in .section-main-title,
.expert-solutions-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.app-services-section .section-subtitle,
.expert-solutions-section .section-subtitle {
opacity: 0;
will-change: transform, opacity;
}
.app-services-section.animate-in .section-subtitle,
.expert-solutions-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.app-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
.app-service-card {
padding: 40px 50px;
border-bottom: 1px solid rgba(2, 59, 226, 0.08); border-right: 1px solid rgba(2, 59, 226, 0.08);
display: flex;
flex-direction: column;
}
.app-service-card:nth-child(even) {
border-right: none;
}
.app-service-card:nth-last-child(-n+2) {
border-bottom: none;
}
.app-service-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
text-decoration:none;
}
.app-service-icon-wrapper {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
background:var(--gradient-blue);
justify-content: center;
padding: 2px; flex-shrink: 0;
}
.app-service-icon-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--white);
display: flex;
align-items: center;
justify-content: center;
}
.app-service-icon-inner img {
width: 28px;
height: 28px;
object-fit: contain;
}
.fallback-icon {
display: none;
font-size: 26px;
background: var(--gradient-blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
img[style*="display: none"] + .fallback-icon, 
img:not([src]), 
img[src=""] {
display: block;
}
.app-service-title {
font-size: 20px;
font-weight: 600;
color: #111827;
margin: 0;
}
.app-service-desc {
font-size: 15px;
line-height: 1.6;
color: #4b5563; margin: 0;
} @media (max-width: 991px) {
.app-services-grid {
grid-template-columns: 1fr;
}
.app-service-card {
padding: 30px 20px;
border-right: none;
border-bottom: 1px solid rgba(2, 59, 226, 0.08);
}
.app-service-card:nth-last-child(-n+2) {
border-bottom: 1px solid rgba(2, 59, 226, 0.08); }
.app-service-card:last-child {
border-bottom: none;
}
} .new-feature-card {
background: white;
border-radius: 12px;
padding: 40px;
height: 100%;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0;
transform: translateY(30px);
}
.new-feature-bggray-card {
background: #1a2235 !important;
}
.new-feature-bggray-card .feature-card-title,
.new-feature-bggray-card .feature-icon-box i {
color: #ffffff !important;
}
.new-feature-bggray-card .feature-card-desc {
color: #d1d5db !important;
}
.expert-solutions-section.animate-in .new-feature-card {
animation: cardFadeInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes cardFadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .expert-solutions-section.animate-in .col-lg-4:nth-child(1) .new-feature-card { animation-delay: 0.3s; }
.expert-solutions-section.animate-in .col-lg-4:nth-child(2) .new-feature-card { animation-delay: 0.4s; }
.expert-solutions-section.animate-in .col-lg-4:nth-child(3) .new-feature-card { animation-delay: 0.5s; }
.expert-solutions-section.animate-in .col-lg-4:nth-child(4) .new-feature-card { animation-delay: 0.6s; }
.expert-solutions-section.animate-in .col-lg-4:nth-child(5) .new-feature-card { animation-delay: 0.7s; }
.expert-solutions-section.animate-in .col-lg-4:nth-child(6) .new-feature-card { animation-delay: 0.8s; }
.new-feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.new-feature-card .feature-icon-box {
margin-bottom: 25px;
}
.new-feature-card .feature-icon-box i {
font-size: 44px;
color: #111827;
}
.new-feature-card .feature-icon-box img {
width: 50px;
height: 50px;
object-fit: contain;
}
.new-feature-card .feature-card-title {
font-size: 24px;
font-weight: 700;
color: #111827;
margin-bottom: 25px;
}
.new-feature-card .feature-card-desc {
font-size: 15px;
line-height: 1.6;
color: #4b5563;
margin: 0;
} .app-benefits-section {
padding: var(--section-spacing, 80px) 20px;
background-color: #0b101e; 
}
.app-benefits-section .container {
max-width: var(--section-width);
background-color: #0b101e; 
}
.app-benefits-top {
display: flex;
align-items: center;
gap: 4px;
}
.app-benefits-text {
flex: 1;
}
.app-benefits-tag {
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 16px;
text-transform: uppercase;
background: var(--gradient-blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
display: inline-block;
opacity: 0;
will-change: transform, opacity;
}
.app-benefits-section.animate-in .app-benefits-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.app-benefits-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.app-benefits-title {
color: var(--white);
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
line-height: 1.3;
margin-bottom: 25px;
opacity: 0;
will-change: transform, opacity;
}
.app-benefits-section.animate-in .app-benefits-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.app-benefits-desc {
color: #9ca3af;
font-size: 16px;
line-height: 1.6;
margin-bottom: 0;
opacity: 0;
will-change: transform, opacity;
}
.app-benefits-section.animate-in .app-benefits-desc {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.app-benefits-img {
flex: 1;
}
.app-benefits-img img {
width: 100%;
object-fit: cover;
}
.app-benefits-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
overflow: hidden;
background-color: transparent;
}
.app-benefit-item {
padding: 40px;
background-color: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.app-benefit-item:nth-child(even) {
border-right: none;
}
.app-benefit-item:nth-last-child(-n+2) {
border-bottom: none;
}
.app-benefit-title {
color: var(--white);
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.app-benefit-list {
list-style: none;
padding: 0;
margin: 0;
}
.app-benefit-list li {
position: relative;
padding-left: 32px;
margin-bottom: 15px;
color: #d1d5db;
font-size: 14.5px;
line-height: 1.6;
}
.app-benefit-list li:last-child {
margin-bottom: 0;
} .app-benefit-list li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--brand-blue);
background-color: transparent;
padding: 4px;
} .app-benefit-list li::after {
content: "";
position: absolute;
left: 5px;
top: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--brand-blue);
} @media (max-width: 991px) {
.app-benefits-top {
flex-direction: column;
gap: 40px;
}
.app-benefits-grid {
grid-template-columns: 1fr;
}
.app-benefit-item {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 30px 20px;
}
.app-benefit-item:nth-last-child(-n+2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.app-benefit-item:last-child {
border-bottom: none;
}
} .help-services-section {
padding: 80px 20px;
background-color: #f9f9f9;
}
.help-services-section .container {
max-width: var(--section-width);
background-color: #f9f9f9;
}
.help-services-section .section-tag,
.help-services-section .section-main-title,
.help-services-section .heading-copy {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.help-services-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.help-services-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.help-services-section.animate-in .heading-copy {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.help-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.help-service-card {
background-color: #fff;
padding: 30px 28px;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.help-service-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10);
}
.help-icon-wrapper {
margin-bottom: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 16px;
}
.help-icon-wrapper svg,
.help-icon-wrapper img,
.help-icon-wrapper i {
width: 48px;
height: 48px;
object-fit: contain;
font-size: 48px;
line-height: 1;
display: block;
}
.help-explore-link {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 12px;
font-size: 14px;
font-weight: 600;
color: #4a4a8a;
text-decoration: none;
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.help-explore-link:hover {
color: #2d2d6b;
border-color: #2d2d6b;
}
.help-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.help-pill {
font-size: 11px;
font-weight: 500;
padding: 3px 10px;
border-radius: 50px;
white-space: nowrap;
}
.help-icon-wrapper svg {
stroke: #222;
}
.help-service-title {
font-size: 20px;
font-weight: 700;
color: #333;
margin-bottom: 8px;
}
.help-service-desc {
font-size: 14.5px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.help-service-link {
font-size: 15px;
font-weight: 700;
color: #333;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.3s ease;
padding-top: 15px;
border-top: 1px solid #eee;
}
.help-service-link .arrow-icon {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
filter:brightness(0)
}
.help-service-link:hover {
color: var(--brand-blue, #0d6efd);
}
.help-service-link:hover .arrow-icon {
transform: rotate(35deg);
}
.help-image-card {
position: relative;
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 40px 30px;
background-size: cover;
background-position: center;
min-height: 320px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.help-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0,0,0,0) 100%);
z-index: 1;
}
.help-image-content {
position: relative;
z-index: 2;
color: #fff;
}
.help-image-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.3;
}
.help-image-desc {
font-size: 14px;
opacity: 0.9;
margin-bottom: 20px;
line-height: 1.5;
}
.help-image-btn {
font-size: 14px;
font-weight: 700;
padding: 10px 20px;
border-radius: 4px;
text-transform: none;
background-color: #fff;
color: #333;
border: none;
transition: background-color 0.3s ease;
}
.help-image-btn:hover {
background-color: #f1f1f1;
}
.help-progress-container {
max-width: 100%;
margin-top: 25px;
}
.help-progress-bar {
height: 3px;
background-color: #ddd;
width: 100%;
position: relative;
}
.help-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #333;
}
@media (max-width: 1199px) {
.help-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.help-services-grid {
grid-template-columns: 1fr;
}
} .help-services-layout {
display: flex;
gap: 30px;
}
.help-services-left {
flex: 0 0 calc(75% - 15px); min-width: 0; 
display: flex;
flex-direction: column;
}
.help-services-right {
flex: 0 0 calc(25% - 15px); min-width: 0;
display: flex;
flex-direction: column;
} .help-cards-scroll {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: auto; 
scrollbar-width: none; 
-ms-overflow-style: none; 
flex: 1;
}
.help-cards-scroll::-webkit-scrollbar {
display: none; }
.help-cards-scroll .help-service-card {
flex: 0 0 calc(33.333% - 13.33px); min-width: 250px;
height: 100%;
}
.help-services-right .help-image-card {
flex: 1;
min-height: 320px; }
@media (min-width: 1200px) {
.help-services-right::after {
content: "";
display: block;
margin-top: 25px; height: 3px; }
}
.help-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #333;
width: 20%; border-radius: 2px;
}
@media (max-width: 1199px) {
.help-services-layout {
flex-direction: column;
}
.help-services-left {
flex: 1 1 auto;
}
.help-services-right {
flex: 1 1 auto;
}
.help-cards-scroll .help-service-card {
flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 767px) {
.help-cards-scroll .help-service-card {
flex: 0 0 100%; }
} .app-process-section {
padding: 80px 20px;
background-color: #f9f9f9;
}
.app-process-section .section-tag,
.app-process-section .section-main-title,
.app-process-section .section-subtitle {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.app-process-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.app-process-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.app-process-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.app-process-section .container {
max-width: var(--section-width);
background:#f9f9f9
}
.app-process-heading .section-main-title {
font-size: clamp(34px, 4.2vw, 52px);
}
.app-process-shell {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--border-color);
border-radius: 30px;
overflow: hidden;
background: #fff;
}
.app-process-card {
padding: 32px 30px 30px;
background: linear-gradient(180deg, rgba(2, 59, 226, 0.16) 0%, rgba(0, 161, 197, 0.10) 45%, #ffffff 100%);
}
.app-process-card:not(:nth-child(3n)) {
border-right: 1px solid var(--border-color);
}
.app-process-card:nth-child(-n+3) {
border-bottom: 1px solid var(--border-color);
}
.app-process-title {
font-size: clamp(26px, 1.9vw, 32px);
line-height: 1.2;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 28px;
}
.app-process-point {
position: relative;
padding-left: 24px;
margin-bottom: 34px;
}
.app-process-point:last-child {
margin-bottom: 0;
}
.app-process-point::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--brand-blue);
background: transparent;
}
.app-process-point::after {
content: "";
position: absolute;
left: 4px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-blue);
}
.What-we-do,
.What-you-get {
margin: 0 0 4px;
font-size: 16px;
line-height: 1.2;
font-weight: 700;
color: var(--text-dark);
}
.app-process-point p {
margin: 0;
font-size: 16px;
line-height: 1.45;
color: var(--text-dark);
}
@media (max-width: 1199px) {
.app-process-shell {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.app-process-card {
border-right: 0;
border-bottom: 0;
}
.app-process-card:nth-child(odd) {
border-right: 1px solid var(--border-color);
}
.app-process-card:nth-child(-n+4) {
border-bottom: 1px solid var(--border-color);
}
.What-we-do,
.What-you-get{
font-size: 16px;
}
.app-process-point p {
font-size: 16px;
}
}
@media (max-width: 767px) {
.help-services-section,
.app-process-section {
padding: var(--section-spacing-mobile) 20px;
}
.app-process-heading {
gap: 14px;
margin-bottom: 26px;
}
.app-process-shell {
grid-template-columns: 1fr;
border-radius: 22px;
}
.app-process-card:nth-child(odd),
.app-process-card:nth-child(-n+4) {
border-right: 0;
border-bottom: 0;
}
.app-process-card:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}
.app-process-card {
padding: 26px 22px;
}
.app-process-point {
margin-bottom: 24px;
}
.app-process-title {
margin-bottom: 20px;
}
.What-we-do,
.What-you-get {
font-size: 15px;
}
.app-process-point p {
font-size: 15px;
}
} .wcu-section {
padding: var(--section-spacing) 20px;
background: #ffffff;
}
@media (min-width: 1024px) {
.wcu-section-padding-bottom {
padding-bottom: 120px !important;
}
}
.wcu-section .section-tag,
.wcu-section .section-main-title,
.wcu-section .section-subtitle {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.wcu-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.wcu-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.wcu-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.wcu-section .container {
max-width: var(--section-width);
}
.wcu-content-row {
margin-bottom: 50px;
}
.no-margin{
margin-bottom:0px !important;
}
.wcu-left {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.wcu-image-wrapper {
position: relative;
max-width: 550px;
width: 100%;
}
.wcu-image-inner {
position: relative;
border-radius: 12px;
overflow: hidden;
}
.wcu-image-inner::before,
.wcu-image-inner::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.1);
z-index: 10;
pointer-events: none;
opacity: 0;
transition: transform 3.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0s;
}
.wcu-image-inner::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
transform: translate(0%, 0%);
}
.wcu-image-inner::after {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
transform: translate(0%, 0%);
}
.wcu-image-wrapper:hover .wcu-image-inner::before {
opacity: 1;
transform: translate(-100%, -100%);
}
.wcu-image-wrapper:hover .wcu-image-inner::after {
opacity: 1;
transform: translate(100%, 100%);
}
.wcu-image-wrapper:hover .wcu-main-image {
transform: scale(1.03);
}
.wcu-main-image {
width: 100%;
border-radius: 12px;
object-fit: cover;
min-height: 680px;
border: 1px solid rgba(2, 59, 226, 0.1);
box-shadow: 0 20px 40px rgba(2, 59, 226, 0.1);
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.2s;
transition: transform 0.8s ease;
}
@media (max-width: 768px) {
.wcu-main-image {
min-height: 400px;
}
}
.wcu-floating-card {
position: absolute;
bottom: -100px;
right: -40px;
background: #ffffff;
padding: 24px;
width: 300px;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
z-index: 2;
animation: floatLeftRight 1.5s ease-in-out infinite alternate;
}
.wcu-floating-image {
position: absolute;
bottom: -100px;
right: -40px;
width: 300px;
z-index: 2;
animation: floatLeftRight 1.5s ease-in-out infinite alternate;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.wcu-floating-image-2 {
position: absolute;
bottom: -100px;
left: -40px;
width: 300px;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
z-index: 2;
border-radius: 12px;
animation: floatLeftRight 1.5s ease-in-out infinite alternate;
}
.wcu-floating-card-second {
position: absolute;
bottom: -100px;
left: -40px;
background: #ffffff;
padding: 24px;
width: 300px;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
z-index: 2;
animation: floatLeftRight 1.5s ease-in-out infinite alternate;
}
@keyframes floatLeftRight {
0% { transform: translateX(0); }
100% { transform: translateX(-15px); }
}
.wcu-card-top-icon {
color: #1a1a1a;
margin-bottom: 25px;
}
.wcu-card-top-icon svg {
color: #023be2;
}
.wcu-card-main-title {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin-bottom: 25px;
line-height: 1.3;
}
.wcu-card-info-row {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #f1f5f9;
padding-top: 20px;
}
.wcu-info-left {
display: flex;
flex-direction: column;
gap: 12px;
}
.wcu-avatar-group {
display: flex;
align-items: center;
}
.wcu-avatar-group img {
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid #fff;
margin-left: -15px;
object-fit: cover;
box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.wcu-avatar-group img:first-child {
margin-left: 0;
}
.wcu-happy-label {
font-size: 13px;
font-weight: 500;
color: #64748b;
white-space: nowrap;
} .wcu-info-divider {
width: 1px;
height: 50px;
background-color: #cbd5e1;
margin: 0 15px;
}
.wcu-info-right {
display: flex;
align-items: center;
}
.wcu-progress-circle {
width: 65px;
height: 65px;
}
.circular-chart {
display: block;
margin: 0 auto;
}
.circle-bg {
fill: none;
stroke: #f1f5f9;
stroke-width: 2.2;
}
.circle {
fill: none;
stroke: #023be2;
stroke-width: 3;
stroke-linecap: round;
}
.percentage {
fill: #023be2;
font-size: 9px;
font-weight: 700;
text-anchor: middle;
}
.wcu-right {
padding-left: 50px;
}
.wcu-tag {
color: #0f172a !important; 
}
.wcu-title {
font-size: 42px;
margin-bottom: 20px;
line-height: 1.2;
}
.wcu-desc {
font-size: 16px;
color: #475569;
margin-bottom: 40px;
line-height: 1.6;
}
.wcu-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
.wcu-feature-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.wcu-feature-icon-wrapper {
margin-bottom: 0;
flex-shrink: 0;
font-size: 32px;
color: #334155;
}
.wcu-feature-icon-wrapper i {
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.wcu-feature-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
color: #0f172a;
}
.wcu-feature-desc {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
@media (max-width: 991px) {
.wcu-right {
padding-left: 15px;
margin-top: 70px;
}
.wcu-floating-card,.wcu-floating-image,.wcu-floating-image-2 {
right: 20px;
bottom: -100px;
}
.wcu-floating-card-second {
right: 20px;
bottom: -100px;
}
.wcu-features-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.wcu-title {
font-size: 32px;
}
.wcu-floating-card,.wcu-floating-image,.wcu-floating-image-2 {
width: 260px;
right: 40px;
left: 40px;
bottom: -140px;
}
.wcu-floating-card-second {
width: calc(100% - 40px);
right: 20px;
left: 20px;
bottom: -140px;
}
.wcu-image-wrapper {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.wcu-section {
padding: var(--section-spacing-mobile) 20px;
}
} @media (max-width: 991px) {
.wcu-section .wcu-content-row {
display: flex !important;
flex-direction: column !important;
}
.wcu-section .wcu-left,
.wcu-section .wcu-right {
display: contents !important;
}
.wcu-section .section-tag {
order: 1 !important;
margin-bottom: 1.2rem !important;
}
.wcu-section .wcu-title {
order: 2 !important;
margin-bottom: 1.5rem !important;
}
.wcu-section .wcu-image-wrapper {
order: 3 !important;
margin-bottom: 170px !important;
margin-top: 1rem !important;
align-self: center !important;
}
.wcu-section .wcu-desc:nth-of-type(1) {
order: 4 !important;
margin-bottom: 1.5rem !important;
}
.wcu-section .feature-grid,
.wcu-section .wcu-feature-list {
order: 5 !important;
margin-bottom: 1.5rem !important;
}
.wcu-section .wcu-desc:nth-of-type(2) {
order: 6 !important;
margin-bottom: 0 !important;
}
}
.tech-stack-section {
background-color: rgb(11, 16, 30) ;
padding: 80px 20px;
overflow: hidden;
}
.tech-stack-section .container {
max-width: var(--section-width);
background-color: rgb(11, 16, 30) ;
}
.tech-stack-layout {
display: flex;
align-items: center;
gap: 60px;
}
.tech-stack-left {
flex: 1;
}
.tech-stack-section .tech-stack-tag,
.tech-stack-section .tech-stack-title,
.tech-stack-section .tech-stack-desc {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.tech-stack-section.animate-in .tech-stack-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.tech-stack-section.animate-in .tech-stack-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.tech-stack-section.animate-in .tech-stack-desc {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.tech-stack-tag {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: 1px;
background: var(--gradient-blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.tech-stack-title {
color: #ffffff;
font-size: 42px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 24px;
}
.tech-stack-desc {
color: #c7c8d1;
font-size: 16px;
line-height: 1.6;
}
.tech-stack-right {
flex: 1.2; 
position: relative;
height: 500px;
overflow: hidden;
mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.tech-slider-container {
display: flex;
gap: 20px;
height: 100%;
}
.tech-slider-col {
flex: 1;
display: flex;
flex-direction: column;
}
.tech-slider-track {
display: flex;
flex-direction: column;
gap: 20px;
}
.scroll-up .tech-slider-track {
animation: techScrollUp 20s linear infinite;
}
.scroll-down .tech-slider-track {
animation: techScrollDown 25s linear infinite;
transform: translateY(-50%);
}
.tech-slider-container:hover .tech-slider-track {
animation-play-state: paused;
}
@keyframes techScrollUp {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
@keyframes techScrollDown {
0% { transform: translateY(-50%); }
100% { transform: translateY(0); }
}
.tech-card {
background-color: #1a2235;
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
transition: transform 0.3s ease, background-color 0.3s ease;
height: 130px;
}
.tech-card:hover {
background-color: #242f47;
transform: translateY(-5px);
}
.tech-card img {
width: 34px;
height: 34px;
object-fit: contain;
}
.tech-card span {
color: #ffffff;
font-size: 14px;
font-weight: 500;
}
@media (max-width: 991px) {
.tech-stack-layout {
flex-direction: column;
}
.tech-stack-right {
flex:unset;
height: 450px;
width: 100%;
margin-top: 30px;
}
}
@media (max-width: 768px) {
.tech-stack-title {
font-size: 32px;
}
.tech-stack-section {
padding: 50px 20px;
}
.tech-slider-container {
gap: 15px;
}
.tech-card {
height: 110px;
padding: 15px;
}
.tech-card img {
width: 28px;
height: 28px;
}
.tech-card span {
font-size: 13px;
}
}
@media (max-width: 480px) {
.tech-slider-container {
gap: 10px;
}
.tech-slider-track {
gap: 12px;
}
.tech-card {
height: 90px;
padding: 10px 5px;
border-radius: 12px;
gap: 8px;
}
.tech-card img {
width: 24px;
height: 24px;
}
.tech-card span {
font-size: 11px;
text-align: center;
line-height: 1.2;
}
.tech-stack-section {
padding: 40px 20px;
}
.tech-stack-right {
height: 400px;
}
} .industry-work-section {
background-color: #0f1524;
padding: 80px 20px;
position: relative;
overflow: hidden;
color: white;
}
.industry-work-section .container {
max-width: var(--section-width);
background-color: #0f1524;
} .industry-work-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://html.awaikenthemes.com/optive/images/dark-section-bg-image.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.8; pointer-events: none;
}
.industry-tag-light {
color: #e2e8f0 !important;
}
.industry-tag-light::before {
color: #00d4ff !important;
}
.industry-work-section .section-tag {
opacity: 0;
will-change: transform, opacity;
}
.industry-work-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.industry-work-section .section-main-title {
opacity: 0;
will-change: transform, opacity;
}
.industry-work-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.industry-description {
max-width: 800px;
margin: 20px auto 50px;
color: #94a3b8;
font-size: 18px;
line-height: 1.6;
opacity: 0;
will-change: transform, opacity;
}
.industry-work-section.animate-in .industry-description {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.industry-tags-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 60px;
}
.industry-pill {
background: rgba(255, 255, 255, 0.10);
padding: 12px 28px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
cursor: default;
}
.industry-icon {
width: 18px;
height: 18px;
object-fit: contain;
}
.industry-pill:hover {
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.50) 2.06%, rgba(0, 161, 197, 0.50) 99.67%);
border-color: transparent;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.industry-footer {
display: flex;
justify-content: center;
}
.industry-footer-pill {
padding: 10px 35px 10px 15px;
display: flex;
align-items: center;
gap: 20px;
max-width: fit-content;
border-radius: 50px;
}
.footer-media-overlap {
position: relative;
display: flex;
align-items: center;
}
.footer-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #0f172a;
}
.footer-call-icon {
width: 44px;
height: 44px;
background: var(--gradient-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-left: -15px;
position: relative;
z-index: 1;
border: 2px solid #0f172a;
font-size: 18px;
}
.footer-cta-text {
margin: 0;
font-size: 16px;
color: #e2e8f0;
}
.footer-cta-link {
color: white;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: white;
transition: color 0.3s ease;
}
.footer-cta-link:hover {
color: #023be2;
} @media (max-width: 768px) {
.industry-work-section {
padding: 60px 20px;
}
.industry-description {
font-size: 16px;
margin-bottom: 40px;
}
.industry-tags-grid {
gap: 10px;
margin-bottom: 40px;
}
.industry-pill {
padding: 10px 20px;
font-size: 14px;
}
.industry-footer-pill {
padding: 8px 20px 8px 10px;
flex-direction: column;
text-align: center;
border-radius: 20px;
gap: 10px;
}
.footer-cta-text {
font-size: 14px;
}
}
@media (max-width: 480px) {
.industry-pill {
width: 100%;
justify-content: center;
}
} .how-it-works-section {
background-color: #0b101e; 
padding: var(--section-spacing) 20px;
position: relative;
overflow: clip; }
.how-it-works-section .container {
max-width: var(--section-width); }
.how-it-works-section::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(77, 171, 255, 0.1) 0%, transparent 70%);
z-index: 0;
}
.sticky-left-content {
position: sticky;
top: 120px; padding-right: 40px;
z-index: 2;
}
.how-it-works-section .section-tag,
.how-it-works-section .section-main-title,
.how-it-works-section .section-subtitle {
opacity: 0;
will-change: transform, opacity;
}
.how-it-works-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.how-it-works-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
color: #ffffff;
}
.how-it-works-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
color: rgba(255, 255, 255, 0.8);
}
.work-cards-wrapper {
padding-left: 20px;
}
.work-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
z-index: 1;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}
.work-card:hover {
border-color: #0230b8; 
background: rgba(255, 255, 255, 0.05);
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.work-card-number {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
font-size: 150px;
font-weight: 800;
color: #ffffff;
opacity: 0; transition: all 0.4s ease;
z-index: -1;
pointer-events: none;
line-height: 1;
}
.work-card:hover .work-card-number {
opacity: 0.1; right: 20px; }
.work-card-title {
color: #ffffff;
font-size: 28px;
font-weight: 600;
margin-bottom: 20px;
}
.work-card-text {
color: rgba(255, 255, 255, 0.7);
font-size: 17px;
line-height: 1.7;
margin-bottom: 0;
} @media (max-width: 991px) {
.how-it-works-section {
padding: var(--section-spacing-mobile) 20px;
overflow: hidden; }
.sticky-left-content {
position: static;
padding-right: 0;
margin-bottom: 60px;
}
.work-cards-wrapper {
padding-left: 0;
}
.work-card {
padding: 30px;
}
.work-card-title {
font-size: 24px;
margin-bottom: 15px;
}
.work-card-text {
font-size: 16px;
}
}
@media (max-width: 768px) {
.how-it-works-section .section-main-title {
font-size: 36px;
}
} .specialized-services-section {
padding: var(--section-spacing) 20px;
}
.specialized-services-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.specialized-services-section .section-tag,
.specialized-services-section .section-main-title,
.specialized-services-section .section-subtitle {
opacity: 0;
will-change: transform, opacity;
}
.specialized-services-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.specialized-services-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.specialized-services-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.specialized-image-wrapper {
position: relative;
width: 100%;
height: 100%;
min-height: 560px;
overflow: hidden;
border-radius: 12px;
}
.specialized-main-image {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: contain;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
}
.specialized-main-image.active {
opacity: 1;
visibility: visible;
}
.specialized-accordion {
padding-left: 30px;
}
.specialized-accordion .sp-accordion-item {
border-bottom: 1px solid rgba(0,0,0,0.08);
margin-bottom: 5px;
padding-bottom: 5px;
}
.specialized-accordion .sp-accordion-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.sp-accordion-header {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
cursor: pointer;
padding: 15px 0;
}
.sp-accordion-title {
font-size: 28px;
font-weight: 500;
color: #1a1a1a;
margin: 0;
transition: color 0.3s;
}
.sp-accordion-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--brand-blue);
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.sp-accordion-item.active .sp-accordion-icon {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sp-accordion-item:hover .sp-accordion-icon {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sp-accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, margin-bottom 0.4s ease, opacity 0.3s ease;
opacity: 0;
margin-bottom: 0;
}
.sp-accordion-item.active .sp-accordion-body {
opacity: 1;
margin-bottom: 20px;
}
.sp-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.sp-tag {
font-size: 13px;
font-weight: 500;
padding: 6px 18px;
border: 1px solid #e2e8f0;
border-radius: 10px;
color: #334155;
background-color: transparent;
transition: background-color 0.3s, color 0.3s;
}
.sp-tag:hover {
background: linear-gradient(
90.38deg,
rgba(2, 59, 226, 0.08) 2.06%,
rgba(0, 161, 197, 0.08) 99.67%
);
}
.sp-accordion-desc {
font-size: 16px;
color: #475569;
margin-bottom: 25px;
line-height: 1.6;
}
.sp-explore-link {
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 0.3s;
}
.sp-explore-link:hover {
color: var(--brand-blue);
}
.sp-explore-link img {
filter: brightness(0);
transition: transform 0.3s ease;
}
.sp-explore-link:hover img {
transform: rotate(37deg)
}
@media(max-width: 991px) {
.specialized-accordion {
padding-left: 0;
}
.specialized-image-wrapper {
min-height: 350px;
margin-bottom: 30px;
}
.sp-accordion-title {
font-size: 26px;
}
} .portfolio-header {
padding-bottom: 0;
}
.header-section.portfolio-hero {
position: relative;
overflow: hidden;
z-index: 1;
background: linear-gradient(
90.38deg, 
rgba(2, 59, 226, 0.05) 2.06%, 
rgba(0, 161, 197, 0.05) 99.67%
), #fafbfc;
} .portfolio-items-section {
padding: var(--section-spacing, 80px) 20px;
background-color: #f9f9f9;
}
.portfolio-items-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.portfolio-divider-wrap {
margin: 60px auto 40px;
max-width: var(--section-width);
padding: 0 20px;
}
.portfolio-divider {
position: relative;
text-align: center;
height: 1px;
background: #dfdfdf;
}
.portfolio-divider-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #e3ebf8;
padding: 0 20px;
font-size: 16px;
font-weight: 500;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 10px;
background: #ffffff;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.05);
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
}
.portfolio-img-wrap {
position: relative;
width: 100%;
overflow: hidden;
aspect-ratio: 16 / 11;
}
.portfolio-img-wrap::before,
.portfolio-img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.1);
z-index: 10;
pointer-events: none;
opacity: 0;
transition: transform 3.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0s;
}
.portfolio-img-wrap::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
transform: translate(0%, 0%);
}
.portfolio-img-wrap::after {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
transform: translate(0%, 0%);
}
.portfolio-item:hover .portfolio-img-wrap::before {
opacity: 1;
transform: translate(-100%, -100%);
}
.portfolio-item:hover .portfolio-img-wrap::after {
opacity: 1;
transform: translate(100%, 100%);
}
.portfolio-item-tag {
position: absolute;
top: 15px;
right: 15px;
background-color: rgba(255, 255, 255, 0.75); color: #023be2;
padding: 5px 14px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
z-index: 2;
letter-spacing: 0.05em;
border: 1px solid rgba(255, 255, 255, 0.4);
text-transform: uppercase;
}
.portfolio-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.portfolio-info {
padding: 24px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.portfolio-item-title {
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px;
transition: color 0.3s ease;
}
.portfolio-item-desc {
font-size: 15px;
color: #64748b;
margin-bottom: 0;
line-height: 1.6;
}
.portfolio-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12);
}
.portfolio-item:hover .portfolio-item-title {
color: #023be2;
}
@media (max-width: 1200px) {
.portfolio-grid {
gap: 24px;
}
}
@media (max-width: 991px) {
.portfolio-items-section {
padding: var(--section-spacing-mobile, 40px) 20px;
}
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.portfolio-item {
border-radius: 18px;
}
.portfolio-item-title {
font-size: 18px;
}
.portfolio-item-desc {
font-size: 14px;
}
.portfolio-info {
padding: 20px;
}
.portfolio-item-tag {
font-size: 11px;
padding: 4px 12px;
}
}
@media (max-width: 767px) {
.portfolio-items-section {
padding: var(--section-spacing-mobile, 40px) 20px;
}
.portfolio-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.portfolio-info {
padding: 16px 20px;
}
} .hire-process-section {
padding: var(--section-spacing) 20px;
background: transparent;
}
.hire-process-section .container {
max-width: var(--section-width);
}
.hire-process-section .section-tag,
.hire-process-section .section-main-title,
.hire-process-section .section-subtitle {
opacity: 0;
will-change: transform, opacity;
}
.hire-process-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.hire-process-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.hire-process-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.hire-process-steps {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
padding-top: 34px;
}
.hire-process-line {
position: absolute;
top: 34px;
left: 0;
right: 0;
height: 1px;
background: #d8dfeb;
z-index: 0;
}
.hire-process-step {
padding-top: 15px;
position: relative;
z-index: 1;
}
.hire-process-dot {
position: absolute;
top: -8px;
left: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--brand-blue);
background: #fff;
}
.hire-process-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-blue);
}
.hire-process-number {
display: inline-block;
margin-bottom: 10px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: clamp(58px, 7vw, 84px);
font-weight: 700;
line-height: 0.95;
color: transparent;
-webkit-text-stroke: 1.5px var(--brand-blue);
}
.hire-process-step h3 {
margin: 0 0 10px;
font-size: 22px;
font-weight: 600;
color: var(--text-dark);
}
.hire-process-step p {
margin: 0;
font-size: 16px;
line-height: 1.72;
color: #4b5563;
}
.hire-process-step:hover .hire-process-number {
-webkit-text-stroke: 1.5px #00A1C5FE;
}
.hire-process-step:hover .hire-process-dot {
border-color: #00A1C5FE;
}
.hire-process-step:hover .hire-process-dot::after {
background: #00A1C5FE;
}
@media (max-width: 1199px) {
.hire-process-steps { gap: 36px 28px;
padding-top: 0;
}
.hire-process-line {
top:0
}
}
@media (max-width: 991px) {
.hire-process-step h3 {
font-size: 15px;
}
.hire-process-step p {
font-size: 14px;
}
}
@media (max-width: 576px) {
.hire-process-section {
padding: var(--section-spacing-mobile) 20px;
}
.hire-process-steps {
grid-template-columns: 1fr;
gap: 28px;
}
.hire-process-line {
display: none;
}
.hire-process-step .hire-process-dot::before {
content: '';
position: absolute;
top: 50%;
left: 16px;
width: calc(100vw - 50px);
height: 1px;
background: #d8dfeb;
transform: translateY(-50%);
}
.hire-process-number {
-webkit-text-stroke: 1.2px var(--brand-blue);
}
} .monetization-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 40px 0;
}
.monetization-card {
background: #ecf3ff;
border: 1px solid #d1e2ff;
border-radius: 20px;
padding: 35px;
height: 100%;
}
.monetization-title {
font-size: 1.25rem;
font-weight: 700;
color: #023be2;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 12px;
}
.monetization-list {
list-style: none;
padding: 0;
margin: 0;
}
.monetization-list li {
position: relative;
padding-left: 28px;
margin-bottom: 18px;
font-size: 1rem;
font-weight: 600;
color: #3b5cb4;
line-height: 1.4;
}
.monetization-list li::before {
content: "→";
position: absolute;
left: 0;
font-weight: 700;
font-size:1.45rem;
color: #023be2;
}
@media (max-width: 991px) {
.monetization-grid {
grid-template-columns: 1fr;
gap: 20px;
}
} .chat-solution-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 20px 0;
}
.chat-choose-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 20px 0;
}
.app-mustfeatures-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 20px 0;
}
.chat-solution-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 24px 25px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
text-align: left !important;
}
.chat-solution-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
border-color: #023be2 !important;
}
.chat-solution-icon {
width: 40px;
height: 40px;
margin-bottom: 16px;
font-size: 28px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.chat-solution-title {
font-size: 16px;
font-weight: 700;
color: #111827;
margin-bottom: 10px;
line-height: 1.4;
}
.chat-solution-text {
font-size: 14px;
line-height: 1.6;
color: #4b5563;
margin: 0;
}
.chat-solution-link {
color: #023be2;
text-decoration: underline;
text-underline-offset: 4px;
}
@media (max-width: 991px) {
.chat-solution-grid {
grid-template-columns: repeat(2, 1fr);
}
.app-mustfeatures-grid{
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.chat-solution-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.chat-choose-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.app-mustfeatures-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.chat-solution-card {
padding: 24px !important;
}
} .blog-cta-banner {
background: linear-gradient(135deg, #023be2 0%, #00a1c5 100%);
border-radius: 24px;
padding: 50px;
color: #ffffff;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
margin: 2rem 0;
gap: 40px;
box-shadow: 0 20px 40px rgba(2, 59, 226, 0.15);
}
.blog-cta-banner::before {
content: '';
position: absolute;
top: -100px;
right: -50px;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
border-radius: 50%;
}
.blog-cta-banner::after {
content: '';
position: absolute;
bottom: -50px;
left: 20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.cta-banner-content {
flex: 1;
position: relative;
z-index: 2;
}
.cta-banner-title {
font-size: clamp(24px, 4vw, 27px);
font-weight: 800;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
color: white;
}
.cta-banner-text {
font-size: 16px;
line-height: 1.6;
opacity: 0.95;
margin: 0;
max-width: 600px;
color: rgba(255, 255, 255, 0.9);
}
.cta-banner-actions {
display: flex;
flex-direction: column;
gap: 15px;
min-width: 220px;
position: relative;
z-index: 2;
}
.cta-btn-white {
background: #ffffff;
color: #023be2;
padding: 14px 28px;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
font-size: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cta-btn-white:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
background: #f8fafc;
}
.cta-btn-transparent {
color: #fff;
padding: 14px 28px;
border:1px solid #c8d9ff;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
font-size: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cta-btn-transparent:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
@media (max-width: 1024px) {
.blog-cta-banner {
flex-direction: column;
padding: 40px;
text-align: center;
gap: 30px;
width: 100%;           
max-width: 900px;  
}
.cta-banner-title {
justify-content: center;
}
.cta-banner-text {
margin: 0 auto;
}
.cta-banner-actions {
width: 50%;
align-items: stretch;
}
}
@media (max-width: 480px) {
.blog-cta-banner {
padding: 30px 20px;
border-radius: 16px;
}
.cta-banner-title {
font-size: 22px;
gap: 10px;
}
.cta-banner-text {
font-size: 15px;
}
}
.blog-green-insight {
background-color: #f0fdf4; 
padding: 24px 30px;       
margin: 2rem 0;
border: 1px solid #a5d6a7; 
border-left: 4px solid #16a34a; 
border-radius: 8px;        
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); 
display: flex;
align-items: flex-start;
}
.blog-green-insight .blog-content-text {
color: #1b5e20;          
font-size: 1.15rem;
line-height: 1.6;
margin: 0;
font-weight: 400;          
}
.blog-green-insight b {
color: black;            
font-weight: 600;
}
.blog-green-insight .insight-icon {
margin-right: 12px;
font-size: 1.2rem;
}
@media (max-width: 768px) {
.blog-green-insight {
padding: 24px;
margin: 2.5rem 0;
}
.blog-green-insight .blog-content-text {
font-size: 1rem;
}
} .continue-reading-section {
margin-top: 2rem;
}
.continue-reading-header {
margin-bottom: 1.5rem;
}
.continue-reading-title {
font-size: 0.9rem;
font-weight: 700;
color: #64748b;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
margin: 0;
}
.continue-reading-title i {
font-size: 1.1rem;
}
.continue-reading-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.continue-reading-card {
display: block;
text-decoration: none;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 30px;
transition: all 0.3s ease;
height: 100%;
}
.continue-reading-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
border: 1px solid #0230b8;
}
.cr-category {
font-size: 0.75rem;
font-weight: 700;
color: #023be2;
text-decoration: underline;
text-underline-offset: 4px;
margin-bottom: 15px;
letter-spacing: 0.05em;
}
.cr-title {
font-size: 1.05rem;
font-weight: 700;
color: #111827;
line-height: 1.4;
margin-bottom: 20px;
transition: color 0.3s ease;
text-decoration: underline;
text-decoration-color: #023be2;
text-underline-offset: 3px; 
}
.cr-desc {
font-size: 0.75rem;
line-height: 1.6;
color: #64748b;
margin-top: 10px;
text-decoration: underline;
text-decoration-color: #023be2;
text-underline-offset: 3px; 
}
@media (max-width: 991px) {
.continue-reading-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 480px) {
.continue-reading-card {
padding: 20px;
}
.cr-title {
font-size: 0.9rem;
}
.cr-category{
font-size:0.55rem
}
} .blog-tags-container {
margin-bottom: 2rem;
}
.blog-tags-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-top: 20px;
}
.blog-tag {
background-color: #f1f5f9;
color: #475569;
padding: 10px 22px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
display: inline-block;
}
.blog-tag:hover {
background-color: #e2e8f0;
color: #1e293b;
border-color: #cbd5e1;
}
@media (max-width: 768px) {
.blog-tags-container {
margin-top: 2.5rem;
}
.blog-tag {
padding: 8px 18px;
font-size: 0.8rem;
}
} .aioseo-author-bio-compact {
display: flex;
align-items: flex-start;
gap: 30px;
padding: 40px;
border: 1.5px solid #e2e8f0;
border-radius: 32px;
margin: 50px 0;
background: #fff;
transition: all 0.3s ease;
}
.aioseo-author-bio-compact:hover {
border-color: #023be2;
box-shadow: 0 10px 30px -15px rgba(2, 59, 226, 0.1);
} .aioseo-author-bio-compact-left {
flex-shrink: 0;
}
.aioseo-author-bio-compact-image {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
} .aioseo-author-bio-compact-right {
flex-grow: 1;
} .aioseo-author-bio-compact-header {
margin-bottom: 10px;
}
.author-name {
font-size: 1.4rem;
color: #000;
font-weight: 500;
} .aioseo-author-bio-compact-main {
font-size: 0.95rem;
line-height: 1.7;
color: #334155;
} .author-bio-link {
margin-top: 15px;
display: flex;
align-items: center;
gap: 6px;
}
.author-bio-link a {
text-decoration: none;
font-size: 0.9rem;
color: #023be2;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}
.author-bio-link a svg {
fill: #023be2;
transition: transform 0.3s ease;
}
.author-bio-link a:hover svg {
transform: translateX(4px);
} @media (max-width: 991px) {
.aioseo-author-bio-compact {
padding: 30px;
gap: 25px;
margin: 40px 0;
}
}
@media (max-width: 768px) {
.aioseo-author-bio-compact {
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 20px;
gap: 20px;
border-radius: 20px;
}
.aioseo-author-bio-compact-image {
width: 80px;
height: 80px;
}
.aioseo-author-bio-compact-main {
font-size: 0.95rem;
line-height: 1.6;
}
} .blog-key-insight {
background-color: #f3f7ff; 
padding: 24px 30px;       
margin-top: 1rem;
margin-bottom:2rem;
border: 1px solid #c8d9ff; 
border-left: 4px solid #3b66f5; 
border-radius: 8px;        
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); 
display: flex;
align-items: flex-start;
}
.blog-key-insight .blog-content-text {
color: #1e3a8a;          
font-size: 1.15rem;
line-height: 1.6;
margin: 0;
font-weight: 400;          
}
.insight-image-wrapper {
flex-shrink: 0;         
padding-top: 2px;       
}
.insight-image {
width: 24px;             
height: auto;
display: block;
}
.blog-key-insight b {
color: black;            
font-weight: 700;
}
.blog-key-insight .insight-icon {
margin-right: 12px;
font-size: 1.2rem;
}
@media (max-width: 768px) {
.blog-key-insight {
padding: 24px;
margin: 2.5rem 0;
}
.blog-key-insight .blog-content-text {
font-size: 1rem;
}
}
.blog-tags-wrapper {
margin-bottom: 2rem;
}
.blog-tag-pill {
display: flex;
flex-wrap: wrap;
gap: 12px;
} .blog-tag-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 0; }
.blog-tag-list a {
background-color: #f1f5f9;
color: #475569;
padding: 10px 22px;
border-radius: 50px;
font-size: 0.85rem; 
font-weight: 500;
text-decoration: none;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
display: inline-block;
}
.blog-tag-list a:hover {
background-color: rgba(37, 99, 235, 0.08); 
color: #2563eb;
border-color: rgba(37, 99, 235, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
.blog-tag-list a:active {
transform: scale(0.96);
}
@media (max-width: 768px) {
.blog-tags-wrapper {
margin-top: 2.5rem;
}
.blog-tag-list a {
padding: 8px 18px;
font-size: 0.8rem;
}
} .blog-lightgreen-box {
background: linear-gradient(
to right,
rgba(0, 198, 162, 0.05),
rgba(0, 198, 162, 0)
);
padding: 24px 30px;       
margin: 2rem 0;
border-left: 4px solid #00c6a2; 
display: flex;
align-items: flex-start;
}
.blog-lightgreen-box .blog-content-text {
color: black;          
font-size: 1.15rem;
line-height: 1.6;
margin: 0;
font-weight: 400;          
}
.blog-lightgreen-box b {
font-weight: 600;
}
@media (max-width: 768px) {
.blog-lightgreen-box{
padding: 24px;
margin: 2.5rem 0;
}
.blog-lightgreen-box .blog-content-text {
font-size: 1rem;
}
} .blog-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 3rem 0;
}
.blog-stats-grid-four {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 3rem 0;
}
.blog-stat-card {
background: #fff;
border-radius: 16px;
padding: 20px 24px;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #e6edf5;
transition: transform 0.3s ease;
}
.stat-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
background: var(--gradient-blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.smaller-font{
font-size: clamp(1rem, 2.5vw, 2rem) !important;
}
.stat-label {
font-size: 0.85rem;
color: #475569;
line-height: 1.6;
font-weight: 500;
max-width: 260px;
margin: 0;
}
.stat-border-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--gradient-blue);
}
@media (max-width: 991px) {
.blog-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.blog-stats-grid-four {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 767px) {
.blog-stats-grid {
grid-template-columns: 1fr;
margin: 2.5rem 0;
}
.blog-stats-grid-four {
grid-template-columns: 1fr;
margin: 2.5rem 0;
}
.blog-stat-card {
padding: 40px 20px;
}
.stat-number {
font-size: 3rem;
}
} .business-needs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 2rem 0;
}
.business-needs-card {
background: #fff;
border: 1px solid #f1f5f9;
border-left: 4px solid #0664d8;
border-radius: 12px;
padding: 30px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
overflow: hidden;
}
.business-needs-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.business-needs-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.business-needs-icon {
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.business-needs-title {
font-size: 1rem;
font-weight: 700;
color: #1a1a1a;
margin: 0;
}
.business-needs-number {
position: absolute;
top: 10px;
right: 15px;
font-size: 3.5rem;
font-weight: 900;
color: rgba(226, 232, 240, 0.6);
line-height: 1;
pointer-events: none;
z-index: 1;
}
.business-needs-text {
font-size: 0.90rem;
color: #64748b;
line-height: 1.6;
margin: 0;
position: relative;
z-index: 2;
}
@media (max-width: 991px) {
.business-needs-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.business-needs-card {
padding: 24px;
}
.business-needs-number {
font-size: 2.8rem;
top: 5px;
right: 10px;
}
} .comparison-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; 
border-radius: 16px;
margin: 1.5rem 0 2.5rem 0;
border: 1px solid #eef2f6;
background: #fff;
} .comparison-table-wrapper::-webkit-scrollbar {
height: 6px;
}
.comparison-table-wrapper::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 10px;
} .blog-comparison-table {
width: 100%;
min-width: 750px; 
border-collapse: collapse;
background: #fff;
} .blog-comparison-table th {
background: #0b101e;
padding: 24px 30px;
text-align: left;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.blog-comparison-table th:last-child {
border-right: none;
}
.blog-comparison-table th:nth-child(2) {
color: #4facfe;
}
.blog-comparison-table th:nth-child(3) {
color: #00f2fe;
} .blog-comparison-table td {
padding: 18px 30px;
border-bottom: 1px solid #f1f5f9;
border-right: 1px solid #f1f5f9;
font-size: 0.90rem;
color: #1e293b;
font-weight: 500;
}
.blog-comparison-table td:last-child {
border-right: none;
}
.blog-comparison-table tr:nth-child(even) td {
background: #f9faff;
}
.blog-comparison-table tr:last-child td {
border-bottom: none;
} .feature-col {
width: 30%;
font-weight: 700 !important;
color: #0f172a !important;
font-family: 'Poppins', sans-serif;
} .checkmark {
color: #0f172a;
font-weight: 700;
margin-right: 4px;
} @media (max-width: 1024px) {
.comparison-table-wrapper {
margin: 2rem 0;
border: none;
background: transparent;
overflow: visible;
}
.blog-comparison-table {
display: block;
min-width: 100%;
background: transparent;
} .blog-comparison-table thead {
display: none;
}
.blog-comparison-table tbody,
.blog-comparison-table tr,
.blog-comparison-table td {
display: block;
width: 100%;
}
.blog-comparison-table tr {
margin-bottom: 25px;
background: #fff;
border: 1px solid #eef2f6;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.blog-comparison-table td {
padding: 16px 20px;
border: none;
border-bottom: 1px solid #f1f5f9;
text-align: right;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
} .blog-comparison-table .feature-col {
background: #0b101e !important;
color: #fff !important;
text-align: left;
justify-content: flex-start;
font-size: 0.95rem;
padding: 15px 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
width: 100% !important;
} .blog-comparison-table td:not(.feature-col):before {
content: attr(data-label);
font-weight: 700;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-right: 15px;
text-align: left;
flex-shrink: 0;
} .blog-comparison-table td[data-label="B2B CHAT APP"]:before {
color: #4facfe;
}
.blog-comparison-table td[data-label="B2C CHAT APP"]:before {
color: #00f2fe;
}
.blog-comparison-table td:last-child {
border-bottom: none;
} .blog-comparison-table tr:nth-child(even) td {
background: #fff;
}
.blog-comparison-table tr:nth-child(even) .feature-col {
background: #0b101e !important;
}
} .future-trends-list {
margin: 1rem 0;
display: flex;
flex-direction: column;
}
.trend-item {
display: flex;
align-items: flex-start;
gap: 25px;
padding: 30px 0;
border-bottom: 1px dashed #e2e8f0;
transition: all 0.3s ease;
}
.trend-item:last-child {
border-bottom: none;
}
.trend-icon {
font-size: 1.85rem;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
border-radius: 18px;
flex-shrink: 0;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.trend-content {
flex-grow: 1;
}
.trend-title {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 10px 0;
letter-spacing: -0.01em;
}
.trend-text {
font-size: 1rem;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
.trend-item:hover .trend-icon {
transform: scale(1.05) translateY(-3px);
background: #fff;
box-shadow: 0 10px 20px rgba(2, 59, 226, 0.05);
}
.trend-item:hover .trend-title {
color: #023be2;
} @media (max-width: 991px) {
.trend-item {
gap: 20px;
padding: 25px 0;
}
}
@media (max-width: 768px) {
.trend-item {
gap: 15px;
padding: 24px 0;
}
.trend-icon {
font-size: 1.8rem;
width: 48px;
height: 48px;
border-radius: 12px;
}
.trend-title {
font-size: 1.15rem;
margin-bottom: 6px;
}
.trend-text {
font-size: 0.95rem;
line-height: 1.6;
}
.trend-item:hover {
padding-left: 0;
padding-right: 0;
background: transparent;
}
}
@media (max-width: 480px) {
.trend-item {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.trend-icon {
width: 44px;
height: 44px;
font-size: 1.6rem;
}
.future-trends-list {
margin: 2.5rem 0;
}
} .tech-stack-container {
margin: 2rem 0;
}
.tech-stack-pills-title {
font-size: 0.90rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.tech-stack-pills-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.tech-pill {
display: flex;
align-items: center;
gap: 10px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 50px;
padding: 10px 24px;
font-size: 0.85rem;
font-weight: 700;
color: #1e293b;
transition: all 0.3s ease;
white-space: nowrap;
}
.tech-pill:hover {
border-color: #023be2;
}
.orange-dot {
width: 8px;
height: 8px;
background-color: #f97316;
border-radius: 50%;
display: inline-block;
}
.blue-dot {
width: 8px;
height: 8px;
background-color: #0057ff;
border-radius: 50%;
display: inline-block;
}
.green-dot {
width: 8px;
height: 8px;
background-color: #64dcc6;
border-radius: 50%;
display: inline-block;
}
.purple-dot {
width: 8px;
height: 8px;
background-color: #a855f7;
border-radius: 50%;
display: inline-block;
}
.red-dot {
width: 8px;
height: 8px;
background-color: #ff4d6d;
border-radius: 50%;
display: inline-block;
}
.yellow-dot {
width: 8px;
height: 8px;
background-color: #f6a419;
border-radius: 50%;
display: inline-block;
} .must-have-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin-top: 30px;
margin-bottom: 40px;
}
.must-have-card {
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 16px;
padding: 25px;
display: flex;
align-items: flex-start;
gap: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
}
.must-have-card:hover {
box-shadow: 0 20px 40px rgba(0, 59, 226, 0.06);
border-color: #dbeafe;
}
.must-have-icon-wrap {
width: 54px;
height: 54px;
min-width: 54px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
background:#f3f5ff;
}
.must-have-content {
flex: 1;
}
.must-have-title {
font-size: 1.05rem;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
line-height: 1.3;
}
.must-have-text {
font-size: 0.85rem;
line-height: 1.6;
color: #4b5563;
margin: 0;
}
.must-have-link {
color: #023be2;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
}
.must-have-link:hover {
color: #0030b8;
}
@media (max-width: 991px) {
.must-have-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.must-have-card {
padding: 25px;
}
}
@media (max-width: 480px) {
.must-have-card {
flex-direction: column;
gap: 15px;
padding: 20px;
}
.must-have-icon-wrap {
width: 48px;
height: 48px;
min-width: 48px;
font-size: 20px;
}
} .stepper-section {
display: flex;
flex-direction: column;
gap: 0;
padding: 20px;
border-radius: 20px;
}
.stepper-item {
display: flex;
gap: 24px;
position: relative;
}
.stepper-left {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
.stepper-number {
width: 44px;
height: 44px;
background: #000;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
z-index: 2;
font-family: 'Poppins', sans-serif;
}
.stepper-line {
width: 2px;
flex-grow: 1;
background: #dbeafe;
margin: 5px 0;
}
.stepper-item:last-child .stepper-line {
display: none;
}
.stepper-right {
padding-bottom: 35px;
flex: 1;
}
.stepper-item:last-child .stepper-right {
padding-bottom: 0;
}
.stepper-title {
font-size: 1.15rem;
font-weight: 700;
color: #000;
margin-bottom: 10px;
line-height: 1.3;
}
.stepper-text {
font-size: 0.95rem;
line-height: 1.6;
color: #4b5563;
margin: 0;
}
.stepper-list {
list-style: none;
padding: 0;
margin: 12px 0 0 0;
}
.stepper-list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
color: #4b5563;
font-size: 0.92rem;
line-height: 1.4;
}
.stepper-list li::before {
content: "○";
position: absolute;
left: 0;
color: #94a3b8;
font-weight: bold;
}
.step-link {
color: #023be2;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
}
.step-link:hover {
color: #0030b8;
} @media (max-width: 768px) {
.stepper-section {
padding: 30px 0px;
}
.stepper-item {
gap: 16px;
}
.stepper-number,
.stepper-number-square {
width: 38px;
height: 38px;
font-size: 12px;
}
.stepper-title {
font-size: 1.05rem;
}
.stepper-text {
font-size: 0.9rem;
}
} .Business-Benefits-card {
background: #fff;
border: 1px solid #eef2f6;
border-radius: 20px;
padding: 35px;
height: 100%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.benefits-b2b {
border-top: 5px solid #0056D4;
}
.benefits-b2c {
border-top: 5px solid #10B981;
}
.benefits-b2b .monetization-title {
color: #0056D4 !important;
font-weight: 800;
font-size: 1.4rem;
}
.benefits-b2c .monetization-title {
color: #10B981 !important;
font-weight: 800;
font-size: 1.4rem;
}
.Business-Benefits-card .monetization-list li {
color: #1e293b;
font-weight: 500;
padding-left: 30px;
margin-bottom: 22px;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 15px;
}
.Business-Benefits-card .monetization-list li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.Business-Benefits-card .monetization-list li::before {
content: "→";
color: #00BFA6; 
font-size: 1.2rem;
top: -2px;
}
.benefits-b2b .monetization-list li::before {
color: #0056D4;
}
.benefits-b2c .monetization-list li::before {
color: #10B981;
}
.SEA-scale .monetization-list li::before {
color: #0056D4;
} .brand-identity-wrapper {
margin-top: 30px;
padding-top: 20px;
}
.brand-identity-title {
color: #2b6df3; font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.3;
} @media (max-width: 768px) {
.brand-identity-title {
font-size: 1.25rem;
}
.brand-identity-wrapper {
margin-top: 20px;
}
} .tech-difference-section {
background-color: #111d42;
border-radius: 24px;
padding: 50px;
margin: 2.5rem 0;
color: #ffffff;
}
.difference-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
padding: 8px 20px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 30px;
border: 1px solid rgba(59, 130, 246, 0.4);
}
.difference-badge::before {
content: '';
width: 8px;
height: 8px;
background: #3b82f6;
border-radius: 50%;
}
.difference-title {
font-size: clamp(22px, 3.5vw, 30px);
font-weight: 800;
line-height: 1.3;
margin-bottom: 20px;
color: #ffffff;
}
.difference-desc {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
max-width: 850px;
margin-bottom: 40px;
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.comparison-card {
border-radius: 16px;
padding: 30px;
height: 100%;
}
.difference-card-red {
background-color: #fff1f2;
}
.difference-card-green {
background-color: #f0fdf4;
}
.comparison-card-heading {
font-size: 15px;
font-weight: 800;
margin-bottom: 25px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.comparison-list {
list-style: none;
padding: 0;
margin: 0;
}
.comparison-list li {
position: relative;
padding-left: 28px;
margin-bottom: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.comparison-list li::before {
content: attr(data-icon);
position: absolute;
left: 0;
font-weight: 700;
}
.difference-card-red .comparison-card-heading { color: #e11d48; }
.difference-card-red .comparison-list li { color: #9f1239; }
.difference-card-green .comparison-card-heading { color: #16a34a; }
.difference-card-green .comparison-list li { color: #166534; }
@media (max-width: 991px) {
.comparison-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 480px) {
.tech-difference-section {
padding: 30px 20px;
border-radius: 16px;
}
} .blog-tech-stack-section {
margin: 2rem 0 0 0;
width: 100%;
}
.tech-category-title {
color: #023be2;
font-weight: 700;
font-size:20px;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.tech-stack-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.tech-stack-card {
background: #ffffff;
border: 1px solid #e1e8f2;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
height: 100%;
}
.tech-stack-card:hover {
border-color: #023be2;
}
.tech-card-header {
margin-bottom: 10px;
}
.tech-card-title {
font-size: 15px;
font-weight: 700;
color: #111827;
margin: 0;
transition: color 0.3s ease;
text-decoration:none;
}
.tech-stack-card:hover .tech-card-title {
color: #023be2;
}
.tech-card-body {
display: flex;
align-items: flex-start;
gap: 14px;
}
.tech-bullet-dot {
width: 10px;
height: 10px;
background-color: #3b82f6;
border-radius: 50%;
flex-shrink: 0;
margin-top: 6px;
}
.tech-card-text {
font-size: 14px;
font-weight: 500;
color: #4b5563;
margin: 0;
line-height: 1.5;
}
@media (max-width: 991px) {
.tech-stack-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 576px) {
.tech-stack-grid {
grid-template-columns: 1fr;
}
.blog-tech-stack-section {
margin: 2.5rem 0;
}
} .Business-Benefits-card {
background: #fff;
border: 1px solid #eef2f6;
border-radius: 20px;
padding: 35px;
height: 100%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.benefits-b2b {
border-top: 5px solid #0056D4;
}
.benefits-b2c {
border-top: 5px solid #10B981;
}
.benefits-b2b .monetization-title {
color: #0056D4 !important;
font-weight: 800;
font-size: 1.4rem;
}
.benefits-b2c .monetization-title {
color: #10B981 !important;
font-weight: 800;
font-size: 1.4rem;
}
.Business-Benefits-card .monetization-list li {
color: #1e293b;
font-weight: 500;
padding-left: 30px;
margin-bottom: 22px;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 15px;
}
.Business-Benefits-card .monetization-list li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.Business-Benefits-card .monetization-list li::before {
content: "→";
color: #00BFA6; 
font-size: 1.2rem;
top: -2px;
}
.benefits-b2b .monetization-list li::before {
color: #0056D4;
}
.benefits-b2c .monetization-list li::before {
color: #10B981;
} .case-badge {
display: inline-block;
padding: 6px 16px;
border-radius: 50px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 24px;
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
}
.case-badge-edu {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.case-card-title {
font-size: 20px;
font-weight: 800;
color: #1e293b;
margin-bottom: 8px;
}
.case-card-subtitle {
font-size: 14px;
color: #64748b;
font-weight: 500;
margin-bottom: 24px;
}
.case-card-desc {
font-size: 16px;
line-height: 1.7;
color: #4b5563;
margin-bottom: 30px;
}
.case-tags-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.case-tag-pill {
padding: 8px 16px;
background: #f1f5f9;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
color: #64748b;
transition: all 0.2s ease;
}
.case-tag-pill:hover {
background: #e2e8f0;
color: #1e293b;
}
@media (max-width: 991px) {
.Business-Benefits-card {
padding: 25px;
}
.case-card-title {
font-size: 24px;
}
}
.contact-input-text {
font-size: 13px;
color: #9ca3af; margin-top: 8px;
margin-bottom:0;
}
.padding-top-blog{
padding-top: 20px;
}
@media (min-width: 768px) {
.clone-hero-title {
font-size: 53px;
}
} .blog-lightblue-box {
background: linear-gradient(
to right,
rgba(231, 239, 255, 1),
rgba(231, 239, 255, 0)
);
padding: 20px 30px;       
margin: 0 0 2rem 0;
border-left: 4px solid #023fe0; 
display: flex;
align-items: flex-start;
}
.blog-lightblue-box .blog-content-text {
color: black;          
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
font-weight: 400;          
}
@media (max-width: 768px) {
.blog-lightblue-box{
padding: 24px;
}
.blog-lightblue-box .blog-content-text {
font-size: 1rem;
}
} .blog-app-store-cta {
background: linear-gradient(130deg, #051838 0%, #0f2154 45%, #17113b 100%);
border-radius: 20px;
padding: 28px 32px;
margin: 2.5rem 0 3rem;
color: #ffffff;
box-shadow: 0 16px 40px rgba(3, 8, 27, 0.35);
}
.blog-app-store-cta-top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.blog-app-store-badge {
display: inline-flex;
align-items: center;
background: rgba(0, 255, 148, 0.12);
border: 1px solid #48d77d;
color:#48d77d;
border-radius: 999px;
padding: 8px 14px;
font-size: 0.76rem;
letter-spacing: 0.08em;
font-weight: 700;
}
.blog-app-store-builtby {
color: rgba(255, 255, 255, 0.64);
font-size: 0.78rem;
letter-spacing: 0.08em;
font-weight: 700;
}
.blog-app-store-title {
margin: 0 0 12px;
color: #ffffff;
font-size: clamp(1rem, 1.8vw, 1.5rem);
line-height: 1.3;
font-weight: 700;
}
.blog-app-store-description {
margin: 0 0 22px;
max-width: 860px;
color: rgba(255, 255, 255, 0.82);
font-size: 0.85rem;
line-height: 1.75;
}
.blog-app-store-buttons {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.blog-store-btn {
min-width: 174px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 14px;
padding: 12px 16px;
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
text-decoration: none;
transition: all 0.2s ease;
}
.blog-store-btn:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.14);
}
.blog-store-btn img {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.blog-store-btn span {
display: inline-flex;
flex-direction: column;
line-height: 1.1;
}
.blog-store-btn span small {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 4px;
}
.blog-store-btn span strong {
font-size: 1.45rem;
font-weight: 700;
color: #ffffff;
}
.blog-app-store-note {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 0.85rem;
line-height: 1.65;
}
@media (max-width: 991px) {
.blog-app-store-cta {
padding: 24px;
}
.blog-store-btn span strong {
font-size: 1.2rem;
}
}
@media (max-width: 767px) {
.blog-app-store-cta {
padding: 22px 18px;
border-radius: 16px;
}
.blog-app-store-description {
font-size: 0.96rem;
line-height: 1.65;
}
.blog-app-store-buttons {
flex-direction: column;
align-items: stretch;
}
.blog-store-btn {
width: 100%;
min-width: 100%;
justify-content: flex-start;
}
.blog-store-btn span strong {
font-size: 1.12rem;
}
.blog-app-store-note {
font-size: 0.93rem;
}
} .insta-ai-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: center;
gap: 20px;
max-width: 920px;
margin: 1.5rem auto 2.5rem;
}
.insta-ai-feature-card {
position: relative;
overflow: hidden;
border-radius: 16px;
background: linear-gradient(140deg, #121b46 0%, #19173f 100%);
padding: 20px 20px 22px;
border: 1px solid rgba(61, 95, 186, 0.34);
}
.insta-ai-feature-card::after {
content: "";
position: absolute;
top: -22px;
right: -22px;
width: 86px;
height: 86px;
border-radius: 50%;
background-color: rgba(43, 108, 255, 0.12);
pointer-events: none;
}
.insta-ai-feature-tag {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: rgba(20, 62, 164, 0.5);
color: #2b7cff;
font-size: 0.70rem;
line-height: 1;
letter-spacing: 0.09em;
font-weight: 700;
margin-bottom: 14px;
}
.insta-ai-feature-title {
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
line-height: 1.32;
color: #ffffff;
margin: 0 0 12px;
font-weight: 700;
}
.insta-ai-feature-title .bi {
color: white;
margin-right: 6px;
font-size: 1.2rem;
vertical-align: -0.05em;
}
.insta-ai-feature-text {
margin: 0;
color: rgba(230, 236, 255, 0.88);
line-height: 1.52;
font-size: 0.95rem;
max-width: 98%;
}
@media (max-width: 991px) {
.insta-ai-feature-grid {
grid-template-columns: repeat(2, minmax(260px, 1fr));
gap: 16px;
max-width: 100%;
margin: 1.25rem 0 2rem;
}
.insta-ai-feature-card {
padding: 18px 16px 20px;
}
.insta-ai-feature-title {
font-size: clamp(0.98rem, 2.2vw, 1.08rem);
}
.insta-ai-feature-text {
font-size: 0.82rem;
}
}
@media (max-width: 767px) {
.insta-ai-feature-grid {
grid-template-columns: 1fr;
gap: 14px;
margin: 1.25rem 0 2rem;
}
.insta-ai-feature-card {
border-radius: 14px;
padding: 16px 14px 18px;
}
.insta-ai-feature-tag {
font-size: 0.6rem;
letter-spacing: 0.07em;
}
.insta-ai-feature-title {
font-size: 1.02rem;
margin-bottom: 10px;
}
.insta-ai-feature-text {
font-size: 0.8rem;
line-height: 1.5;
}
} .tech-stack-table-wrapper {
width: 100%;
margin: 1.25rem 0 2.5rem;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}
.blog-tech-stack-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.blog-tech-stack-table th {
background: #151721;
color: #ffffff;
text-align: left;
padding: 14px 16px;
font-size: 1.03rem;
font-weight: 700;
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.blog-tech-stack-table th:last-child {
border-right: none;
}
.blog-tech-stack-table td {
padding: 14px 16px;
border-top: 1px solid #e5e7eb;
color: #334155;
font-size: 0.84rem;
font-weight: 400;
line-height: 1.5;
vertical-align: middle;
}
.blog-tech-stack-table tbody tr:nth-child(even) td {
background: #fafafa;
}
.blog-tech-stack-table .stack-layer-col {
font-weight: 700;
color: #0f172a;
}
.stack-role-pill {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 6px 12px;
font-size: 0.74rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.stack-role-platform { background: #dbeafe; color: #1d4ed8; }
.stack-role-backend { background: #dcfce7; color: #15803d; }
.stack-role-ai { background: #e0e7ff; color: #1d4ed8; }
.stack-role-data { background: #dcfce7; color: #15803d; }
.stack-role-performance { background: #dbeafe; color: #1d4ed8; }
.stack-role-cdn { background: #ffedd5; color: #c2410c; }
.stack-role-search { background: #dbeafe; color: #1d4ed8; }
.stack-role-notify { background: #dcfce7; color: #15803d; }
.stack-role-media { background: #ffedd5; color: #c2410c; }
@media (max-width: 1024px) {
.blog-tech-stack-table th,
.blog-tech-stack-table td {
font-size: 0.84rem;
padding: 12px 14px;
}
.stack-role-pill {
font-size: 0.7rem;
padding: 6px 10px;
}
}
@media (max-width: 1024px) {
.tech-stack-table-wrapper {
margin: 1.5rem 0 2rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.blog-content-row .tech-stack-table-wrapper {
width: 100%;
max-width: 100%;
}
.blog-tech-stack-table {
display: block;
min-width: 100%;
table-layout: auto;
background: transparent;
}
.blog-tech-stack-table thead {
display: none;
}
.blog-tech-stack-table tbody,
.blog-tech-stack-table tr,
.blog-tech-stack-table td {
display: block;
width: 100%;
}
.blog-tech-stack-table tr {
width: 100%;
box-sizing: border-box;
margin-bottom: 14px;
background: #ffffff;
border: 1px solid #e5eaf2;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}
.blog-tech-stack-table td {
padding: 12px 14px;
border: 0;
border-bottom: 1px solid #eef2f6;
text-align: left;
display: grid;
grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
align-items: start;
gap: 12px;
font-size: 0.87rem;
line-height: 1.45;
white-space: normal;
word-break: break-word;
}
.blog-tech-stack-table tr td:last-child {
border-bottom: none;
}
.blog-tech-stack-table .stack-layer-col {
background: #0b101e !important;
color: #ffffff !important;
text-align: left;
justify-content: flex-start;
font-size: 0.93rem;
padding: 10px 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
width: 100% !important;
font-weight: 700;
}
.blog-tech-stack-table td:nth-child(2)::before,
.blog-tech-stack-table td:nth-child(3)::before,
.blog-tech-stack-table td:nth-child(4)::before {
content: attr(data-label);
font-weight: 700;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-right: 0;
flex-shrink: 0;
color: #64748b;
}
.stack-role-pill {
font-size: 0.66rem;
padding: 5px 9px;
justify-self: start;
}
}
.blog-techstack-title {
font-size: clamp(1.1rem, 2vw, 1.6rem);
line-height: 1.2;
margin-bottom: 1.5rem;
font-weight:700
} .stepper-section-modern .stepper-number {
background: #2563eb;
width: 28px;
height: 28px;
font-size: 13px;
}
.stepper-section-modern .stepper-line {
background: #dbeafe;
width: 2px;
margin: 6px 0;
}
.stepper-top-pill {
display: inline-flex;
align-items: center;
background: #dbeafe;
color: #1d4ed8;
border-radius: 999px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
margin-bottom: 10px;
}
.stepper-section-modern .stepper-title {
margin-top: 0;
}
@media (max-width: 768px) {
.stepper-section-modern .stepper-number {
width: 24px;
height: 24px;
font-size: 11.5px;
}
.stepper-top-pill {
font-size: 0.7rem;
padding: 5px 10px;
margin-bottom: 8px;
}
} .blog-budget-widget {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 40px;
max-width: 100%;
margin: 40px 0;
}
.blog-budget-step {
font-size: 0.85rem;
font-weight: 700;
color: #1d4ed8;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 24px;
display: block;
}
.blog-budget-title {
font-size: 1.75rem;
font-weight: 700;
color: #111827;
margin-bottom: 16px;
}
.blog-budget-desc {
font-size: 1rem;
color: #4b5563;
margin-bottom: 32px;
line-height: 1.5;
}
.blog-budget-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.blog-budget-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px 20px;
background: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
}
.blog-budget-card:hover {
border-color: #3b82f6;
background: #eff6ff;
}
.blog-budget-card.active {
border-color: #3b82f6;
border-width: 2px;
background: #eff6ff;
padding: 23px 19px; }
.blog-budget-icon {
font-size: 1.5rem;
margin-bottom: 16px;
}
.blog-budget-price {
font-size: 1.1rem;
font-weight: 700;
color: #111827;
margin-bottom: 4px;
}
.blog-budget-label {
font-size: 0.875rem;
color: #6b7280;
}
.blog-budget-next {
background: #93c5fd; 
color: white;
border: none;
border-radius: 50px;
padding: 12px 32px;
font-size: 1rem;
font-weight: 500;
cursor: not-allowed;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
}
.blog-budget-next.active {
background: #023be2; 
cursor: pointer;
}
.blog-budget-next.active:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(2, 59, 226, 0.2);
}
@media (max-width: 991px) {
.blog-budget-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.blog-budget-grid {
grid-template-columns: 1fr;
}
.blog-budget-widget {
padding: 24px;
}
.blog-budget-title {
font-size: 1.5rem;
}
} .budget-step-content {
display: none; }
.budget-step-content.active-step {
display: block;
animation: budgetFadeIn 0.4s ease forwards;
}
@keyframes budgetFadeIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.blog-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.blog-feature-card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
background: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 12px;
}
.blog-feature-card:hover {
border-color: #d1d5db;
background: #f8fafc;
}
.blog-feature-card.selected {
border-color: #3b82f6;
background: #eff6ff;
}
.blog-feature-checkbox {
width: 18px;
height: 18px;
border: 1px solid #d1d5db;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.blog-feature-card.selected .blog-feature-checkbox {
background: #3b82f6;
border-color: #3b82f6;
}
.blog-feature-card.selected .blog-feature-checkbox::after {
content: '';
width: 10px;
height: 10px;
background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="white" stroke-width="3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.blog-feature-text {
font-size: 0.95rem;
font-weight: 500;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
}
.blog-budget-actions {
display: flex;
gap: 12px;
align-items: center;
}
.blog-budget-back {
background: transparent;
color: #4b5563;
border: 1px solid #e5e7eb;
border-radius: 50px;
padding: 12px 24px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.blog-budget-back:hover {
background: #f9fafb;
color: #111827;
}
@media (max-width: 991px) {
.blog-feature-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.blog-feature-grid {
grid-template-columns: 1fr;
}
} .blog-estimate-method-card {
border: 1px solid #bfdbfe;
background: #eff6ff;
border-radius: 8px;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.blog-estimate-method-icon img {
display: block;
}
.blog-estimate-method-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.blog-estimate-method-text strong {
font-size: 1rem;
color: #111827;
}
.blog-estimate-method-text span {
font-size: 0.875rem;
color: #4b5563;
}
.blog-budget-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.blog-budget-input {
width: 100%;
padding: 14px 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 1rem;
color: #111827;
outline: none;
transition: all 0.2s;
}
.blog-budget-input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.blog-budget-input.error-border {
border-color: #ef4444;
}
.blog-budget-error {
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
padding: 12px 16px;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
margin-top: 16px;
}
.blog-budget-submit {
background: #0ea5e9;
color: white;
border: none;
border-radius: 50px;
padding: 12px 32px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
flex: 1; display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.blog-budget-submit:hover {
background: #0284c7;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.blog-budget-spam-note {
font-size: 0.85rem;
color: #6b7280;
margin-top: 16px;
}
.blog-services-list {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
}
.blog-services-list li {
position: relative;
margin-bottom: 16px;
font-size: clamp(1rem, 1.2vw, 1.2rem);
line-height: 1.6;
color: #4b5563;
padding-left: 24px;
}
.blog-services-list li::before {
content: "•";
position: absolute;
left: 0;
top: -2px;
color: #4b5563;
font-size: 1.6rem;
}
.blog-services-list li strong {
color: #111827;
font-weight: 700;
}
@media (max-width: 768px) {
.blog-services-list li {
font-size: 0.95rem;
margin-bottom: 12px;
}
} .blog-contact-banner {
display: flex;
align-items: stretch;
border-radius: 12px;
overflow: hidden;
margin: 40px 0 50px 0;
color: #ffffff;
font-family: 'Poppins', sans-serif;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
width: 100%;
}
.blog-contact-banner-side {
flex: 1;
padding: 30px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.blog-contact-banner-side-left {
background-color: #177a64; 
}
.blog-contact-banner-side-right {
background-color: #1a253a; 
}
.blog-contact-banner-mid {
background-color: #121929; 
display: flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
z-index: 2;
}
.blog-contact-banner-title {
margin: 2px;
font-size: 18px;
line-height:1;
margin-bottom: 8px;
flex: 1;
max-width: 120px;
color: #ffffff;
}
.blog-contact-banner-text {
margin: 2px;
font-size: 13px;
font-weight: 400;
line-height:1.2;
color: #e2e8f0;
flex: 1;
max-width: 130px;
}
.blog-contact-action-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
color: #ffffff;
transition: all 0.3s ease;
white-space: nowrap;
}
.blog-contact-action-pill:hover {
transform: translateY(-2px);
color: #ffffff;
}
.blog-contact-action-pill-whatsapp {
background-color: #25d366;
}
.blog-contact-action-pill-whatsapp:hover {
background-color: #1ebc59;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}
.blog-contact-action-pill-email {
background-color: #0aa2ea;
}
.blog-contact-action-pill-email:hover {
background-color: #088ecf;
box-shadow: 0 4px 15px rgba(10, 162, 234, 0.4);
}
.blog-contact-info-with-icon {
display: flex;
align-items: center;
gap: 15px;
}
.blog-contact-status-dot {
width: 10px;
height: 10px;
background-color: #25d366;
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.blog-contact-status-dot::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: #25d366;
animation: blogDotPulse 2s infinite;
}
@keyframes blogDotPulse {
0%   { transform: scale(0.5); opacity: 0; }
5%   { transform: scale(1);   opacity: 0.6; }
95%  { transform: scale(3.5); opacity: 0; }
100% { transform: scale(3.5); opacity: 0; }
}
.blog-contact-banner-icon {
font-size: 24px;
color: #e2e8f0;
flex-shrink: 0;
}
@media (max-width: 768px) {
.blog-contact-info-with-icon {
justify-content: center;
margin-bottom: 0px;
}
}
@media (max-width: 1024px) {
.blog-contact-banner-side {
padding: 16px 20px;
gap: 10px;
flex-wrap: wrap;
}
.blog-contact-banner-title {
font-size: 15px;
max-width: none;
}
.blog-contact-banner-text {
font-size: 12px;
max-width: none;
}
.blog-contact-info-with-icon {
flex: 1;
min-width: 0;
}
.blog-contact-action-pill {
padding: 10px 16px;
font-size: 14px;
flex-shrink: 0;
}
.blog-contact-banner-mid {
min-width: 32px;
width: 32px;
font-size: 12px;
}
}
@media (max-width: 768px) {
.blog-contact-banner {
flex-direction: column;
}
.blog-contact-banner-side {
flex-direction: column;
text-align: center;
padding: 30px;
}
.blog-contact-banner-title,
.blog-contact-banner-text {
max-width: 100%;
}
.blog-contact-banner-mid {
width: 100%;
height: 40px;
min-height: 40px;
}
} .readyToBuild-blog-cta-wrapper {
padding: 20px 0;
}
.readyToBuild-blog-cta-card {
background-color: #111111;
border-radius: 32px;
padding: 40px 40px;
text-align: center;
color: #ffffff;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}
.readyToBuild-blog-cta-title {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
font-family: 'Georgia', serif;
color: #ffffff;
}
.readyToBuild-blog-cta-subtitle {
font-size: 1rem;
color: #94a3b8;
max-width: 600px;
margin: 0 auto 35px;
line-height: 1.6;
font-weight: 400;
}
.readyToBuild-blog-cta-button-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-bottom: 40px;
}
.readyToBuild-blog-cta-main-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.readyToBuild-blog-cta-other-buttons {
display: flex;
justify-content: center;
}
.readyToBuild-cta-btn {
padding: 14px 32px;
border-radius: 60px;
font-weight: 600;
font-size: 1rem;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 240px;
}
.readyToBuild-cta-btn-gradient {
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
color: #ffffff !important;
border: none;
}
.readyToBuild-cta-btn-gradient:hover {
box-shadow: 0 15px 40px rgba(2, 59, 226, 0.2);
filter: brightness(1.1);
}
.readyToBuild-cta-btn-outline {
background: #222222;
color: #ffffff !important;
border: 1px solid #334155;
}
.readyToBuild-cta-btn-outline:hover {
background: #2d2d2d;
border-color: #475569;
}
.readyToBuild-blog-cta-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
margin: 40px auto;
width: 100%;
}
.readyToBuild-blog-cta-stores {
width: 100%;
}
.readyToBuild-blog-cta-stores-header {
font-size: 0.85rem;
font-weight: 700;
color: #64748b;
letter-spacing: 2px;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-transform: uppercase;
}
.readyToBuild-blog-cta-stores-header i {
color: #ef4444;
font-size: 1.1rem;
}
.readyToBuild-blog-cta-stores-grid {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.readyToBuild-store-btn {
background: #1a1f2e;
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 10px 20px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none !important;
color: #ffffff !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
min-width: 200px;
text-align: left;
}
.readyToBuild-store-btn:hover {
background: #232a3d;
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.readyToBuild-store-btn img {
width: 36px;
height: 36px;
object-fit: contain;
}
.readyToBuild-store-btn-text {
display: flex;
flex-direction: column;
}
.store-tag {
font-size: 0.7rem;
color: #64748b;
font-weight: 600;
margin-bottom: 2px;
}
.store-name {
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
}
@media (max-width: 991px) {
.readyToBuild-blog-cta-card {
padding: 60px 30px;
border-radius: 30px;
}
.readyToBuild-blog-cta-title {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.readyToBuild-blog-cta-wrapper {
padding: 30px 0;
}
.readyToBuild-blog-cta-card {
padding: 40px 20px;
border-radius: 24px;
}
.readyToBuild-blog-cta-main-buttons {
flex-direction: column;
width: 100%;
}
.readyToBuild-cta-btn {
width: 100%;
min-width: unset;
}
.readyToBuild-blog-cta-title {
font-size: 2rem;
}
.readyToBuild-store-btn {
width: 100%;
justify-content: center;
padding: 12px 20px;
}
} .also-explore-section {
padding: var(--section-spacing) 20px;
background: #ffffff;
}
.also-explore-section .container{
background: white;
}
@media (max-width: 768px) {
.also-explore-section {
padding: var(--section-spacing-mobile) 20px;
}
}
.also-explore-card {
border-left: 5px solid #492e80;
background: #fff;
padding: 32px 36px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(73,46,128,0.07);
}
.also-explore-label {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.12em;
color: #492e80;
text-transform: uppercase;
margin-bottom: 14px;
}
.also-explore-text {
font-size: 1rem;
color: #374151;
line-height: 1.8;
margin: 0;
}
.also-explore-link {
color: #492e80;
font-weight: 700;
text-decoration: none;
}
.also-explore-link:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.also-explore-card {
padding: 22px 18px;
}
.also-explore-text {
font-size: 0.95rem;
}
} .iot-workflow-wrapper {
margin: 1rem 0 2rem 0;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.iot-workflow-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.iot-workflow-node {
border-radius: 16px;
padding: 1rem 1rem;
flex: 1;
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
min-width: 160px;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.iot-node-title {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.iot-node-subtext {
font-family: "Courier New", Courier, monospace;
font-size: 0.85rem;
color: #64748b;
margin: 0;
letter-spacing: 0.05em;
} .node-blue {
background: rgba(59, 130, 246, 0.08);
border: 1.5px solid #3b82f6;
box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}
.node-blue .iot-node-title { color: #3b82f6; }
.node-yellow {
background: rgba(245, 158, 11, 0.08);
border: 1.5px solid #f59e0b;
box-shadow: 0 0 15px rgba(245, 158, 11, 0.08);
}
.node-yellow .iot-node-title { color: #f59e0b; }
.node-gray {
background: rgba(100, 116, 139, 0.08);
border: 1.5px solid #64748b;
box-shadow: 0 0 15px rgba(100, 116, 139, 0.06);
}
.node-gray .iot-node-title { color: #64748b; }
.node-green {
background: rgba(16, 185, 129, 0.08);
border: 1.5px solid #10b981;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.08);
}
.node-green .iot-node-title { color: #10b981; }
.iot-workflow-arrow {
color: black;
font-size: 1.1rem;
opacity: 0.6;
flex-shrink: 0;
} @media (max-width: 1199px) {
.iot-workflow-node {
min-width: 130px;
padding: 1.2rem 0.8rem;
}
.iot-node-title {
font-size: 1.05rem;
}
}
@media (max-width: 1200px) {
.iot-workflow-container {
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
}
.iot-workflow-arrow {
display: none;
}
.iot-workflow-node {
min-width: calc(50% - 2rem);
}
}
@media (max-width: 576px) {
.iot-workflow-node {
min-width: 100%;
}
} .blog-iot-cta-banner {
margin:1.5rem 0 2rem 0;
background: rgba(8,124,149,0.09);
border: 1px solid #087c95;
border-radius: 16px;
padding: 24px 30px;
transition: all 0.3s ease;
}
.cta-iot-banner-content {
display: flex;
align-items: center;
gap: 20px;
}
.cta-banner-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
color: #087c95;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.cta-iot-banner-text {
font-size: 16px;
color: #087c95;
line-height: 1.6;
margin: 0;
}
.cta-iot-banner-text a {
color: #087c95;
text-decoration: none;
font-weight: 700;
transition: all 0.2s ease;
}
.cta-banner-link {
display: inline-block;
color: #023be2 !important;
font-weight: 700;
text-decoration: none !important;
margin-left: 5px;
border-bottom: none !important;
}
@media (max-width: 768px) {
.cta-iot-banner-content {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.blog-iot-cta-banner {
padding: 22px;
}
.cta-iot-banner-text {
font-size: 15px;
}
} .video-ratio-wrapper { position: relative; }
.video-iframe { border: 0; }
.video-thumb-overlay { position: absolute; inset: 0; cursor: pointer; z-index: 2; }
.video-thumb-img { width: 100%; height: 100%; object-fit: cover; filter: blur(4px) brightness(0.7); }
.video-play-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-play-btn { width: 72px; height: 72px; border-radius: 50%; background: #1a6fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(26,111,255,0.25); transition: transform 0.2s; }
.video-play-btn:hover { transform: scale(1.1); }
.video-play-icon { font-size: 2rem; color: #fff; margin-left: 4px; } .blog-demo-grid {
margin-top: 1rem;
}
.demo-card {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 28px;
padding: 32px;
height: 100%;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
display: flex;
flex-direction: column;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
position: relative;
overflow: hidden;
}
.demo-card:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border-color: #cbd5e1;
}
.demo-card-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 800;
padding: 6px 14px;
border-radius: 50px;
margin-bottom: 24px;
width: fit-content;
letter-spacing: 1px;
text-transform: uppercase;
}
.android-badge {
background: #eefdf3;
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.ios-badge {
background: #eff6ff;
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.demo-card-title {
font-size: 26px;
font-weight: 700;
color: #0f172a;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.demo-card-text {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin-bottom: 30px;
}
.demo-video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 10 / 14;
background: #020617;
border-radius: 24px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
border: 1px solid #f1f5f9;
}
.demo-thumb {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.demo-card:hover .demo-thumb {
transform: scale(1.1);
opacity: 0.6;
}
.demo-play-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
border-radius: 24px;
cursor: pointer; background: linear-gradient(to top, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.2));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); 
transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.play-circle {
width: 60px;
height: 60px;
background: #023be2;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.play-circle i {
color: #ffffff;
font-size: 32px;
margin-left: 5px;
}
.demo-play-text {
text-align: center;
color: #ffffff;
}
.demo-play-text h5 {
font-size: 19px;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.demo-play-text p {
font-size: 13px;
opacity: 0.9;
margin-top: 6px;
font-weight: 500;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.demo-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.demo-tag { background: linear-gradient(
90.38deg,
rgba(2, 59, 226, 0.20) 2.06%, 
rgba(0, 161, 197, 0.20) 99.67%
);
color: #475569;
font-size: 11px;
font-weight: 700;
padding: 6px 12px;
border-radius: 10px;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@media (max-width: 991px) {
.demo-video-wrapper {
aspect-ratio: 16 / 10;
}
}
@media (max-width: 576px) {
.demo-card {
padding: 24px;
}
.demo-card-title {
font-size: 22px;
}
} .budget-quote-section {
margin: 0 0 2.5rem 0; 
}
.budget-quote-section h2 {
border-bottom: 1px solid #e2e8f0;
padding-bottom: 12px;
margin-bottom: 12px;
}
.budget-wizard {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 40px 36px;
margin-top: 28px;
position: relative;
overflow: hidden;
}
.budget-wizard::before {
display: none;
}
.bw-step-label {
font-size: 0.85rem;
font-weight: 700;
color: #1d4ed8;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 24px;
}
.bw-step-title {
font-size: 1.75rem;
font-weight: 700;
color: #111827;
margin-bottom: 16px;
}
.bw-step-sub {
font-size: 13.5px;
color: #64748b;
margin-bottom: 24px;
} .bw-budget-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.bw-budget-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px 20px;
background: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
}
.bw-budget-card:hover {
border-color: #3b82f6;
background: #eff6ff;
}
.bw-budget-card.selected {
border-color: #3b82f6;
border-width: 2px;
background: #eff6ff;
padding: 23px 19px;
}
.bw-budget-amount {
font-size: 1.1rem;
font-weight: 700;
color: #111827;
margin-bottom: 4px;
}
.bw-budget-label {
font-size: 0.875rem;
color: #6b7280;
} .bw-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.bw-feature-item {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 11px 14px;
cursor: pointer;
font-size: 13.5px;
color: #475569;
transition: all 0.2s;
user-select: none;
}
.bw-feature-item:hover {
border-color: #d1d5db;
background: #f8fafc;
}
.bw-feature-item input {
display: none;
}
.bw-feature-check {
width: 18px;
height: 18px;
border: 2px solid #cbd5e1;
border-radius: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.bw-feature-item input:checked ~ .bw-feature-check {
background: #3b82f6;
border-color: #3b82f6;
}
.bw-feature-check::after {
content: '';
width: 10px;
height: 10px;
background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="white" stroke-width="3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.bw-feature-item input:checked ~ .bw-feature-check::after {
color: #fff;
}
.bw-feature-item:has(input:checked) {
border-color: #3b82f6;
background: #eff6ff;
} .bw-nav {
display: flex;
justify-content: flex-start;
}
.bw-nav-two {
justify-content: flex-start;
gap:10px
}
.bw-btn-next{
background: #023be2; 
color: white;
border: none;
border-radius: 50px;
padding: 12px 20px;
font-size: 1rem;
font-weight: 500;
cursor: not-allowed;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
}
.bw-btn-submit {
background: #0ea5e9;
color: white;
border: none;
border-radius: 50px;
padding: 12px 32px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
flex: 1; display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.bw-btn-next:hover:not(:disabled),
.bw-btn-submit:hover {
transform: translateY(-2px);
}
.bw-btn-next:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.bw-btn-back {
background: transparent;
color: #64748b;
font-weight: 600;
font-size: 14px;
padding: 12px 20px;
border-radius: 50px;
border: 1px solid #e2e8f0;
cursor: pointer;
transition: all 0.2s;
}
.bw-btn-back:hover {
color: #0f172a;
border-color: #94a3b8;
} .bw-contact-box {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 24px;
margin-bottom: 24px;
}
.bw-contact-header {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 10px;
}
.bw-contact-icon {
font-size: 20px;
line-height: 1;
padding-top: 10px;
}
.bw-contact-title {
font-size: 1.30rem;
font-weight: 700;
color: #111827;
margin-bottom: 1px;
}
.bw-contact-desc {
font-size: 1rem;
color: #4b5563;
margin-bottom: 32px;
line-height: 1.5;
}
.bw-field-group {
margin-bottom: 12px;
position: relative;
}
.bw-input {
width: 100%;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 12px 16px;
color: #0f172a;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
.bw-input::placeholder {
color: #94a3b8;
}
.bw-input:focus {
border-color: #087c95;
}
.bw-field-error {
font-size: 12px;
color: #ef4444;
margin-top: 5px;
}
.bw-privacy {
font-size: 12px;
color: #64748b;
text-align: center;
margin-top: 12px;
} .bw-success {
text-align: center;
padding: 20px 0;
}
.bw-success-icon {
font-size: 48px;
margin-bottom: 16px;
}
.bw-success-title {
font-size: 22px;
font-weight: 800;
color: #0f172a;
margin-bottom: 10px;
}
.bw-success-msg {
font-size: 14.5px;
color: #64748b;
max-width: 460px;
margin: 0 auto 28px;
line-height: 1.7;
}
.bw-prefer {
font-size: 13px;
color: #64748b;
margin-bottom: 14px;
}
.bw-contact-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.bw-contact-pill {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
.bw-pill-label {
font-size: 12px;
color: #64748b;
}
.bw-pill-link {
display: inline-block;
padding: 10px 22px;
border-radius: 10px;
font-weight: 700;
font-size: 13px;
text-decoration: none;
transition: all 0.2s;
}
.whatsapp-link {
background: #25d366;
color: #fff;
}
.whatsapp-link:hover {
background: #20bb5a;
color: #fff;
}
.email-link {
background: rgba(8, 124, 149, 0.1);
color: #087c95;
border: 1px solid rgba(8, 124, 149, 0.3);
}
.email-link:hover {
background: rgba(8, 124, 149, 0.2);
color: #065f72;
border-color: #087c95;
}
.bw-contact-divider {
font-size: 12px;
color: #94a3b8;
padding: 0 4px;
} @media (max-width: 991px) {
.bw-budget-grid {
grid-template-columns: repeat(2, 1fr);
}
.bw-feature-grid {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 576px) {
.bw-budget-grid {
grid-template-columns: repeat(2, 1fr);
}
.bw-feature-grid {
grid-template-columns: 1fr;
}
} @media (max-width: 768px) {
.budget-wizard {
padding: 28px 20px;
}
}
@media (max-width: 480px) {
.bw-btn-next,
.bw-btn-submit {
padding: 11px 20px;
font-size: 13px;
}
} .ble-pkg-section { padding: 0 0 30px 0; width: 100%; box-sizing: border-box; }
.ble-pkg-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ble-pkg-item {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 16px 20px;
font-size: 15px;
color: #374151;
line-height: 1.5;
flex-wrap: wrap;
}
.ble-pkg-item::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #3b82f6;
flex-shrink: 0;
}
.ble-pkg-name {
font-weight: 700;
color: #3b82f6;
font-size: 16px;
white-space: nowrap;
}
@media (max-width: 576px) {
.ble-pkg-item {
padding: 14px 16px;
font-size: 14px;
gap: 10px;
}
.ble-pkg-name { font-size: 13px; }
} .blog-packages-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin: 40px 0;
width: 100%;
}
.package-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 30px;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
height: 100%;
}
.package-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
transition: height 0.3s ease;
}
.package-card.android::before { background: #10b981; }
.package-card.ios::before { background: #94a3b8; }
.package-card.both::before { background: #3b82f6; }
.package-card.fallback::before { background: #f59e0b; }
.package-card:hover {
transform: translateY(-3px);
}
.package-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.package-header .status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.package-card.android .status-dot { background: #10b981; }
.package-card.ios .status-dot { background: #94a3b8;  }
.package-card.both .status-dot { background: #3b82f6; }
.package-card.fallback .status-dot { background: #f59e0b;}
.platform-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
color: #64748b;
text-transform: uppercase;
}
.package-card.android .platform-label { color: #10b981; }
.package-card.ios .platform-label { color: #94a3b8; }
.package-card.both .platform-label { color: #3b82f6; }
.package-card.fallback .platform-label { color: #f59e0b; }
.package-title {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin-bottom: 6px;
line-height: 1.3;
}
.package-version {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 13.5px;
color: #94a3b8;
margin-bottom: 20px;
}
.package-description {
font-size: 15px;
line-height: 1.65;
color: #475569;
margin: 0;
} @media (max-width: 991px) {
.blog-packages-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.package-card {
padding: 25px;
}
}
@media (max-width: 480px) {
.package-title {
font-size: 18px;
}
.package-description {
font-size: 14px;
}
} .blog-code-container {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
margin: 10px 0 30px 0;
width: 100%;
}
.code-header {
background: #f8fafc;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e2e8f0;
}
.header-dots {
display: flex;
gap: 6px;
}
.header-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.dot.red { background: #ef6060; }
.dot.yellow { background: #f0b429; }
.dot.green { background: #3dd68c; }
.header-filename {
display: flex;
align-items: center;
gap: 12px;
}
.header-filename .filename {
font-size: 13px;
color: #64748b;
font-family: 'SFMono-Regular', Consolas, monospace;
}
.header-filename .lang-tag {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
}
.code-body {
padding: 24px;
background: #ffffff;
overflow-x: auto;
}
.code-body pre {
margin: 0;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 14px;
line-height: 1.7;
color: #1e293b;
}
.code-body pre code {
white-space: pre;
display: block;
} .code-comment {
color: #94a3b8;
font-style: italic;
}
.code-key {
color: #023be2;
font-weight: 600;
}
.code-keyword {
color: #7c3aed; font-weight: 600;
}
.code-type {
color: #0891b2; }
.code-string {
color: #ea580c; }
.code-method {
color: #2563eb; }
.code-green {
color: #10b981; } @media (max-width: 1024px) {
.blog-code-container {
max-width: 100%;
overflow: hidden;
}
.code-body {
padding: 16px 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.code-body pre {
font-size: clamp(11px, 1.1vw, 13px);
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
min-width: unset;
}
.header-filename .filename {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 260px;
}
}
@media (max-width: 768px) {
.code-body {
padding: 14px 16px;
}
.code-body pre {
font-size: 12px;
}
.header-dots {
display: none;
}
.header-filename .filename {
max-width: 180px;
}
} .tech-stack-table-wrapper {
width: 100%;
margin: 1.25rem 0 2.5rem;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}
.blog-tech-stack-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.blog-tech-stack-table th {
background: #151721;
color: #ffffff;
text-align: left;
padding: 14px 16px;
font-size: 1.03rem;
font-weight: 700;
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.blog-tech-stack-table th:last-child {
border-right: none;
}
.blog-tech-stack-table td {
padding: 14px 16px;
border-top: 1px solid #e5e7eb;
color: #334155;
font-size: 0.84rem;
font-weight: 400;
line-height: 1.5;
vertical-align: middle;
}
.blog-tech-stack-table tbody tr:nth-child(even) td {
background: #fafafa;
}
.blog-tech-stack-table .stack-layer-col {
font-weight: 700;
color: #0f172a;
}
.stack-role-pill {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 6px 12px;
font-size: 0.74rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.stack-role-platform { background: #dbeafe; color: #1d4ed8; }
.stack-role-backend { background: #dcfce7; color: #15803d; }
.stack-role-ai { background: #e0e7ff; color: #1d4ed8; }
.stack-role-data { background: #dcfce7; color: #15803d; }
.stack-role-performance { background: #dbeafe; color: #1d4ed8; }
.stack-role-cdn { background: #ffedd5; color: #c2410c; }
.stack-role-search { background: #dbeafe; color: #1d4ed8; }
.stack-role-notify { background: #dcfce7; color: #15803d; }
.stack-role-media { background: #ffedd5; color: #c2410c; }
@media (max-width: 1024px) {
.blog-tech-stack-table th,
.blog-tech-stack-table td {
font-size: 0.84rem;
padding: 12px 14px;
}
.stack-role-pill {
font-size: 0.7rem;
padding: 6px 10px;
}
}
@media (max-width: 1024px) {
.tech-stack-table-wrapper {
margin: 1.5rem 0 2rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
.blog-content-row .tech-stack-table-wrapper {
width: 100%;
max-width: 100%;
}
.blog-tech-stack-table {
display: block;
min-width: 100%;
table-layout: auto;
background: transparent;
}
.blog-tech-stack-table thead {
display: none;
}
.blog-tech-stack-table tbody,
.blog-tech-stack-table tr,
.blog-tech-stack-table td {
display: block;
width: 100%;
}
.blog-tech-stack-table tr {
width: 100%;
box-sizing: border-box;
margin-bottom: 14px;
background: #ffffff;
border: 1px solid #e5eaf2;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}
.blog-tech-stack-table td {
padding: 12px 14px;
border: 0;
border-bottom: 1px solid #eef2f6;
text-align: left;
display: grid;
grid-template-columns: minmax(84px, 36%) minmax(0, 1fr);
align-items: start;
gap: 12px;
font-size: 0.87rem;
line-height: 1.45;
white-space: normal;
word-break: break-word;
}
.blog-tech-stack-table tr td:last-child {
border-bottom: none;
}
.blog-tech-stack-table .stack-layer-col {
background: #0b101e !important;
color: #ffffff !important;
text-align: left;
justify-content: flex-start;
font-size: 0.93rem;
padding: 10px 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
width: 100% !important;
font-weight: 700;
}
.blog-tech-stack-table td:nth-child(2)::before,
.blog-tech-stack-table td:nth-child(3)::before,
.blog-tech-stack-table td:nth-child(4)::before {
content: attr(data-label);
font-weight: 700;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-right: 0;
flex-shrink: 0;
color: #64748b;
}
.stack-role-pill {
font-size: 0.66rem;
padding: 5px 9px;
justify-self: start;
}
}
.blog-techstack-title {
font-size: clamp(1.1rem, 2vw, 1.6rem);
line-height: 1.2;
margin-bottom: 1.5rem;
font-weight:700
}
.blog-services-list {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
}
.blog-services-list li {
position: relative;
margin-bottom: 16px;
font-size: clamp(1rem, 1.2vw, 1.2rem);
line-height: 1.6;
color: #4b5563;
padding-left: 24px;
}
.blog-services-list li::before {
content: "•";
position: absolute;
left: 0;
top: -2px;
color: #4b5563;
font-size: 1.6rem;
}
.blog-services-list li strong {
color: #111827;
font-weight: 700;
}
@media (max-width: 768px) {
.blog-services-list li {
font-size: 0.95rem;
margin-bottom: 12px;
}
}
.blog-insight {
padding: 24px 30px;
margin: 2rem 0;
border-radius: 12px;
display: flex;
align-items: flex-start;
gap: 16px;
}
.blog-insight .insight-icon {
color: #f59e0b;
font-size: 1.5rem;
line-height: 1;
}
.insight-content-wrap {
flex: 1;
}
.insight-title {
color: #b45309;
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 8px;
display: block;
}
.blog-insight .blog-content-text {
color: #4b5563;
font-size: 1.1rem;
line-height: 1.6;
margin: 0;
text-align: left !important;
}
.inline-code-comment {
background: rgba(72, 209, 204, 0.2);
color: #0ea5e9;
padding: 3px 10px;
border-radius: 6px;
font-family: 'SFMono-Regular', Consolas, monospace;
font-size: 0.9em;
font-weight: 500;
}
@media (max-width: 768px) {
.blog-insight {
padding: 20px;
gap: 12px;
}
.blog-insight .insight-icon {
font-size: 1.3rem;
}
.blog-insight .blog-content-text {
font-size: 1rem;
}
}
.blog-roi-list {
list-style-type: disc;
padding-left: 20px;
margin-top: 15px;
margin-bottom: 30px;
}
.blog-roi-list li {
color: #000;
line-height: 1.8;
margin-bottom: 1rem;
}
.blog-roi-list li strong {
color: #000;
font-weight: 600;
font-size:18px
}
.solution-pill {
display: inline-block;
padding: 8px 12px;
border-radius: 50px;
font-size: 10px;
font-weight: 700;
margin-top: 1rem;
align-self: flex-start;
line-height: 1.4;
}
.solution-pill-warning {
background-color: #fffbeb; 
color: #d97706; 
border: 1px solid #fde68a; 
}
.solution-pill-success {
background-color: #f0fdf4; 
color: #16a34a; 
border: 1px solid #bbf7d0; 
} .message-type-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 25px;
margin-bottom: 50px;
}
.message-type-card {
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 16px;
padding: 20px 25px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
}
.message-type-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
border-color: #3b82f6;
}
.message-type-icon {
width: 70px;
height: 70px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #3b82f6;
margin-bottom: 24px;
transition: all 0.3s ease;
}
.message-type-card:hover .message-type-icon {
transform: scale(1.1);
}
.message-type-title {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
}
.message-type-text {
font-size: 0.95rem;
color: #64748b;
line-height: 1.6;
margin: 0;
}
@media (max-width: 991px) {
.message-type-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 640px) {
.message-type-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.message-type-card {
padding: 30px 20px;
}
} .detail-yellow-insight {
background-color: #fffbeb; 
padding: 24px 30px;       
margin: 2rem 0;
border: 1px solid #d97706; 
border-left: 4px solid #d97706; 
border-radius: 8px;        
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); 
display: flex;
align-items: flex-start;
}
.detail-yellow-insight .blog-content-text {
color: #d97706;          
font-size: 1.15rem;
line-height: 1.6;
margin: 0;
font-weight: 400;          
}
.detail-yellow-insight b {
color: black;            
font-weight: 700;
}
.detail-yellow-insight .insight-icon {
margin-right: 12px;
font-size: 1.2rem;
}
@media (max-width: 768px) {
.detail-yellow-insight {
padding: 24px;
margin: 2.5rem 0;
}
.detail-yellow-insight .blog-content-text {
font-size: 1rem;
}
} .ai-powered-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-top: 40px;
}
.ai-powered-grid-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin-top: 40px;
}
.ai-powered-card {
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.35);
border-radius: 20px;
padding: 24px;
transition: all 0.3s ease;
height: 98%;
display: flex;
flex-direction: column;
}
.ai-powered-card:hover {
background: rgba(59, 130, 246, 0.15);
}
.ai-card-tech {
font-size: 12px;
font-weight: 700;
color: #60a5fa;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 10px;
}
.ai-card-title {
font-size: 19px;
font-weight: 700;
color: #ffffff;
margin-bottom: 10px;
}
.ai-card-desc {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
margin: 0;
}
@media (max-width: 1199px) {
.ai-powered-grid {
gap: 15px;
}
.ai-powered-grid-two {
gap: 15px;
}
.ai-powered-card {
padding: 20px;
}
}
@media (max-width: 1024px) {
.ai-powered-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.ai-powered-grid {
grid-template-columns: 1fr;
}
.ai-powered-grid-two {
grid-template-columns: 1fr;
}
} .glance-comparison-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 40px 0;
}
.glance-card {
background: #fcfcfb;
border: 2px solid #eef2f6;
border-radius: 20px;
padding: 30px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.glance-tag {
display: inline-block;
padding: 6px 16px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 25px;
align-self: flex-start;
}
.glance-tag-wa {
background-color: #faeed7;
color: #f97316;
}
.glance-tag-primocys {
background-color: #e1f5ee;
color: #10b981;
}
.glance-list {
list-style: none;
padding: 0;
margin: 0;
}
.glance-item {
padding: 15px 0;
border-top: 1px solid #eef2f6;
display: flex;
align-items: flex-start;
gap: 12px;
position: relative;
font-size: 16px;
line-height: 1.5;
}
.glance-icon {
font-size: 18px;
line-height: 1;
margin-top: 2px;
flex-shrink: 0;
color:#0056D4;
}
.glance-item:first-child {
border-top: none;
}
.glance-label {
font-size:17px;
color: #1e293b;
margin-right: 6px;
white-space: nowrap;
}
.glance-value {
color: #64748b;
font-size:15px
}
@media (max-width: 991px) {
.glance-comparison-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.glance-card {
padding: 25px;
}
}
@media (max-width: 480px) {
.glance-item {
flex-direction: column;
gap: 4px;
}
.glance-label {
margin-right: 0;
}
} .roadmap-wrapper {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.roadmap-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.roadmap-card {
border-radius: 16px;
padding: 32px;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid transparent;
}
.roadmap-card:hover {
transform: translateY(-5px);
}
.roadmap-green {
background-color: #f0fdf4;
border-color: #bbf7d0;
}
.roadmap-orange {
background-color: #fff9ec;
border-color: #ffedd5;
}
.roadmap-blue {
background-color: #eff4ff;
border-color:#406dec
}
.roadmap-purple{
background-color: #f5f3ff;
border-color: #9e69f0;
}
.roadmap-card-title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.roadmap-green .roadmap-card-title {
color: #2db16e;
}
.text-green {
color: #22c55e;
}
.roadmap-orange .roadmap-card-title {
color: #db7e13;
}
.text-orange {
color: #f97316;
}
.roadmap-blue .roadmap-card-title {
color: #406dec;
}
.roadmap-purple .roadmap-card-title {
color: #9e69f0;
}
.text-blue {
color: #406dec;
}
.text-purple {
color: #9e69f0;
}
.roadmap-card-subtitle {
font-size: 0.90rem;
color: #64748b;
margin-bottom: 24px;
}
.roadmap-card-list {
list-style: none;
padding: 0;
margin: 0;
}
.roadmap-card-list li {
display: flex;
align-items: flex-start;
font-size: 0.97rem;
margin-bottom: 16px;
line-height: 1.4;
}
.roadmap-green .roadmap-card-list li i {
color: #22c55e;
font-size: 1.2rem;
}
.roadmap-orange .roadmap-card-list li i {
color: #f97316;
font-size: 1.2rem;
} @media (max-width: 1100px) {
.roadmap-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 576px) {
.roadmap-card {
padding: 24px;
}
.roadmap-card-title {
font-size: 1.25rem;
}
.roadmap-card-list li {
font-size: 0.95rem;
margin-bottom: 12px;
}
} .architecture-outer-wrapper {
background: #fff;
border: 1px solid #f0f4f8;
border-radius: 24px;
padding: 30px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
overflow: hidden;
box-sizing: border-box;
}
.architecture-scroll-container {
overflow-x: auto;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
width: 100%;
} .architecture-scroll-container::-webkit-scrollbar {
height: 8px;
}
.architecture-scroll-container::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
.architecture-scroll-container::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.architecture-scroll-container::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.architecture-diagram {
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
}
@media (max-width: 1280px) {
.architecture-outer-wrapper {
padding: 20px;
}
.architecture-diagram {
min-width: 900px;
}
}
@media (max-width: 1024px) {
.architecture-diagram {
min-width: 800px;
}
}
@media (max-width: 991px) {
.architecture-diagram {
min-width: 700px;
}
}
.arch-header-tag {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
color: #2f448e;
font-size: 0.95rem;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-bottom: 5px;
}
.arch-header-tag i {
color: #f59e0b;
font-size: 1.4rem;
}
.arch-main-box {
background: #ffffff;
border: 1px solid #eaeff5;
border-radius: 28px;
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.arch-layer-box {
width: 100%;
border-radius: 20px;
padding: 20px;
position: relative;
}
.layer-client {
background-color: #fff5f6;
border: 1px solid #ffe4e6;
}
.layer-data {
background-color: #f8fafc;
border: 1px solid #eef2f6;
}
.arch-layer-label {
text-align: center;
font-weight: 800;
font-size: 0.9rem;
color: #be123c;
margin-bottom: 25px;
letter-spacing: 1.5px;
}
.layer-data .arch-layer-label {
color: #334155;
}
.arch-items-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: 100%;
}
.arch-items-row-new {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
width: 100%;
}
.arch-item {
padding: 10px 8px;
border-radius: 10px;
text-align: center;
font-size: 0.85rem;
font-weight: 700;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 55px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.item-title {
font-weight: 800;
margin-bottom: 2px;
line-height: 1.1;
font-size: 0.85rem;
}
.item-desc {
font-size: 0.72rem;
opacity: 0.85;
font-weight: 500;
}
.item-red { background: #fee2e2; color: #b91c1c; }
.item-pink { background: #fce7f3; color: #be185d; }
.item-white { background: #ffffff; color: #334155; border: 1px solid #eef2f6; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.item-dark-blue { 
background: #2f448e; 
color: #fff; 
padding: 10px 25px;
font-size: 0.9rem;
box-shadow: 0 10px 20px rgba(47, 68, 142, 0.2);
min-width: 280px;
}
.item-green { background: #f0fdf4; color: #15803d; border: 1px solid #dcfce7; }
.item-green .item-desc { color: #16a34a; }
.item-sky { background: #f0f9ff; color: #0369a1; border: 1px solid #e0f2fe; }
.item-sky .item-desc { color: #0284c7; }
.item-purple { background: #f5f3ff; color: #6d28d9; border: 1px solid #ede9fe; }
.item-purple .item-desc { color: #7c3aed; }
.item-yellow { background: #fffbeb; color: #b45309; border: 1px solid #fef3c7; }
.item-yellow .item-desc { color: #d97706; }
.arch-connector-arrow {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.arch-connector-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.arch-path {
stroke: #cbd5e1;
stroke-width: 2;
fill: none;
}
.arch-arrowhead {
fill: none;
stroke: #cbd5e1;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.arch-multi-connectors {
width: 100%;
height: 50px;
position: relative;
margin: 10px 0;
}
.arch-multi-connectors.reversed {
margin-top: 10px;
margin-bottom: 20px;
}
.services-row {
margin: 0;
} @media (max-width: 1280px) {
.architecture-outer-wrapper {
padding: 24px;
}
}
@media (max-width: 991px) {
.architecture-outer-wrapper {
padding: 20px;
border-radius: 20px;
}
.arch-main-box {
padding: 40px 20px;
border-radius: 24px;
}
}
@media (max-width: 768px) {
.architecture-outer-wrapper {
padding: 15px;
border-radius: 16px;
}
.arch-main-box {
padding: 30px 15px;
border-radius: 20px;
}
.arch-layer-box {
padding: 20px 15px;
}
.arch-items-row {
gap: 15px;
}
.arch-items-row-new {
gap: 15px;
}
.arch-item {
font-size: 0.85rem;
padding: 15px 10px;
}
.item-desc {
font-size: 0.7rem;
}
}
@media (max-width: 576px) {
.arch-main-box {
padding: 25px 10px;
}
.item-dark-blue {
min-width: 100%;
padding: 15px 20px;
font-size: 0.95rem;
}
.arch-item {
min-height: 60px;
}
} .features-container {
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 40px;
}
.feature-card {
background: #ffffff;
border: 1px solid #eaeff5;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}
.feature-card-header {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 25px;
}
.feature-number {
min-width: 42px;
height: 42px;
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 800;
font-size: 1.2rem;
flex-shrink: 0;
}
.feature-title-group {
flex-grow: 1;
}
.feature-title {
font-size: 1.6rem;
font-weight: 800;
color: #1e293b;
margin: 0 0 5px 0;
line-height: 1.2;
}
.feature-subtitle {
font-size: 0.95rem;
color: #64748b;
margin: 0;
font-weight: 500;
}
.feature-card-content {
color: #334155;
}
.feature-description {
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 20px;
color: #475569;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.feature-list li {
position: relative;
padding-left: 20px;
margin-bottom: 12px;
line-height: 1.5;
font-size: 1rem;
color: #475569;
}
.feature-list li::before {
content: "•";
position: absolute;
left: 0;
color: #64748b;
font-weight: bold;
}
.feature-card-footer {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
padding-top: 20px;
border-top: 1px solid #f1f5f9;
}
.feature-mvp-pill {
background: #f0fdf4;
color: #16a34a;
border: 1px solid #dcfce7;
padding: 6px 14px;
border-radius: 99px;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.feature-phase-pill {
background: #fffbeb;
color: #f97316;
border: 1px solid #f97316;
padding: 6px 14px;
border-radius: 99px;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.feature-tech-info {
font-size: 0.9rem;
color: #64748b;
line-height: 1.4;
}
.feature-tech-info a {
color: #2f448e;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid rgba(47, 68, 142, 0.2);
transition: all 0.2s;
}
.feature-tech-info a:hover {
color: #1e293b;
border-bottom-color: #1e293b;
}
@media (max-width: 1100px) {
.feature-card {
padding: 24px;
}
.feature-card-footer {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
@media (max-width: 768px) {
.feature-card {
padding: 20px;
}
.feature-title {
font-size: 1.3rem;
}
.feature-card-header {
gap: 15px;
}
.feature-number {
min-width: 36px;
height: 36px;
font-size: 1rem;
}
} .algo-section {
width: 100%;
margin-top: 2rem;
}
.algo-container {
background: #fff;
border: 1px solid #e5eefb;
border-radius: 24px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}
.algo-header {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1rem;
font-weight: 700;
color: #475569;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.algo-header i {
color: #3b82f6;
font-size: 1.2rem;
}
.algo-flow-wrapper {
width: 100%;
overflow-x: auto;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
} .algo-flow-wrapper::-webkit-scrollbar {
height: 6px;
}
.algo-flow-wrapper::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
.algo-flow-wrapper::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.algo-flow-inner {
min-width: 900px;
margin: 0 auto;
padding-bottom: 20px;
}
.algo-flow {
display: flex;
align-items: flex-end;
gap: 0;
justify-content: space-between;
padding: 20px;
}
.algo-step-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.algo-step-label {
font-size: 0.85rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
}
.algo-card {
padding: 15px;
border-radius: 16px;
text-align: center;
min-width: 100px;
border: 2px solid transparent;
transition: transform 0.3s ease;
}
.algo-card:hover {
transform: translateY(-5px);
}
.algo-card-title {
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 8px;
}
.algo-card-desc {
font-size: 0.65rem;
margin-bottom: 0;
font-weight: 500;
} .algo-pink {
background-color: #fff1f2;
border-color: #fecdd3;
color: #be123c;
}
.algo-purple {
background-color: #f5f3ff;
border-color: #ddd6fe;
color: #6d28d9;
}
.algo-green {
background-color: #f0fdf4;
border-color: #bbf7d0;
color: #15803d;
}
.algo-yellow {
background-color: #fffbeb;
border-color: #fef3c7;
color: #b45309;
}
.algo-connector {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 50px;
flex-shrink: 0;
}
.algo-connector svg {
width: 30px;
height: 30px;
}
.algo-feedback-container {
position: relative;
margin-top: -10px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.algo-feedback-svg {
width: 100%;
height: 80px;
}
.algo-feedback-text {
font-size: 0.9rem;
font-weight: 600;
color: #f472b6;
margin-top: 5px;
}
@media (max-width: 1024px) {
.algo-container {
padding: 20px;
}
}
@media (max-width: 768px) {
.algo-header {
font-size: 0.95rem;
margin-bottom: 30px;
}
.algo-card {
min-width: 160px;
padding: 15px;
}
.algo-flow {
padding: 20px 20px 10px;
}
} @media (min-width: 1536px) {
.algo-flow-inner {
min-width: auto;
width: 100%;
}
.algo-card {
min-width: 180px; }
.algo-card-title {
font-size: 1rem;
}
.algo-card-desc {
font-size: 0.8rem;
}
.algo-flow {
padding: 20px 40px;
}
} .launch-checklist-container {
background: #ffffff;
border-radius: 10px;
padding: 15px 15px;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
margin-top: 25px;
position: relative;
overflow: hidden;
}
.launch-checklist-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-blue);
}
.launch-checklist-card {
max-width: 850px;
margin: 0 auto;
}
.checklist-header {
margin-bottom: 20px;
text-align: center;
}
.checklist-title {
font-size: 25px;
font-weight: 800;
color: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
letter-spacing: -0.2px;
margin-bottom: 35px;
}
.check-emoji {
font-size: 1.1em;
}
.checklist-body {
display: flex;
flex-direction: column;
}
.checklist-item {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
transition: transform 0.3s ease;
}
.checklist-item:hover {
transform: translateX(3px);
}
.checklist-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.checklist-item:first-child {
padding-top: 0;
}
.check-box {
width: 20px;
height: 20px;
background: #0057ff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
flex-shrink: 0;
margin-top: 2px;
box-shadow: 0 2px 6px rgba(255, 27, 107, 0.2);
}
.checklist-content .item-title {
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 3px;
line-height: 1.3;
}
.checklist-content .item-desc {
font-size: 14px;
color: #4b5563;
line-height: 1.5;
margin-bottom: 0;
opacity: 0.9;
}
@media (max-width: 991px) {
.launch-checklist-container {
padding: 15px;
}
.launch-checklist-card {
max-width: 100%;
}
}
@media (max-width: 768px) {
.checklist-title {
font-size: 18px;
gap: 8px;
}
.checklist-item {
gap: 12px;
padding: 10px 0;
}
.check-box {
width: 18px;
height: 18px;
font-size: 11px;
}
.checklist-content .item-title {
font-size: 15px;
}
.checklist-content .item-desc {
font-size: 13.5px;
}
}
@media (max-width: 480px) {
.launch-checklist-container {
padding: 15px;
border-radius: 8px;
}
.checklist-header {
margin-bottom: 15px;
}
.checklist-title {
font-size: 16px;
}
.checklist-content .item-title {
font-size: 14px;
}
.checklist-content .item-desc {
font-size: 12.5px;
line-height: 1.4;
}
}
.case-hero {
background-color: #fafbfc;
background-image: 
radial-gradient(circle clamp(350px, 45vw, 800px) at 0% 100%, rgba(2, 59, 226, 0.26) 0%, transparent 100%),
radial-gradient(circle clamp(350px, 45vw, 800px) at 100% 0%, rgba(2, 59, 226, 0.26) 0%, transparent 100%);
padding: 40px 0 var(--section-spacing);
position: relative;
overflow: hidden;
}
.case-hero-inner {
max-width: var(--section-width);
margin: 0 auto;
display: flex;
align-items: center;
gap: 48px;
}
.case-hero-content {
flex: 1 1 520px;
}
.case-hero .section-main-title,
.case-hero .section-subtitle {
opacity: 0;
will-change: transform, opacity;
}
.case-hero.animate-in .section-main-title {
animation: swingIn 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
opacity: 1 !important;
}
.case-hero.animate-in .section-subtitle {
animation: swingIn 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
opacity: 1 !important;
}
.case-hero-title {
font-size: 56px;
line-height: 1.1;
color: var(--text-dark);
font-weight: 700;
margin: 0 0 18px;
}
.case-hero-text {
font-size: 18px;
color: #475569;
line-height: 1.7;
margin: 0 0 28px;
max-width: 560px;
}
.case-hero-media {
flex: 1 1 520px;
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
border-radius: 28px;
}
.case-hero-image {
width: 100%;
max-width: 450px;
height: 500px;
border-radius: 22px;
object-fit: contain;
}
.case-hero-features {
display: flex;
flex-direction: column;
gap: 12px;
}
.feature-row-top, .feature-row-bottom {
display: flex;
gap: 10px;
}
.feature-pill {
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%);
border: 1px solid rgba(2, 59, 226, 0.15);
padding: 14px 18px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: #1e293b;
white-space: nowrap;
transition: all 0.3s ease;
}
.feature-pill i {
font-size: 20px;
color: #023be2;
display: flex;
align-items: center;
justify-content: center;
}
.feature-pill:hover {
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.12) 2.06%, rgba(0, 161, 197, 0.12) 99.67%);
border-color: rgba(2, 59, 226, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(2, 59, 226, 0.05);
}
@media (max-width: 1199px) {
.feature-pill {
padding: 8px 14px;
font-size: 13px;
}
}
@media (max-width: 991px) {
.feature-row-top, .feature-row-bottom {
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
.case-hero-features {
gap: 8px;
}
.feature-row-top, .feature-row-bottom {
gap: 8px;
}
.feature-pill {
padding: 6px 12px;
font-size: 12px;
border-radius: 8px;
}
.feature-pill i {
font-size: 16px;
}
}
@media (max-width: 991px) {
.Business-Benefits-card {
padding: 25px;
}
.case-card-title {
font-size: 24px;
}
.case-hero-inner {
flex-direction: column;
text-align: center;
gap: 16px;
}
.case-hero-content {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 auto;
width: 100%;
}
.case-hero-media {
padding: 0;
flex: 1 1 auto;
width: 100%;
}
.case-hero-text {
max-width: 640px;
}
}
@media (max-width: 640px) {
.case-hero-title {
font-size: 40px;
}
.case-hero-text {
font-size: 16px;
}
.case-hero-media {
padding: 0;
border-radius: 20px;
}
.case-hero-image {
border-radius: 16px;
}
} .branding-services-section {
padding: var(--section-spacing) 20px;
}
.branding-services-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.branding-service-card {
padding: 60px 40px;
height: 100%;
transition: transform 0.4s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 1px solid rgba(0,0,0,0.03);
position: relative;
overflow: hidden;
will-change: transform;
transform-style: preserve-3d;
} .branding-icon {
font-size: 56px;
margin-bottom: 40px;
color: var(--text-dark);
line-height: 1;
display: inline-block;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} .branding-service-card:hover .branding-icon {
color: #1d4ed8; transform: scale(1) translateY(-10px);
}
.branding-card-title {
font-size: 30px;
font-weight: 700;
margin-bottom: 24px;
color: var(--text-dark);
line-height: 1.2;
}
.branding-card-text {
font-size: 16px;
color: #4b5563;
line-height: 1.7;
margin-bottom: 0;
}
.card-color-1 { background-color: #f9fafb;}
.card-color-2 { background-color: #f5f8ff;  }
.card-color-3 { background-color: #f0fdf4;}
.card-color-4 { background-color: #fffbeb; }
@media (max-width: 1200px) {
.branding-service-card {
padding: 40px 20px;
}
} .expert-contact-section {
position: relative;
overflow: hidden;
}
.expert-contact-wrapper {
display: flex;
align-items: center;
gap: 24px;
width: 100%;
}
.expert-contact-wrapper::before,
.expert-contact-wrapper::after {
content: '';
height: 1px;
background: rgba(2, 59, 226, 0.15);
flex-grow: 1;
}
.expert-contact-banner {
padding: 12px 35px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
color: black;
font-size: 16px;
white-space: nowrap;
border: 1px solid #aaa
}
.expert-phone {
color: #0056D4;
text-decoration: none;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.expert-text{
color: #000;
font-weight: 500;
}
.expert-phone i {
font-size: 18px;
color:#25D366;
}
.expert-phone span {
position: relative;
display: inline-block;
padding-bottom: 2px;
}
.expert-phone span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2.5px;
background: #023be2; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.expert-phone:hover span::after {
width: 100%;
}
@media (max-width: 768px) {
.expert-contact-banner {
flex-direction: column;
border-radius: 20px;
text-align: center;
padding: 10px;
width: 100%;
white-space: normal;
}
.expert-text {
font-size: 14px;
margin-bottom: 10px;
}
}
.tech-stack-section.animate-in .section-tag,
.branding-services-section.animate-in .section-tag,
.problem-vision-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
} .problem-vision-section {
padding: var(--section-spacing) 20px ;
background-color: #000;
}
.problem-vision-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.problem-card {
background: rgba(239, 68, 68, 0.15);
}
.vision-card {
background: rgba(16, 185, 129, 0.15);
}
.case-card {
border-radius: 24px;
padding: 35px 30px;
height: 100%;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.case-card:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.card-type-tag {
font-size: 14px;
font-weight: 700;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.5px;
}
.tag-problem {
color: #ef4444; }
.tag-vision {
color: #10b981; }
.title-problem {
color: #FF4D8D; }
.title-vision {
color: #14B8A6; }
.problem-card-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 30px;
}
.case-list {
list-style: none;
padding: 0;
margin: 0;
}
.case-list-item {
position: relative;
padding: 14px 0 14px 35px;
font-size: 16px;
line-height: 1.5;
color: #fff;
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.case-list-item:first-child {
border-top: none;
}
.case-list-item::before {
content: '';
position: absolute;
left: 10px;
top: 22px;
width: 8px;
height: 8px;
border-radius: 50%;
}
.problem-list .case-list-item::before {
background-color: #ef4444;
}
.vision-list .case-list-item::before {
background-color: #10b981;
}
@media (max-width: 991px) {
.case-card {
padding: 30px;
}
.problem-card-title {
font-size: 26px;
}
}
@media (max-width: 768px) {
.problem-vision-section {
padding: 60px 0;
}
}
.strategy-visual-media {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.strategy-image-container {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
width: 100%;
}
.strategy-col-1 {
display: flex;
flex-direction: column;
gap: 20px;
}
.strategy-col-2 {
display: flex;
align-items: center;
}
.strategy-img-wrapper {
width: 240px;
height: 240px;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
background: white;
}
.strategy-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.strategy-col-2 .strategy-img-wrapper {
height: 300px;
}
.strategy-col-2 .strategy-img-wrapper img {
object-fit: cover;
padding: 0;
} @keyframes strategyFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-40px); }
}
.float-up {
animation: strategyFloat 3.5s ease-in-out infinite;
}
.float-down {
animation: strategyFloat 3.5s ease-in-out infinite reverse;
}
.float-up-delayed {
animation: strategyFloat 3.5s ease-in-out infinite;
animation-delay: 1s;
}
@media (max-width: 1199px) {
.strategy-visual-media {
min-height: auto;
justify-content: center;
padding: 40px 0;
}
.strategy-img-wrapper {
width: 180px;
height: 180px;
}
.strategy-col-2 .strategy-img-wrapper {
height: 320px;
}
}
@media (max-width: 767px) {
.strategy-visual-media {
gap: 12px;
padding-top: 30px;
padding-bottom: 40px;
}
.strategy-img-wrapper {
width: 140px;
height: 140px;
border-radius: 16px;
}
.strategy-col-2 .strategy-img-wrapper {
height: 240px;
}
}
.about-strategy-card.active.case-study{
background:#f7f7f7;
box-shadow: none;
border-color: transparent;
} .tech-innovation-section {
background-color: #F9FAFB;
padding: var(--section-spacing) 20px;
}
.tech-innovation-section .container {
max-width: var(--section-width);
}
@media (max-width: 767px) {
.tech-innovation-section {
padding: var(--section-spacing-mobile) 16px;
}
}
.sectiongrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.card-pill {
display: inline-block;
padding: 6px 18px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.25) 2.06%, rgba(0, 161, 197, 0.25) 99.67%);
color: #000;
border: 1px solid rgba(2, 59, 226, 0.2);
transition: all 0.3s ease;
}
@media (max-width: 991px) {
.sectiongrid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.sectiongrid {
grid-template-columns: 1fr;
}
}
@media (max-width: 991px) {
.branding-service-card {
padding: 40px 30px;
}
.branding-icon {
font-size: 48px;
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.branding-services-section {
padding: var(--section-spacing-mobile) 0;
}
.branding-card-title {
font-size: 24px;
} .tech-innovation-section {
padding: 50px 15px !important;
}
.tech-innovation-section .heading-grid {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
margin-bottom: 30px !important;
}
.tech-innovation-section .section-tag,
.tech-innovation-section .section-main-title,
.tech-innovation-section .section-subtitle {
opacity: 0;
}
.tech-innovation-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards !important;
animation-delay: 0s !important;
}
.tech-innovation-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards !important;
animation-delay: 0.1s !important;
}
.tech-innovation-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards !important;
animation-delay: 0.2s !important;
}
.innovation-features-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.innovation-box-card {
padding: 30px 20px !important;
}
}
.innovation-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.innovation-box-card {
padding: 40px 30px;
height: 100%;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
border-radius: 24px;
border: 1px solid rgba(0, 0, 0, 0.06);
background-color: #fff;
}
.innovation-box-card:hover {
transform: translateY(-5px);
border-color: #2563eb;;
box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}
.innovation-box-icon {
font-size: 36px;
color: #023be2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 50%;
transition: all 0.4s ease;
margin-bottom: 20px;
}
.innovation-box-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 14px;
color: #1a1a1a;
}
.innovation-box-text {
font-size: 15px;
line-height: 1.6;
color: #555;
margin-bottom: 24px;
flex-grow: 1;
}
.innovation-box-pill {
display: inline-block;
padding: 6px 18px;
border-radius: 50px;
font-size: 13px;
font-weight: 400;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.15) 2.06%, rgba(0, 161, 197, 0.15) 99.67%);
color: #000;
border: 1px solid rgba(2, 59, 226, 0.2);
transition: all 0.3s ease;
} @media (max-width: 1199px) {
.innovation-features-grid {
gap: 20px;
}
.innovation-box-card {
padding: 30px 25px;
}
}
@media (max-width: 991px) {
.innovation-features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.innovation-features-grid {
grid-template-columns: 1fr;
}
.innovation-box-card {
padding: 30px;
}
}
.process-section {
padding: var(--section-spacing) 0;
background-color: #f9fafb;
overflow: visible;
}
.container-process {
max-width: var(--section-width);
margin: 0 auto;
padding: 0 20px;
}
.process-wrapper {
display: flex;
align-items: flex-start;
gap: 80px;
position: relative;
}
.process-left {
flex: 0 0 450px;
position: sticky;
top: 150px;
height: 550px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: flex-start;
z-index: 10;
}
.process-image-reveal-wrapper {
position: relative;
width: 100%;
height: 550px;
border-radius: 40px;
overflow: hidden;
}
.process-image-mask {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 40px;
}
.process-img-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
pointer-events: none;
}
.process-img-item.active {
opacity: 1;
transform: scale(1);
z-index: 5;
}
.process-numerical-indicator {
margin-top: 35px;
font-size: 26px;
font-weight: 800;
color: #023be2;
font-family: 'Poppins', sans-serif;
background: white;
padding: 8px 30px;
border-radius: 100px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.process-right {
flex: 1;
display: flex;
flex-direction: column;
}
.process-step-card {
position: sticky;
top: 150px;
background: #f9fafb;
min-height: 480px;
padding: 60px 40px;
border-bottom: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 0.4s ease;
z-index: 1;
} .process-step-card:last-child {
position: relative; top: 0;
min-height: 50vh; margin-bottom: 0;
padding-bottom: 100px; z-index: 5;
}
.process-step-icon {
width: 60px;
height: 60px;
margin-bottom: 30px;
}
.process-step-icon i {
font-size: 50px;
color: #1a1a1a;
}
.process-step-title {
font-size: 35px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 25px;
line-height: 1.2;
}
.process-step-desc {
font-size: 18px;
color: #666;
line-height: 1.6;
margin-bottom: 35px;
max-width: 580px;
}
.process-step-list {
list-style: none;
padding: 0;
margin: 0;
}
.process-step-list li {
font-size: 18px;
color: #333;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.process-step-list li::before {
content: '+';
color: #0056D4;
font-weight: 700;
font-size: 20px;
} @media (max-width: 1200px) {
.process-wrapper {
gap: 40px;
}
.process-left {
flex: 0 0 300px;
}
.process-progress-circle {
width: 260px;
height: 260px;
}
.process-step-title {
font-size: 40px;
}
}
@media (max-width: 991px) {
.process-wrapper {
flex-direction: column;
align-items: center;
gap: 30px;
}
.process-left {
display: none !important;
}
.process-right {
width: 100%;
}
.process-step-card {
min-height: auto;
padding: 60px 0;
border-left:none;
align-items: center;
text-align: center;
}
.process-step-desc {
margin-left: auto;
margin-right: auto;
}
.process-step-list {
display: inline-block;
text-align: left;
}
}
@media (max-width: 576px) {
.process-step-title {
font-size: 30px;
}
.process-progress-circle {
width: 150px;
height: 150px;
}
.process-circle-text .step-label {
font-size: 14px;
}
.process-circle-text .step-number {
font-size: 22px;
}
}
@media (max-width: 991px) {
.process-step-card {
position: static;
margin-bottom: 30px;
min-height: auto;
padding: 40px 20px;
}
}
.typography-color-section {
padding: var(--section-spacing) 0;
background-color: #000;
}
.typography-color-section .container-custom-width {
max-width: var(--section-width);
}
.style-guide-wrapper {
background: #000000;
border-radius: 30px;
padding: 20px;
color: #ffffff;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.huge-aa {
font-size: 180px;
font-weight: 700;
line-height: 1;
font-family: 'Roboto', sans-serif;
}
.font-name {
font-size: 32px;
font-weight: 700;
letter-spacing: 4px;
margin-top: 10px;
font-family: 'Roboto', sans-serif;
}
.alphabet-showcase {
font-family: 'Roboto', sans-serif;
}
.alpha-row {
font-size: 24px;
letter-spacing: 2px;
margin-bottom: 10px;
word-break: break-all;
}
.alpha-row.numbers {
font-size: 28px;
margin-top: 15px;
}
.font-weights {
display: flex;
gap: 30px;
}
.weight-item {
font-size: 20px;
font-family: 'Roboto', sans-serif;
}
.weight-regular { font-weight: 400; }
.weight-medium { font-weight: 500; }
.weight-bold { font-weight: 700; }
.colors-grid {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
flex-wrap: wrap;
margin-top: 40px;
}
.color-capsule-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
flex: 1;
min-width: 100px;
}
.color-capsule {
width: 100%;
height: 180px;
border-radius: 100px;
transition: transform 0.3s ease;
border:1px solid #fff;
}
.color-capsule:hover {
transform: translateY(-10px);
}
.color-capsule.border {
border: 1px solid rgba(255,255,255,0.2) !important;
}
.hex-code {
font-size: 14px;
font-weight: 600;
font-family: 'Roboto', sans-serif;
opacity: 0.8;
}
@media (max-width: 1200px) {
.style-guide-wrapper {
padding: 40px;
}
.huge-aa {
font-size: 140px;
}
}
@media (max-width: 991px) {
.huge-aa {
font-size: 120px;
}
.colors-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.color-capsule {
height: 140px;
}
}
@media (max-width: 768px) {
.typography-color-section {
padding: var(--section-spacing-mobile) 0;
}
.style-guide-wrapper {
padding: 30px;
}
.huge-aa {
font-size: 100px;
}
.font-name {
font-size: 24px;
}
.alpha-row {
font-size: 18px;
}
.colors-grid {
grid-template-columns: repeat(3, 1fr);
}
.font-weights {
gap: 20px;
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
.huge-aa {
font-size: 80px;
}
.colors-grid {
grid-template-columns: repeat(2, 1fr);
}
.color-capsule {
height: 120px;
}
} .case-tech-stack-section {
padding: var(--section-spacing) 0;
background-color: #F8F9FA;
}
.case-tech-stack-section .container-custom-width {
max-width: var(--section-width);
}
.tech-stack-pills-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
align-items: center;
margin-top: 20px;
}
.tech-stack-pill-item {
background: #fff;
border-radius: 20px;
padding: 10px 30px 10px 10px;
display: flex;
align-items: center;
gap: 15px;
border: 1px solid #E9ECEF;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tech-stack-pill-item:hover {
background: #FFFFFF;
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(2, 59, 226, 0.1);
border-color: #023be2;
}
.tech-pill-icon {
width: 60px;
height: 60px;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.04) 2.06%, rgba(0, 161, 197, 0.04) 99.67%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.tech-pill-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.tech-pill-text {
font-size: 1.25rem;
font-weight: 500;
color: #111827;
margin: 0;
}
@media (max-width: 1024px) {
.tech-stack-pills-row {
gap: 15px;
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.case-tech-stack-section {
padding: var(--section-spacing-mobile) 0;
}
.tech-stack-pills-row {
gap: 15px;
grid-template-columns: repeat(2, 1fr);
}
.tech-stack-pill-item {
padding: 8px 20px 8px 8px;
min-width: calc(50% - 15px);
flex: 1;
}
.tech-pill-icon {
width: 50px;
height: 50px;
padding: 8px;
}
.tech-pill-text {
font-size: 1.1rem;
}
}
@media (max-width: 580px) {
.tech-stack-pills-row {
gap: 15px;
grid-template-columns: repeat(1, 1fr);
}
} .phone-gallery {
background: #fff;
padding: var(--section-spacing) 0;
overflow: hidden;
}
.phone-gallery .container-custom-width {
max-width: var(--section-width);
} .gallery-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--card-gap);
width: 100%;
height: var(--visible-window);
} .gallery-column {
position: relative;
overflow: hidden;
} .column-track {
display: flex;
flex-direction: column;
gap: var(--card-gap);
will-change: transform;
} .gallery-item {
height: var(--card-height);
border-radius: 30px; 
display: flex;
flex-direction: column;
justify-content: space-between; 
position: relative;
box-sizing: border-box;
align-items: center; justify-content: center; 
} .gallery-item img {
width: 100%;
height: 100%;
object-fit: contain; display: block;
} .gallery-item span {
font-size: 84px;
font-weight: 600;
line-height: 1; } .gallery-item p {
font-size: 23px;
font-weight: 550;
line-height: 1.6; 
margin: 0;
opacity: 0.95; letter-spacing: 0.5px; 
} .col-up .column-track {
animation: smoothUp var(--cycle) linear infinite;
}
.col-down .column-track {
animation: smoothDown var(--cycle) linear infinite;
} @keyframes smoothUp {
0%, 20% { transform: translateY(0); }
35%, 55% { transform: translateY(calc(-1 * (var(--card-height) + var(--card-gap)))); }
70%, 90% { transform: translateY(calc(-2 * (var(--card-height) + var(--card-gap)))); }
100% { transform: translateY(calc(-3 * (var(--card-height) + var(--card-gap)))); }
} @keyframes smoothDown {
0%, 20% { transform: translateY(calc(-3 * (var(--card-height) + var(--card-gap)))); }
35%, 55% { transform: translateY(calc(-2 * (var(--card-height) + var(--card-gap)))); }
70%, 90% { transform: translateY(calc(-1 * (var(--card-height) + var(--card-gap)))); }
100% { transform: translateY(0); }
} @media (max-width: 1024px) {
:root { --card-height: 400px; }
.gallery-item p { font-size: 20px; } }
@media (max-width: 768px) {
:root {
--card-height: 420px;
--card-gap: 15px;
}
.gallery-wrapper {
height: 75vh;
}
.gallery-item {
padding: 25px 20px;
border-radius: 25px;
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.05);
}
.gallery-item span { font-size: 50px; } .gallery-item p { 
font-size: 16px; 
line-height: 1.4; 
}
}
@media (max-width: 580px) {
.phone-gallery {
padding: 30px 0 !important;
overflow: hidden !important;
}
.gallery-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: max-content !important;
animation: horizontalGalleryScroll 200s linear infinite !important;
gap: 20px !important;
padding: 20px 0 60px !important;
height: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
grid-template-columns: none !important;
}
.gallery-wrapper::-webkit-scrollbar {
display: none !important;
}
.gallery-column {
display: contents !important;
}
.column-track {
display: flex !important; flex-direction: row !important;
display: contents !important;
animation: none !important;
}
.gallery-item {
flex: 0 0 280px !important;
height: 520px !important;
scroll-snap-align: none !important;
border-radius: 40px !important;
overflow: hidden !important;
padding: 0 !important;
background: transparent !important;
margin: 0 !important;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: contain !important;
}
}
@keyframes horizontalGalleryScroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-50%)); }
} .insights-section {
padding: var(--section-spacing, 80px) 20px;
background-color: #fff;
}
.insights-section .container {
max-width: var(--section-width);
margin: 0 auto;
padding: 0;
}
.insight-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.insight-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 24px;
padding: 40px;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
height: 100%;
}
.insight-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
border-color: var(--brand-blue);
}
.insight-number {
font-size: 32px;
font-weight: 800;
color: #023be2;
margin-bottom: 25px;
line-height: 1;
}
.insight-title {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 18px;
color: var(--text-dark);
}
.insight-text {
font-size: 15px;
color: var(--text-gray);
line-height: 1.6;
margin: 0;
}
@media (max-width: 1199px) {
.insight-card {
padding: 30px;
}
}
@media (max-width: 991px) {
.insight-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 767px) {
.insights-section {
padding: var(--section-spacing-mobile, 40px) 20px;
}
.insight-grid {
grid-template-columns: 1fr;
}
} .tech-architecture-section {
padding: var(--section-spacing) 20px ;
background-color: #ffffff;
overflow: hidden;
}
.tech-architecture-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.tech-architecture-section .heading-grid {
margin-bottom: 50px;
}
.tech-table-wrapper {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(2, 59, 226, 0.1);
margin-top: 30px;
}
.tech-table-responsive {
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: #023be2 #f1f1f1;
-webkit-overflow-scrolling: touch;
} .tech-table-responsive::-webkit-scrollbar {
height: 6px;
}
.tech-table-responsive::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.tech-table-responsive::-webkit-scrollbar-thumb {
background: #023be2;
border-radius: 10px;
}
.arch-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 800px;
}
.arch-table th {
background-color: #0f172a;
color: #ffffff;
padding: 20px 25px;
text-align: left;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
}
.arch-table th:first-child {
border-top-left-radius: 12px;
}
.arch-table th:last-child {
border-top-right-radius: 12px;
}
.arch-table td {
padding: 20px 25px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
font-size: 16px;
transition: background 0.3s ease;
}
.arch-table tr:last-child td {
border-bottom: none;
}
.arch-table tr:hover td {
background-color: rgba(2, 59, 226, 0.02);
}
.layer-name {
font-weight: 700;
color: #1a1a1a;
width: 25%;
}
.tech-stack {
color: #023be2;
font-weight: 500;
width: 35%;
}
.usage-reason {
color: #000;
line-height: 1.5;
width: 40%;
font-weight:500
} .tech-architecture-section .section-tag,
.tech-architecture-section .section-main-title,
.tech-architecture-section .section-subtitle {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.tech-architecture-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.tech-architecture-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.tech-architecture-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
@media (max-width: 991px) {
.arch-table {
min-width: 700px;
}
}
@media (max-width: 767px) {
.tech-architecture-section {
padding: var(--section-spacing-mobile) 16px;
}
.tech-table-wrapper {
padding: 15px;
border-radius: 15px;
margin-top: 20px;
}
.arch-table th, .arch-table td {
padding: 15px;
font-size: 14px;
}
.arch-table {
min-width: 500px;
}
} .tech-guide-cta-section {
padding: var(--section-spacing) 20px ;
background-color: #ffffff;
}
.tech-guide-cta-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.tech-guide-card {
background: #f0f7ff;
border-radius: 24px;
padding: 40px;
display: flex;
gap: 30px;
align-items: flex-start;
border: 1px solid rgba(2, 59, 226, 0.1);
box-shadow: 0 10px 30px rgba(2, 59, 226, 0.05);
}
.tech-guide-icon-box {
flex-shrink: 0;
width: 64px;
height: 64px;
background: #ffffff;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.tech-guide-icon {
font-size: 32px;
color: #023be2;
}
.tech-guide-content {
flex-grow: 1;
}
.tech-guide-title {
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 700;
color: #0f172a;
margin-bottom: 12px;
}
.tech-guide-text {
font-size: clamp(16px, 1.2vw, 18px);
color: #4b5563;
line-height: 1.6;
margin-bottom: 26px;
max-width: 900px;
}
.tech-guide-btn {
padding: 12px 28px;
font-size: 16px;
font-weight: 600;
}
@media (max-width: 991px) {
.tech-guide-card {
padding: 30px;
gap: 20px;
}
}
@media (max-width: 767px) {
.tech-guide-cta-section {
padding: var(--section-spacing-mobile) 16px;
}
.tech-guide-card {
flex-direction: column;
padding: 24px;
}
.tech-guide-icon-box {
width: 56px;
height: 56px;
}
.tech-guide-icon {
font-size: 28px;
}
.tech-guide-btn {
width: 100%;
justify-content: center;
}
}
.app-store-cta-section {
padding:  0;
background-color: #ffffff;
}
.app-store-cta-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.app-store-cta-section .blog-app-store-cta {
margin: 0;
border-radius: 0;
padding: 80px 0;
box-shadow: none;
text-align: center;
}
.app-store-cta-section .blog-app-store-cta .container {
display: flex;
flex-direction: column;
align-items: center;
}
.app-store-cta-section .blog-app-store-cta-top {
justify-content: center;
}
.app-store-cta-section .blog-app-store-buttons {
justify-content: center;
}
.app-store-cta-section .blog-app-store-description {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 991px) {
.app-store-cta-section .blog-app-store-cta {
padding: 60px 0;
}
}
@media (max-width: 767px) {
.app-store-cta-section {
padding:  0;
}
.app-store-cta-section .blog-app-store-cta {
padding: 40px 0;
border-radius: 0;
}
}
.infra-savings-section {
padding: var(--section-spacing) 20px;
background-color: #f9fafb;
}
.infra-savings-section .container {
max-width: var(--section-width);
margin: 0 auto;
}
.infra-savings-section .section-tag,
.infra-savings-section .section-main-title {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.infra-savings-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.infra-savings-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.infra-comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 40px;
}
.infra-card {
background: #ffffff;
border-radius: 24px;
border: 1px solid #e5e7eb;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.infra-card-header {
padding: 24px 30px;
color: #ffffff;
display: flex;
align-items: center;
gap: 16px;
}
.infra-card-header.messaging {
background: #202b3c;
}
.infra-card-header.video {
background: #4135bf;
}
.infra-header-icon {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.infra-header-text h3 {
margin: 0;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
}
.infra-header-text p {
margin: 2px 0 0;
font-size: 12px;
font-weight: 600;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.infra-card-body {
padding: 24px 30px 30px;
flex-grow: 1;
}
.infra-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: -24px; margin-left: -30px; 
margin-right: -30px;
margin-bottom: 24px;
}
.infra-stat-col {
padding: 20px 30px;
}
.infra-stat-col:first-child {
border-right: 1px solid #f3f4f6;
background: #fef2f2;
}
.infra-stat-col:last-child {
background: #f0fdf4;
}
.infra-label-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 12px;
padding: 4px 0;
}
.label-typical { color: #dc2626; }
.label-approach { color: #16a34a; }
.infra-stat-col h4 {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #111827;
}
.infra-sub {
margin: 0;
font-size: 13px;
color: #9ca3af;
}
.infra-card-desc {
margin: 20px 0 0;
font-size: 15px;
line-height: 1.6;
color: #4b5563;
}
.infra-card-desc strong {
color: #111827;
}
.savings-highlight-card {
margin-top: 40px;
background: #fffcf0;
border: 1px solid #fdd445;
border-radius: 24px;
padding: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.savings-left {
display: flex;
align-items: flex-start;
gap: 20px;
}
.savings-bulb {
font-size: 32px;
flex-shrink: 0;
}
.savings-text h3 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
color: #111827;
}
.savings-text p {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: #4b5563;
}
.red-span {
background: #fee2e2;
color: #991b1b;
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
.green-span {
background: #dcfce7;
color: #166534;
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
.savings-badge {
background: #ffffff;
border: 1px solid #f3f4f6;
border-radius: 20px;
padding: 20px 30px;
text-align: center;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
flex-shrink: 0;
}
.savings-badge .percent {
display: block;
font-size: 44px;
font-weight: 800;
color: #2563eb;
line-height: 1;
}
.savings-badge .badge-text {
display: block;
font-size: 14px;
font-weight: 700;
color: #1e40af;
margin-top: 4px;
letter-spacing: 0.05em;
}
@media (max-width: 1024px) {
.infra-comparison-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.infra-savings-section {
padding: var(--section-spacing-mobile) 16px;
}
.infra-card-header {
padding: 20px;
}
.infra-card-body {
padding: 20px;
}
.infra-stats-grid {
grid-template-columns: 1fr;
gap: 0; margin-top: -20px;
margin-left: -20px;
margin-right: -20px;
}
.infra-stat-col {
padding: 24px 20px;
border-right: none !important;
border-bottom: 1px solid #f3f4f6; border-radius: 0; }
.savings-highlight-card {
flex-direction: column;
padding: 24px;
text-align: center;
}
.savings-left {
flex-direction: column;
align-items: center;
}
.savings-badge {
width: 100%;
}
}
.caseStudy-case-study-section {
padding: 60px 20px 80px;
background-color: #f9f9f9;
}
.caseStudy-case-study-section .container {
max-width: var(--section-width);
}
.caseStudy-case-study-section .section-tag,
.caseStudy-case-study-section .section-main-title,
.caseStudy-case-study-section .section-subtitle {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.caseStudy-case-study-section.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.caseStudy-case-study-section.animate-in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.caseStudy-case-study-section.animate-in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.15s;
}
.caseStudy-case-card {
display: flex;
background: #ffffff;
border-radius: 30px;
overflow: hidden;
min-height: 400px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}
.caseStudy-case-content {
flex: 1;
padding: 60px 0px 60px 60px;
display: flex;
flex-direction: column;
justify-content: center;
}
.caseStudy-labels {
font-size: 14px;
color: #6c757d;
font-weight: 500;
margin-bottom: 24px;
letter-spacing: 0.5px;
}
.caseStudy-case-title {
font-size: 32px;
font-weight: 500;
line-height: 1.3;
color: #1a1a1a;
margin-bottom: 45px;
max-width: 95%;
}
.caseStudy-stats-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-bottom: 50px;
}
.caseStudy-stat-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.caseStudy-stat-item h3 {
font-size: 20px;
font-weight: 700;
margin: 0;
color: #000;
}
.caseStudy-stat-item p {
font-size: 14px;
color: #6c757d;
margin: 0;
line-height: 1.4;
}
.caseStudy-case-visual {
flex: 1;
position: relative;
background-color: #f0f4f8;
}
.caseStudy-case-visual img.main-img {
width: 100%;
height: 100%;
object-fit: cover;
} @media (max-width: 1200px) {
.caseStudy-case-title {
font-size: 30px;
}
.caseStudy-case-content {
padding: 50px;
}
}
@media (max-width: 991px) {
.caseStudy-case-card {
flex-direction: column;
}
.caseStudy-case-visual {
height: 400px;
order: 1;
}
.caseStudy-case-content {
padding: 40px 25px;
order: 2;
}
}
@media (max-width: 768px) {
.caseStudy-case-title {
font-size: 26px;
margin-bottom: 30px;
}
.caseStudy-stats-row {
gap: 25px;
margin-bottom: 40px;
}
.caseStudy-stat-item h3 {
font-size: 18px;
}
.caseStudy-case-visual {
height: 350px;
}
}
@media (max-width: 480px) {
.caseStudy-stats-row {
grid-template-columns: 1fr;
}
.caseStudy-case-title {
font-size: 22px;
}
.caseStudy-case-content {
padding: 30px 20px;
}
.caseStudy-stat-item {
width: 100%;
}
.caseStudy-case-visual {
height: 280px;
}
} .wcu-grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
}
.wcu-grid-card {
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0,0,0,0.03);
height: 100%;
position: relative;
overflow: hidden;
}
.wcu-grid-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.wcu-grid-icon {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.wcu-grid-card:hover .wcu-grid-icon {
transform: scale(1.1);
} .wcu-card-blue { background: #f0f7ff; }
.wcu-card-blue .wcu-grid-icon { background: #dbeafe; color: #2563eb; }
.wcu-card-purple { background: #f5f3ff; }
.wcu-card-purple .wcu-grid-icon { background: #ede9fe; color: #7c3aed; }
.wcu-card-green { background: #f0fdf4; }
.wcu-card-green .wcu-grid-icon { background: #dcfce7; color: #16a34a; }
.wcu-card-orange { background: #fffaf5; }
.wcu-card-orange .wcu-grid-icon { background: #ffedd5; color: #ea580c; }
.wcu-grid-content h4 {
font-size: 17px;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
line-height: 1.4;
}
.wcu-grid-content p {
font-size: 14px;
color: #4b5563;
margin: 0;
line-height: 1.5;
}
@media (max-width: 991px) {
.wcu-grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.wcu-grid-container {
grid-template-columns: 1fr;
gap: 16px;
}
.wcu-grid-card {
padding: 20px;
}
} @media (max-width: 991px) {
.wcu-content-row {
display: flex !important;
flex-direction: column !important;
} .wcu-left, .wcu-right {
display: contents !important;
}
.wcu-section .section-tag {
order: 1 !important;
}
.wcu-section .wcu-title {
order: 2 !important;
}
.wcu-section .wcu-image-wrapper {
order: 3 !important;
margin-bottom: 30px !important;
}
.wcu-section .wcu-grid-container {
order: 4 !important;
margin-bottom: 20px !important;
}
.wcu-section .wcu-desc {
order: 5 !important;
margin-bottom: 15px !important;
}
.wcu-section .wcu-btn-group {
order: 6 !important;
margin-bottom: 10px !important;
}
} .wcu-btn-group {
display: flex;
gap: 15px;
margin-top: 2rem;
flex-wrap: wrap;
}
.btn-outline-custom {
padding: 12px 28px;
border-radius: 12px;
font-weight: 500;
font-size: 15px;
border: 1.5px solid #023be2;
color: #023be2;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
background: transparent;
}
.btn-outline-custom:hover {
background: #023be2;
color: white;
}
@media (max-width: 576px) {
.btn-gradient, .btn-outline-custom {
width: 100% !important;
justify-content: center !important;
text-align: center;
}
.wcu-btn-group {
flex-direction: column;
gap: 12px;
}
} .wcu-feature-list {
list-style: none;
padding: 0;
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.wcu-feature-item-v2 {
display: flex;
align-items: flex-start;
gap: 15px;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animate-in .wcu-feature-item-v2 {
opacity: 1;
transform: translateY(0);
}
.animate-in .wcu-feature-item-v2:nth-child(1) { transition-delay: 0.1s; }
.animate-in .wcu-feature-item-v2:nth-child(2) { transition-delay: 0.2s; }
.animate-in .wcu-feature-item-v2:nth-child(3) { transition-delay: 0.3s; }
.animate-in .wcu-feature-item-v2:nth-child(4) { transition-delay: 0.4s; }
.wcu-feature-item-v2::before {
content: '';
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
min-width: 22px;
border: 2px solid #023be2;
border-radius: 50%;
flex-shrink: 0;
background-color: #023be2;
background-clip: content-box;
padding: 5px;
margin-top: 3px;
}
.wcu-feature-item-v2 .item-content h4 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 6px 0;
line-height: 1.3;
}
.wcu-feature-item-v2 .item-content p {
font-size: 15px;
color: #64748b;
margin: 0;
line-height: 1.6;
}
.benefits-red {
border-top: 5px solid #fe2c55;
}
.benefits-red .monetization-title {
color: #fe2c55 !important;
font-weight: 800;
font-size: 1.4rem;
}
.benefits-red .monetization-list li::before {
color: #fe2c55;
}
.benefits-cyan {
border-top: 5px solid #23c5c0;
}
.benefits-cyan .monetization-title {
color: #23c5c0 !important;
font-weight: 800;
font-size: 1.4rem;
}
.benefits-cyan .monetization-list li::before {
color: #23c5c0;
}
.chat-solution-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #dbeafe;
color: #1e40af;
padding: 6px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
width: fit-content;
margin-top: 15px;
text-transform: uppercase;
letter-spacing: 0.02em;
} .stepper-modern-boxed .stepper-item {
background: #f9f9fb;
border: 1px solid #e5e7eb;
padding: 30px;
border-radius: 20px;
margin-bottom: 25px;
transition: all 0.3s ease;
}
.stepper-modern-boxed .stepper-item:hover {
border-color: #d1d5db;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}
.stepper-modern-boxed .stepper-right {
padding-bottom: 0 !important;
}
.stepper-modern-boxed .stepper-line {
display: none;
}
.stepper-number-square {
width: 44px;
height: 44px;
background: var(--gradient-blue);
color: #fff;
border-radius: 20%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
z-index: 2;
font-family: 'Poppins', sans-serif;
} .platform-architecture-card {
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
border: 1px solid #dbe3f0;
border-radius: 24px;
padding: 26px 26px 30px;
overflow: hidden;
}
.platform-architecture-eyebrow {
margin: 0 0 24px;
color: #58739a;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.platform-architecture-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.platform-architecture-panel {
position: relative;
border-radius: 18px;
padding: 24px 18px 20px;
min-height: 100%;
}
.platform-architecture-panel--self-hosted {
background: linear-gradient(180deg, rgba(102, 218, 146, 0.12) 0%, rgba(235, 252, 242, 0.95) 100%);
border: 2px solid rgba(102, 218, 146, 0.65);
}
.platform-architecture-panel--managed {
background: linear-gradient(180deg, rgba(255, 131, 131, 0.1) 0%, rgba(255, 242, 242, 0.96) 100%);
border: 2px solid rgba(255, 144, 144, 0.7);
}
.platform-architecture-panel-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.platform-architecture-panel--self-hosted .platform-architecture-panel-head h3 {
color: #196a3e;
}
.platform-architecture-panel--managed .platform-architecture-panel-head h3 {
color: #b52b22;
}
.platform-architecture-panel-head h3 {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
text-transform: uppercase;
}
.platform-architecture-users {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: start;
gap: 14px;
}
.platform-architecture-panel--managed .platform-architecture-users {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.platform-user-box,
.platform-infra-box,
.platform-server-box {
background: #fff;
border-radius: 14px;
text-align: center;
padding: 14px 12px;
position: relative;
z-index: 2;
}
.platform-user-box strong,
.platform-infra-box strong,
.platform-server-box strong {
display: block;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
color:#000
}
.platform-user-box span,
.platform-infra-box span,
.platform-server-box span {
display: block;
font-size: 0.76rem;
line-height: 1.45;
}
.platform-architecture-panel--self-hosted .platform-user-box,
.platform-architecture-panel--self-hosted .platform-infra-box {
border: 2px solid rgba(102, 218, 146, 0.75);
color: #2f5568;
}
.platform-architecture-panel--managed .platform-user-box,
.platform-architecture-panel--managed .platform-infra-box {
border: 2px solid rgba(255, 157, 157, 0.75);
color: #6d6262;
}
.platform-server-box {
background: #953131;
color: #fff;
border: 2px solid #953131;
padding: 18px 16px;
}
.platform-server-box span {
color: rgba(255, 255, 255, 0.88);
}
.platform-architecture-link-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding-top: 8px;
}
.platform-architecture-link-label {
color: #27ae60;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.platform-architecture-link-arrows {
color: #27ae60;
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
line-height: 0.75;
} .platform-architecture-routing {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2px;
flex-direction: column;
margin: 0 0 10px;
color: #6e87a0;
font-size: 0.82rem;
text-align: center;
position: relative;
background: url("data:image/svg+xml,%3Csvg width='280' height='75' viewBox='0 0 280 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L125 65' stroke='%23ACB9CC' stroke-width='2' stroke-dasharray='4 4'/%3E%3Cpath d='M280 0 L155 65' stroke='%23ACB9CC' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E") no-repeat center top;
padding-top: 70px;
z-index: 1;
}
.platform-managed-flow {
display: flex;
justify-content: center;
gap: 2px;
flex-direction: column;
margin: 0 0 10px;
color: #ef3d32;
font-size: 0.84rem;
font-weight: 600;
text-align: center;
position: relative;
background: url("data:image/svg+xml,%3Csvg width='280' height='75' viewBox='0 0 280 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0 L125 65' stroke='%23E23B34' stroke-width='2'/%3E%3Cpath d='M220 0 L155 65' stroke='%23E23B34' stroke-width='2'/%3E%3C/svg%3E") no-repeat center top;
padding-top: 70px;
z-index: 1;
}
.platform-infra-box,
.platform-server-box,
.platform-cost-pill {
margin-top: 14px;
}
.platform-cost-pill {
border-radius: 10px;
padding: 10px 16px;
text-align: center;
font-size: 1rem;
line-height: 1.35;
font-weight: 700;
color: #fff;
background: linear-gradient(90deg, #21a255 0%, #31bf6a 100%);
}
.platform-cost-pill--managed {
background: linear-gradient(90deg, #e23b34 0%, #ff5c4f 100%);
}
.platform-infra-box--bottom span:last-child,
.platform-infra-box--billing span:last-child {
margin-top: 2px;
}
@media (max-width: 991px) {
.platform-architecture-card {
padding: 22px 18px 24px;
border-radius: 20px;
}
.platform-architecture-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.platform-architecture-eyebrow {
font-size: 0.82rem;
line-height: 1.6;
}
.platform-architecture-panel {
padding: 18px 14px 16px;
border-radius: 16px;
}
.platform-architecture-panel-head h3 {
font-size: 1rem;
}
.platform-architecture-users,
.platform-architecture-panel--managed .platform-architecture-users {
grid-template-columns: 1fr;
gap: 12px;
}
.platform-architecture-link-group {
order: 3;
padding-top: 0;
}
.platform-architecture-link-arrows {
flex-direction: row;
gap: 8px;
font-size: 1.25rem;
}
.platform-user-box strong,
.platform-infra-box strong,
.platform-server-box strong {
font-size: 0.98rem;
}
.platform-user-box span,
.platform-infra-box span,
.platform-server-box span,
.platform-cost-pill {
font-size: 0.88rem;
}
.platform-architecture-routing,
.platform-managed-flow {
font-size: 0.76rem;
background: none;
padding-top: 0;
}
} .calculator {
background: #ffffff;
border: 1px solid #fff1f3;
border-radius: 20px;
padding: 40px;
max-width: 1100px;
margin: 40px auto;
position: relative;
} .calculator::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 7px;
width: 100%;
background: linear-gradient(90deg, #023be2, #10b981, #00a1c5);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.calc-title {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.calc-sub {
font-size: 16px;
color: #64748b;
margin-bottom: 35px;
}
.calc-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 25px;
}
.calc-label {
display: block;
font-size: 15px;
font-weight: 600;
color: #1e293b;
margin-bottom: 10px;
}
.calc-input {
width: 100%;
padding: 14px 18px;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
color: #1e293b;
background: #f8fafc;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
}
.calc-input:focus {
border-color: #023be2;
background: #fff;
box-shadow: 0 0 0 4px rgba(2, 59, 226, 0.1);
}
.calc-btn {
width: 100%;
background: #0095ff;
color: #fff;
border: none;
padding: 10px;
border-radius: 14px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.calc-results {
margin-top: 50px;
display: none; }
.results-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 25px;
}
.result-box {
padding: 24px 15px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform 0.2s ease;
min-height: 150px;
}
.agora-box {
background: #fff5f5;
border: 1.5px solid #fed7d7;
color: #c53030;
}
.peerjs-box {
background: #f0fff4;
border: 1.5px solid #c6f6d5;
color: #2f855a;
}
.saving-box {
background: #eff6ff;
border: 1.5px solid #dbeafe;
color: #1d4ed8;
grid-column: span 1; }
.rb-label {
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 12px;
}
.rb-val {
font-size: 36px;
font-weight: 800;
margin-bottom: 8px;
font-family: sans-serif;
line-height: 1;
}
.rb-sub {
font-size: 13px;
opacity: 0.8;
font-weight: 500;
}
.result-note {
font-size: 15px;
line-height: 1.7;
color: #4b5563;
margin-top: 30px;
padding: 20px;
} @media (max-width: 1100px) {
.results-grid {
grid-template-columns: repeat(2, 1fr);
}
.saving-box {
grid-column: span 2;
}
}
@media (max-width: 768px) {
.calculator {
padding: 30px 20px;
}
.calc-row {
grid-template-columns: 1fr;
gap: 20px;
}
.calc-title {
font-size: 24px;
}
.results-grid {
gap: 15px;
}
.rb-val {
font-size: 28px;
}
}
@media (max-width: 480px) {
.results-grid {
grid-template-columns: 1fr;
}
.result-box {
padding: 20px;
}
} .webrtc-demo-card {
padding: 40px 30px;
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 24px;
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.webrtc-demo-icon {
font-size: 32px;
margin-bottom: 20px;
display: block;
}
.webrtc-demo-title {
font-size: 24px;
font-weight: 800;
color: #0f172a;
margin-bottom: 16px;
line-height: 1.2;
}
.webrtc-demo-desc {
font-size: 16px;
line-height: 1.6;
color: #64748b;
margin-bottom: 24px;
}
.webrtc-demo-features {
list-style: none;
padding: 0;
margin: 0 0 10px 0;
}
.webrtc-demo-features li {
position: relative;
padding-left: 20px;
margin-bottom: 4px;
font-size: 16px;
color: #334155;
display: flex;
align-items: center;
}
.webrtc-demo-features li::before {
content: "•";
position: absolute;
left: 0;
color: #1e293b;
font-size: 20px;
}
.webrtc-demo-btn {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border-radius: 50px;
font-weight: 700;
font-size: 16px;
text-decoration: none !important;
transition: all 0.3s ease;
width: fit-content;
}
.webrtc-demo-btn-blue {
background: #2563eb;
color: #ffffff !important;
}
.webrtc-demo-btn-green {
background: #10b981;
color: #ffffff !important;
}
.webrtc-demo-features li a {
color: #2563eb;
text-decoration: underline;
margin-left: 5px;
}
.webrtc-demo-card-blue {
border-top: 5px solid #2563eb;
}
.webrtc-demo-card-green {
border-top: 5px solid #10b981;
}
.blog-sfu-compare-section {
margin: 28px 0 36px;
}
.blog-sfu-compare-shell {
background: #ffffff;
border: 1px solid #d7e2f1;
border-radius: 22px;
padding: 28px 32px;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}
.blog-sfu-compare-kicker {
margin: 0 0 26px;
display: flex;
align-items: flex-start;
gap: 10px;
color: #5c78a9;
font-size: 24px;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.blog-sfu-compare-kicker-icon {
color: #f3b01a;
line-height: 1;
transform: translateY(1px);
}
.blog-sfu-compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.blog-sfu-card {
min-height: 420px;
border-radius: 20px;
padding: 22px 16px 18px;
background: linear-gradient(180deg, rgba(250, 251, 255, 0.96) 0%, rgba(243, 246, 255, 0.98) 100%);
}
.blog-sfu-card-mesh {
border: 2px solid #8fb8ff;
}
.blog-sfu-card-sfu {
border: 2px solid #ccb7ff;
background: linear-gradient(180deg, rgba(253, 250, 255, 0.96) 0%, rgba(248, 243, 255, 0.98) 100%);
}
.blog-sfu-card-header {
text-align: center;
}
.blog-sfu-card-title {
margin: 0;
color: #27458f;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase;
}
.blog-sfu-card-sfu .blog-sfu-card-title {
color: #3b218b;
}
.blog-sfu-card-subtitle {
margin: 8px auto 0;
max-width: 360px;
color: #6b7280;
font-size: 14px;
font-weight: 500;
line-height: 1.55;
}
.blog-sfu-diagram {
position: relative;
height: 220px;
margin: 24px 0 18px;
}
.blog-sfu-line {
position: absolute;
display: block;
pointer-events: none;
}
.blog-sfu-diagram-mesh .mesh-line {
background: #8db2ff;
transform-origin: center;
}
.mesh-line-top,
.mesh-line-bottom {
left: 25%;
width: 50%;
height: 2px;
}
.mesh-line-top {
top: 50px;
}
.mesh-line-bottom {
top: 170px;
}
.mesh-line-left,
.mesh-line-right {
top: 50px;
width: 2px;
height: 120px;
}
.mesh-line-left {
left: 25%;
}
.mesh-line-right {
right: 25%;
}
.mesh-line-diag-a,
.mesh-line-diag-b {
top: 110px;
left: 50%;
width: 45%; height: 2px;
}
.mesh-line-diag-a {
transform: translate(-50%, -50%) rotate(22deg);
}
.mesh-line-diag-b {
transform: translate(-50%, -50%) rotate(-22deg);
}
.blog-sfu-node {
position: absolute;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
text-align: center;
}
.mesh-node {
width: 76px;
height: 76px;
background: #c9d9ff;
color: #264282;
font-size: 18px;
font-weight: 700;
}
.mesh-node-a { top: 13px; left: 15%; }
.mesh-node-b { top: 13px; right: 15%; }
.mesh-node-c { bottom: 33px; left: 15%; }
.mesh-node-d { bottom: 33px; right: 15%; }
.blog-sfu-diagram-sfu .sfu-line {
background: #c6a8ff;
height: 2px;
}
.sfu-line-a { top: 53px; left: 15%; width: 25%; transform: rotate(30deg); transform-origin: left center; }
.sfu-line-b { top: 53px; right: 15%; width: 25%; transform: rotate(-30deg); transform-origin: right center; }
.sfu-line-c { left: 12%; bottom: 60px; width: 28%; transform: rotate(-28deg); transform-origin: left center; }
.sfu-line-d { right: 12%; bottom: 60px; width: 28%; transform: rotate(28deg); transform-origin: right center; }
.blog-sfu-diagram-sfu .sfu-line-e { 
left: 50%; 
bottom: 15px; 
width: 2px; 
height: 75px !important; 
transform: translateX(-50%); 
z-index: 1; 
background: #c6a8ff; 
}
.sfu-node {
width: 52px;
height: 52px;
background: #dccbff;
color: #6d35d7;
font-size: 18px;
font-weight: 700;
}
.sfu-node-a { top: 10px; left: 5%; }
.sfu-node-b { top: 10px; right: 5%; }
.sfu-node-c { bottom: 35px; left: 2%; }
.sfu-node-d { bottom: 35px; right: 2%; }
.sfu-node-e { bottom: -10px; left: 50%; transform: translateX(-50%); }
.blog-sfu-hub {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 11;
min-width: 190px;
padding: 12px 16px;
border-radius: 16px;
background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
color: #ffffff;
text-align: center;
box-shadow: 0 14px 28px rgba(124, 58, 237, 0.22);
}
.blog-sfu-hub strong {
display: block;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
}
.blog-sfu-hub span {
display: block;
margin-top: 2px;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
.blog-sfu-card-note {
margin: 0;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
}
.blog-sfu-card-note-mesh { color: #2f9f47; }
.blog-sfu-card-note-sfu { color: #7c3aed; }
@media (max-width: 991.98px) {
.blog-sfu-compare-shell { padding: 24px; }
.blog-sfu-compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
.blog-sfu-diagram { height: 200px; transform: none; }
.mesh-node { width: 64px; height: 64px; font-size: 14px; }
.sfu-node { width: 44px; height: 44px; font-size: 14px; }
.blog-sfu-hub { min-width: 150px; padding: 10px; }
.blog-sfu-hub strong { font-size: 12px; }
.blog-sfu-hub span { font-size: 11px; }
.mesh-line-diag-a, .mesh-line-diag-b { top: 100px; }
.mesh-line-bottom { top: 140px; }
.mesh-line-left, .mesh-line-right { height: 90px; }
}
@media (max-width: 768px) {
.code-body {
padding: 14px 16px;
}
.code-body pre {
font-size: 12px;
}
.header-dots {
display: none;
}
.header-filename .filename {
max-width: 180px;
}
} .blog-app-series-container {
background-color: #0f172a;
border-radius: 16px;
padding: 25px 20px;
margin: 30px 0;
font-family: 'Poppins', sans-serif;
color: #ffffff;
}
.blog-app-series-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.blog-app-series-header span {
font-size: 18px;
}
.blog-app-series-header h3 {
color: #e2e8f0;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
.blog-app-series-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.blog-app-series-card {
background-color: #1d2537;
border: 1px solid #202b3c;
border-radius: 10px;
padding: 15px 18px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none !important;
}
.blog-app-series-card:hover {
border-color: #023be2;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
}
.blog-app-series-label {
color:#0095ff;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.blog-app-series-link-text {
color: #ffffff;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.35;
margin: 0;
transition: color 0.3s ease;
}
.blog-app-series-card:hover .blog-app-series-link-text {
text-decoration: underline;
}
@media (max-width: 991px) {
.blog-app-series-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.blog-app-series-container {
padding: 20px 15px;
}
.blog-app-series-link-text {
font-size: 0.9rem;
}
} .blog-stats-ribbon {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-top: 1px solid rgba(2, 59, 226, 0.4);
border-bottom: 1px solid rgba(2, 59, 226, 0.4);
margin: 2rem 0;
}
.blog-stat-item {
padding: 2.5rem 1.5rem;
text-align: center;
border-right: 1px solid rgba(2, 59, 226, 0.4);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.blog-stat-item:last-child {
border-right: none;
}
.blog-stat-item:hover {
background: rgba(2, 59, 226, 0.1); 
}
.blog-stat-value {
font-size: 2.5rem;
font-weight: 800;
color: var(--brand-blue, #023be2);
line-height: 1.1;
margin-bottom: 0.5rem;
font-family: inherit;
}
.blog-stat-label {
font-size: 0.85rem;
color: #333;
line-height: 1.4;
font-weight: 500;
font-family: inherit;
}
@media (max-width: 1024px) {
.blog-stats-ribbon {
grid-template-columns: repeat(3, 1fr);
}
.blog-stat-item {
border-bottom: 1px solid rgba(2, 59, 226, 0.4);
}
.blog-stat-item:nth-child(3) {
border-right: none;
}
.blog-stat-item:nth-child(4),
.blog-stat-item:nth-child(5) {
border-bottom: none;
}
.blog-stat-item:last-child {
border-right: 1px solid rgba(2, 59, 226, 0.4);
}
}
@media (max-width: 767px) {
.blog-stats-ribbon {
grid-template-columns: repeat(2, 1fr);
}
.blog-stat-item {
border-right: 1px solid rgba(2, 59, 226, 0.4);
border-bottom: 1px solid rgba(2, 59, 226, 0.4);
}
.blog-stat-item:nth-child(even) {
border-right: none;
}
.blog-stat-item:nth-child(3) {
border-right: 1px solid rgba(2, 59, 226, 0.4);
}
.blog-stat-item:nth-child(4) {
border-bottom: 1px solid rgba(2, 59, 226, 0.4);
}
.blog-stat-item:last-child {
border-bottom: none;
}
}
@media (max-width: 480px) {
.blog-stats-ribbon {
grid-template-columns: 1fr;
}
.blog-stat-item {
border-right: none;
border-bottom: 1px solid rgba(2, 59, 226, 0.4);
}
.blog-stat-item:nth-child(3) {
border-right: none;
}
.blog-stat-item:last-child {
border-bottom: none;
border-right: none;
grid-column: auto;
}
.blog-stat-value {
font-size: 2rem;
}
} .plat-dev-guide-section {
width: 100%;
}
.dev-tabs-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 15px;
scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent;
padding-bottom: 5px;
}
.dev-tabs-wrapper::-webkit-scrollbar {
height: 4px;
}
.dev-tabs-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.dev-tabs-wrapper::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.1);
border-radius: 4px;
}
.dev-tabs {
display: inline-flex;
gap: 12px;
white-space: nowrap;
}
.dev-tab {
padding: 8px 24px;
border-radius: 8px;
border: 1px solid #d1d5db;
background-color: transparent;
color: #4b5563;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.dev-tab:hover {
border-color: var(--brand-blue);
color: var(--brand-blue);
}
.dev-tab.active {
border-color: var(--brand-blue);
background-color: rgba(2, 59, 226, 0.05);
color: var(--brand-blue);
}
.dev-tab-content {
position: relative;
}
.dev-pane {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.dev-pane.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.dev-pane-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.dev-pane-title {
font-size: 22px;
font-weight: 700;
color: #111827;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.dev-pane-text {
font-size: 15px;
color: #4b5563;
line-height: 1.6;
margin-bottom: 30px;
}
.app-benefit-list.row {
margin-left: 0;
margin-right: 0;
list-style-type: none;
padding-left: 0;
}
.app-benefit-list.row > div {
padding-left: 0;
padding-right: 15px;
}
.app-benefit-list.row li {
position: relative;
padding-left: 32px;
margin-bottom: 0;
color: #111827;
font-weight: 500;
} .app-benefit-list.row li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--brand-blue);
background-color: transparent;
padding: 4px;
} .app-benefit-list.row li::after {
content: "";
position: absolute;
left: 5px;
top: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--brand-blue);
} @media (max-width: 768px) {
.dev-pane-card {
padding: 24px 20px;
}
.dev-pane-title {
font-size: 18px;
}
}
@media (max-width: 480px) {
.dev-pane-card {
padding: 20px 16px;
}
} .estimater-hero {
background-color: #fafbfc;
background-image: 
radial-gradient(circle clamp(350px, 45vw, 800px) at 0% 100%, rgba(2, 59, 226, 0.26) 0%, transparent 100%),
radial-gradient(circle clamp(350px, 45vw, 800px) at 100% 0%, rgba(2, 59, 226, 0.26) 0%, transparent 100%);
padding: 40px 0 var(--section-spacing);
position: relative;
overflow: hidden;
}
.estimater-hero .section-tag,
.estimater-hero .estimate-hero-title,
.estimater-hero .estimate-hero-subtitle {
opacity: 0;
will-change: transform, opacity;
} .estimater-hero.animate-in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.estimater-hero.animate-in .estimate-hero-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
}
.estimater-hero.animate-in .estimate-hero-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.4s;
}
.estimate-hero-wrap {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 5;
}
.estimate-hero-title {
font-size: 72px;
font-weight: 700;
color: #111827;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
}
.estimate-hero-title .text-blue {
background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.estimate-hero-subtitle {
font-size: 21px;
color: #4b5563;
line-height: 1.6;
margin-bottom: 48px;
max-width: 850px;
font-weight: 400;
}
.pricing-display {
margin-bottom: 40px;
}
.price-pill-main {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 10px 28px;
background: #f0f7ff;
border: 1px solid rgba(2, 59, 226, 0.1);
border-radius: 12px;
}
.starting-text {
font-size: 13px;
font-weight: 700;
color: var(--brand-blue);
letter-spacing: 0.05em;
}
.price-amt {
font-size: 38px;
font-weight: 700;
color: var(--brand-blue);
}
.breakdown-text {
font-size: 14px;
color: #6b7280;
}
.estimate-btns-group {
display: flex;
gap: 16px;
margin-bottom: 60px;
flex-wrap: wrap;
justify-content: center;
}
.btn-white-estimate {
background: #f3f4f6;
color: #111827;
padding: 12px 28px;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
border: 1px solid #e5e7eb;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-white-estimate:hover {
border: 1px solid #e5e7eb;
background: #f3f4f6;
transform: translateY(-2px);
}
.bottom-features-pills {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.estimate-feature-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 50px;
font-size: 13px;
color: #4b5563;
font-weight: 500;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: all 0.3s ease;
cursor: pointer;
}
.estimate-feature-pill:hover {
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.08) 2.06%, rgba(0, 161, 197, 0.08) 99.67%);
border-color: rgba(2, 59, 226, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(2, 59, 226, 0.08);
}
.estimate-feature-pill .pill-dot {
width: 6px;
height: 6px;
background-color: var(--brand-blue);
border-radius: 50%;
}
@media (max-width: 991px) {
.estimate-hero-title {
font-size: 56px;
}
.estimate-hero-subtitle {
font-size: 19px;
}
}
@media (max-width: 768px) {
.estimate-hero-title {
font-size: 42px;
}
.estimater-hero {
padding: 60px 0 60px;
}
.estimate-hero-title br, .estimate-hero-subtitle br {
display: none;
}
.estimate-btns-group .btn, 
.estimate-btns-group .btn-white-estimate {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.estimate-hero-title {
font-size: 34px;
}
.estimate-hero-subtitle {
font-size: 17px;
}
} .estimator-section {
padding: var(--section-spacing) 20px;
background-color: #ffffff;
}
.estimator-section .container {
max-width: var(--section-width);
margin: 0 auto;
} .estimator-section .section-tag,
.estimator-section .section-main-title,
.estimator-section .section-subtitle {
opacity: 0;
transform: translateY(22px) rotate(-1.4deg);
will-change: transform, opacity;
}
.estimator-section.in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.estimator-section.in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.1s;
}
.estimator-section.in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.2s;
} .estimator-section .section-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: #023be2;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.estimator-section .section-main-title {
font-size: clamp(32px, 5vw, 54px);
font-weight: 700;
line-height: 1.1;
color: #1a1a1a;
margin-bottom: 20px;
}
.estimator-section .section-subtitle {
font-size: 18px;
line-height: 1.6;
color: #6b7280;
max-width: 800px;
margin-bottom: 42px;
} .type-switcher {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-bottom: 24px;
}
.type-btn {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 25px;
border: 1px solid rgba(2, 59, 226, 0.3);
border-radius: 28px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
text-align: left;
outline: none;
}
.type-btn.active {
background: rgba(2, 59, 226, 0.04);
border: 2px solid #023be2;
}
.type-icon .icon-box {
width: 52px;
height: 52px;
background: #f3f4f6;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
transition: all 0.3s ease;
flex-shrink: 0;
}
.type-btn.active .type-icon .icon-box {
background: rgba(2, 59, 226, 0.1);
color: #023be2;
}
.type-name {
font-size: 26px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.type-btn.active .type-name {
color: #023be2;
}
.type-sub {
font-size: 16px;
color: #6b7280;
margin-bottom: 18px;
line-height: 1.5;
}
.type-from {
font-size: 17px;
font-weight: 700;
color: #023be2;
} .currency-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-bottom: 24px;
position: relative;
z-index: 5;
margin-right:8px;
}
.curr-label {
font-size: 15px;
font-weight: 500;
color: #4b5563;
}
.curr-toggle {
display: flex;
gap: 8px;
}
.curr-btn {
border: none;
padding: 8px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
background: #fff;
color: #4b5563;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.curr-btn.active {
background: #023be2;
color: #fff;
} @media (max-width: 991px) {
.type-switcher {
grid-template-columns: 1fr;
gap: 20px;
}
.type-btn {
padding: 30px;
}
}
@media (max-width: 767px) {
.estimator-section {
padding: var(--section-spacing-mobile) 16px;
}
.section-main-title {
font-size: 28px;
}
.type-btn {
padding: 24px;
gap: 16px;
}
.type-icon .icon-box {
width: 50px;
height: 50px;
}
.type-name {
font-size: 22px;
}
.currency-row {
align-items: center;
gap: 14px;
justify-content: center;
margin-top: 20px;
}
.curr-toggle {
width: auto;
}
.curr-btn {
flex: 1;
}
} .cc {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 24px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.cc-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px solid #f3f4f6;
margin-bottom: 20px;
}
.cc-head-l {
display: flex;
align-items: center;
gap: 16px;
}
.step-n {
width: 32px;
height: 32px;
background: #1a1a1a;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
}
.cc-title {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
}
.cc-note {
font-size: 13px;
color: #9ca3af;
font-weight: 400;
text-transform: capitalize;
}
.cc-sub {
font-size: 15px;
color: #6b7280;
margin-bottom: 20px;
line-height: 1.6;
} .tog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.tog {
padding: 20px;
background: #fdfdfd;
border: 1px solid #e5e7eb;
border-radius: 16px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tog:hover {
border-color: rgba(2, 59, 226, 0.3);
background: rgba(2, 59, 226, 0.02);
transform: translateY(-2px);
}
.tog.sel {
border-color: #023be2;
background: rgba(2, 59, 226, 0.04);
box-shadow: 0 4px 12px rgba(2, 59, 226, 0.05);
}
.tog-n {
font-size: 17px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 4px;
}
.tog.sel .tog-n {
color: #023be2;
}
.tog-p {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.tog.sel .tog-p {
color: #023be2;
} .platform-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.plat-btn {
padding: 16px;
background: #fdfdfd;
border: 1px solid #e5e7eb;
border-radius: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.plat-btn:hover {
border-color: rgba(2, 59, 226, 0.3);
background: rgba(2, 59, 226, 0.02);
transform: translateY(-2px);
}
.plat-btn.active {
border-color: #023be2;
background: rgba(2, 59, 226, 0.04);
box-shadow: 0 4px 12px rgba(2, 59, 226, 0.05);
}
.plat-icon-wrap {
margin-bottom: 12px;
display: flex;
justify-content: center;
}
.plat-icon {
width: 52px;
height: 52px;
}
.plat-name {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 4px;
}
.plat-btn.active .plat-name {
color: #023be2;
}
.plat-note {
font-size: 14px;
color: #6b7280;
font-weight: 500;
} .sl-wrap {
display: flex;
align-items: center;
gap: 20px;
padding: 10px 0;
}
.sl-limit {
font-size: 14px;
font-weight: 600;
color: #9ca3af;
min-width: 20px;
}
.sl-wrap input[type="range"] {
flex: 1;
height: 6px;
border-radius: 5px;
background: #e5e7eb;
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.sl-wrap input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
background: #023be2;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px #023be2, 0 4px 10px rgba(0,0,0,0.1);
cursor: pointer;
margin-top: -3px; 
transition: all 0.2s ease;
}
.sl-wrap input[type="range"]::-moz-range-thumb {
width: 22px;
height: 22px;
background: #023be2;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px #023be2, 0 4px 10px rgba(0,0,0,0.1);
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.sl-wrap input[type="range"]::-moz-range-progress {
background: #023be2;
height: 6px;
border-radius: 5px;
}
.sl-val {
min-width: 100px;
color: #0056D4;
text-align: center;
font-weight: 700;
font-size: 16px;
} .sel-wrap {
position: relative;
}
.sel-inp {
width: 100%;
padding: 18px 24px;
border-radius: 16px;
border: 1px solid #e5e7eb;
background: #fdfdfd;
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
cursor: pointer;
appearance: none;
outline: none;
transition: all 0.3s ease;
}
.sel-wrap::after {
content: '\F282';
font-family: 'bootstrap-icons';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
pointer-events: none;
}
.sel-inp:focus {
border-color: #023be2;
box-shadow: 0 0 0 4px rgba(2, 59, 226, 0.05);
} @media (max-width: 991px) {
.platform-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.platform-grid {
grid-template-columns: 1fr;
}
.tog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.cc {
padding: 24px 20px;
}
.cc-head {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.sl-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: center;
}
.sl-wrap input[type="range"] {
grid-column: 1 / span 2;
width: 100%;
order: -1;
}
.sl-limit:first-of-type {
grid-column: 1;
text-align: left;
}
.sl-limit:last-of-type {
grid-column: 2;
text-align: right;
}
.sl-val {
grid-column: 1 / span 2;
text-align: center;
margin-top: 10px;
}
} .sum-wrap {
background: #fff;
border-radius: 20px;
overflow: hidden;
margin-top: 50px;
border: 1px solid #f0f0f0;
}
.sum-top {
background: #111;
color: #fff;
padding: 18px 28px;
display: flex;
justify-content: space-between;
align-items: center;
}
.sum-top-title {
font-size: 18px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
}
.live-pill {
background: rgba(2, 59, 226, 0.4);
color: #fff;
font-size: 11px;
padding: 5px 14px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sr {
display: flex;
justify-content: space-between;
padding: 16px 28px;
border-bottom: 1px solid #f5f5f5;
font-size: 15px;
color: #666;
}
.sr-l { font-weight: 400; }
.sr-r { font-weight: 600; color: #111; }
.cost-split {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 30px 28px;
background: #fafafa;
gap: 40px;
}
.cs-label {
font-size: 12px;
text-transform: uppercase;
color: #999;
letter-spacing: 1.2px;
margin-bottom: 10px;
font-weight: 600;
}
.cs-val {
font-size: 28px;
font-weight: 700;
color: #111;
margin-bottom: 5px;
}
.cs-note {
font-size: 12px;
color: #aaa;
}
.sum-foot {
background: rgba(2, 59, 226, 0.05);
padding: 35px 28px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(2, 59, 226, 0.1);
}
.sum-foot-label {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: #023be2;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.sum-foot-sub {
font-size: 14px;
color: #023be2;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.total-usd {
font-size: 48px;
font-weight: 800;
color: #023be2;
line-height: 1;
}
.total-inr {
font-size: 16px;
color: #023be2;
opacity: 0.8;
margin-top: 6px;
font-weight: 500;
}
.download-btn {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #e0e0e0;
padding: 10px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin: 30px auto;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #444;
}
.download-btn:hover {
background: #fdfdfd;
border-color: #023be2;
color: #023be2;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(2, 59, 226, 0.1);
}
.attract-note {
display: flex;
gap: 18px;
background: #FFFBF0;
border: 1px solid #FFEBB5;
padding: 24px;
border-radius: 18px;
font-size: 14px;
line-height: 1.6;
color: #7A5C00;
margin-top: 10px;
}
.attract-note strong {
color: #5C4500;
font-weight: 700;
display: block;
margin-bottom: 4px;
}
@keyframes blink {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
@media (max-width: 991px) {
.cost-split { gap: 25px; }
.total-usd { font-size: 38px; }
}
@media (max-width: 767px) {
.cost-split { grid-template-columns: 1fr; padding: 25px; }
.sum-foot { flex-direction: column; text-align: center; gap: 25px; padding: 30px 20px; }
.sum-foot div { text-align: center !important; }
.total-usd { font-size: 36px; }
.sr { padding: 14px 20px; font-size: 14px; }
.sum-top { padding: 15px 20px; }
.attract-note { padding: 18px; font-size: 13px; }
} .bk-grid {
display: flex;
gap: 16px;
overflow-x: auto;
padding: 10px 4px;
-ms-overflow-style: none; scrollbar-width: none; }
.bk-grid::-webkit-scrollbar {
display: none; }
.bk {
flex: 1;
min-width: 160px;
background: #f9f9f9;
border-radius: 18px;
padding: 24px 20px; border: 1px solid #e5e7eb;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.bk:hover {
transform: translateY(-6px);
border-color: #2563eb; 
}
.bk-ph {
font-size: 10px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.1em;
color: #94A3B8;
margin-bottom: 12px;
}
.bk-am {
font-size: 26px;
font-weight: 700;
color: #0F172A;
margin-bottom: 2px;
letter-spacing: -0.02em;
}
.bk-d {
font-size: 12px;
color: #94A3B8;
font-weight: 400;
} .timeline-bar {
display: flex;
height: 54px;
border-radius: 27px;
overflow: hidden;
margin-top: 10px;
background: #F1F5F9;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}
.tl-phase {
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0 15px;
min-width: 60px;
transition: all 0.4s ease;
}
.tl-phase.disc {
background: #2D3E50; }
.tl-phase.des {
background: #3B82F6; }
.tl-phase.dev {
background: #023BE2; }
.tl-phase.qa {
background: #FCC604; color: #0F172A;
}
.tl-phase.launch {
background: #000000; }
.tl-phase span {
white-space: nowrap;
opacity: 0.9;
}
#timeline-detail {
font-size: 12px;
color: #94A3B8;
margin-top: 12px;
font-weight: 500;
}
@media (max-width: 1200px) {
.bk-grid {
flex-wrap: nowrap;
}
}
@media (max-width: 768px) {
.bk-grid {
gap: 12px;
}
.bk {
min-width: 140px;
padding: 20px 16px;
}
.bk-ph {
font-size: 9px;
margin-bottom: 8px;
}
.bk-am {
font-size: 22px;
}
.timeline-bar {
height: 46px;
}
.tl-phase {
font-size: 10px;
padding: 0 10px;
}
}
@media (max-width: 480px) {
.bk {
min-width: 130px;
}
.bk-am {
font-size: 20px;
}
}
.estimator-sub-section {
margin-top: 20px !important;
}
@media (max-width: 768px) {
.estimator-sub-section {
margin-top: 10px !important;
}
} .why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 15px;
}
.why-item {
background: #f9f9f9;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
border: 1px solid #e5e7eb;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.why-item:hover {
transform: translateY(-5px);
border-color: #2563eb; 
}
.why-label {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 700;
color: #1A202C;
margin-bottom: 12px;
font-family: 'Poppins', sans-serif;
}
.why-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.why-desc {
font-size: 14.5px;
color: #4A5568;
line-height: 1.6;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
@media (max-width: 991px) {
.why-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.why-item {
padding: 24px;
}
.why-label {
font-size: 17px;
}
.why-desc {
font-size: 14px;
}
} .included-section {
background: #f9fafb;
padding: var(--section-spacing) 20px;
font-family: 'Poppins', sans-serif;
}
.included-section .container-xl {
max-width: var(--section-width);
margin-left: auto;
margin-right: auto;
padding: 0;
} .included-section.animate-in .section-tag,
.included-section.in .section-tag {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0s;
}
.included-section .section-main-title,
.included-section .section-subtitle {
opacity: 0;
will-change: transform, opacity;
}
.included-section.animate-in .section-main-title,
.included-section.in .section-main-title {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.15s;
}
.included-section.animate-in .section-subtitle,
.included-section.in .section-subtitle {
animation: swingIn 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-delay: 0.3s;
} .included-section .heading-grid {
margin-top: 20px;
margin-bottom: 50px;
align-items: center;
}
.sec-head {
margin-bottom: 50px;
}
.inc-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
}
.inc {
background: #ffffff;
border-radius: 24px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
border: 1px solid #e5e7eb;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes inc-swing {
0% { transform: translateY(-8px) rotate(0deg); }
33% { transform: translateY(-8px) rotate(1deg); }
66% { transform: translateY(-8px) rotate(-1deg); }
100% { transform: translateY(-8px) rotate(0deg); }
}
.inc:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.inc-ico {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.inc-n {
font-size: 17px;
font-weight: 700;
color: #111827;
line-height: 1.4;
}
.inc-d {
font-size: 14px;
color: #64748B;
line-height: 1.6;
} @media (max-width: 1400px) {
.inc-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 991px) {
.included-section { padding: var(--section-spacing-mobile) 16px; }
.inc-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.included-section { padding: var(--section-spacing-mobile) 12px; }
.inc-grid {
grid-template-columns: 1fr;
}
.inc { padding: 24px; }
} #stickyBar {
position: fixed;
bottom: var(--sticky-slider-height);
left: 0;
right: 0;
background: #000000;
color: #ffffff;
padding: 16px 40px;
display: flex;
justify-content: space-between;
align-items: center;
transform: translateY(calc(100% + var(--sticky-slider-height)));
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 1100;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}
#stickyBar.show {
transform: translateY(0);
} #stickyExpertSlider.is-hidden ~ #stickyBar {
bottom: 0;
transform: translateY(100%);
}
#stickyExpertSlider.is-hidden ~ #stickyBar.show {
transform: translateY(0);
}
.sticky-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #9ca3af;
margin-bottom: 2px;
font-weight: 600;
}
.sticky-price {
font-size: 26px;
font-weight: 700;
line-height: 1.1;
color: #ffffff;
}
.sticky-inr {
font-size: 13px;
color: #6b7280;
margin-top: 2px;
}
.sticky-cta {
background: #023be2;
color: #ffffff !important;
padding: 10px 20px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.sticky-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(2, 59, 226, 0.25);
}
.sticky-cta .arrow-icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.sticky-cta:hover .arrow-icon {
transform: rotate(35deg);
}
@media (max-width: 991px) {
#stickyBar {
padding: 12px 30px;
}
.sticky-cta {
padding: 10px 22px;
font-size: 14px;
}
}
@media (max-width: 768px) {
#stickyBar {
padding: 12px 20px;
background: #000000;
}
.sticky-price {
font-size: 20px;
}
.sticky-inr {
display: none;
}
.sticky-cta {
padding: 10px 18px;
font-size: 13px;
border-radius: 10px;
gap: 6px;
}
.sticky-cta .arrow-icon {
width: 16px;
height: 16px;
}
}
.contact-form-square{
padding: 30px !important;
border-top-right-radius: 18px !important;
border-bottom-right-radius: 18px !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.contact-info-padding{
padding:30px;
}
.estimate-contact-points {
display: grid;
gap: 22px;
}
.estimate-contact-point {
display: flex;
align-items: flex-start;
gap: 14px;
}
.estimate-contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: #e8f1ff;
color: #2563eb;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.estimate-contact-point h3 {
margin: 0;
}
.estimate-contact-point p {
margin: 4px 0 0;
}
.contact-form-features {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
padding-top: 24px;
border-top: 1px solid #f1f1f1;
}
.contact-feature-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.contact-feature-item i {
width: 18px;
height: 18px;
background: rgba(2, 59, 226, 0.08);
color: var(--brand-blue);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 13px;
font-weight: bold;
} .estimate-contact-panel-heading {
font-size: clamp(22px, 2.5vw, 35px);
font-weight: 500;
color: #000;
margin-bottom: 48px;
line-height: 1.35;
}
.estimate-contact-panel-list {
display: flex;
flex-direction: column;
gap: 36px;
margin-bottom: 0;
}
.estimate-contact-panel-item {
display: flex;
align-items: flex-start;
gap: 16px;
}
.estimate-contact-panel-icon {
width: 26px;
height: 26px;
border-radius: 6px;
background-color: #d6e6ff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.estimate-contact-panel-icon svg {
stroke: var(--brand-blue)
}
.estimate-contact-panel-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.estimate-contact-panel-text h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #000; }
.estimate-contact-panel-text p {
margin: 0;
font-size: 14px;
color: #4b5563; }
.estimate-no-padding{
padding:0px !important;
} .feature-depth-card {
background: white;
border-radius: 12px;
border: 1px solid #eaebec;
padding: 40px;
margin: 30px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.feature-depth-header {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.feature-depth-badge-wrap {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.feature-depth-number {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.2));
color: #2563eb;
font-size: 16px;
font-weight: 700;
padding: 8px 14px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-depth-pill {
background: #dcfce7;
color: #15803d;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 4px;
}
.feature-depth-pill-yellow {
background: #fffbeb;
color: #d97706;
}
.feature-depth-pill-blue {
background: #dbeafe;
color: #1d4ed8;
}
.feature-depth-title {
font-size: 22px;
font-weight: 500;
color: #1a1a1a;
margin: 0;
padding-bottom: 12px;
border-bottom: 1px solid #eaebec;
}
.feature-depth-body {
font-size: 16px;
color: #4b5563;
line-height: 1.7;
}
.feature-depth-body p {
margin-bottom: 20px;
}
.feature-what-to-build {
background: rgba(37, 99, 235, 0.02);
border-left: 4px solid #2563eb;
padding: 24px 30px;
border-radius: 0 8px 8px 0;
margin: 32px 0;
}
.what-to-build-title {
font-size: 13px;
font-weight: 700;
color: #64748b;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 16px 0;
}
.what-to-build-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.what-to-build-list li {
position: relative;
padding-left: 24px;
font-size: 15px;
color: #1e293b;
line-height: 1.6;
border-bottom: 1px solid rgba(0,0,0,0.04);
padding-bottom: 12px;
}
.what-to-build-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.what-to-build-list li::before {
content: "→";
color: #2563eb;
position: absolute;
left: 0;
top: 0;
font-weight: 600;
}
.feature-depth-footer {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02));
border: 1px solid rgba(37, 99, 235, 0.15);
border-radius: 12px;
padding: 24px;
margin-top: 32px;
margin-bottom:20px;
display: flex;
align-items: flex-start;
gap: 16px;
}
.feature-footer-icon {
color: #2563eb;
font-size: 24px;
line-height: 1;
}
.feature-footer-content {
flex: 1;
font-size: 15px;
color: #1e293b;
line-height: 1.6;
}
.feature-footer-link {
margin-top: 12px;
}
.feature-footer-link a {
color: #2563eb;
font-weight: 600;
text-decoration: none;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: opacity 0.2s;
}
.feature-footer-link a:hover {
opacity: 0.8;
}
@media (min-width: 768px) {
.feature-depth-header {
flex-direction: row;
align-items: flex-start;
gap: 24px;
}
.feature-depth-number {
flex-shrink: 0;
}
.feature-depth-title {
padding-bottom: 0;
border-bottom: none;
}
.feature-depth-header {
padding-bottom: 24px;
border-bottom: 1px solid #eaebec;
}
}
.feature-depth-title-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.feature-flag-box {
border: 1px solid;
}
.feature-flag-box-red {
border-color: rgba(220, 38, 38, 0.22);
background: #fff5f5;
}
.feature-flag-box-green {
border-color: rgba(22, 163, 74, 0.24);
background: #f0fdf4;
}
.feature-flag-label {
letter-spacing: 0.03em;
}
.feature-flag-list {
color: #374151;
line-height: 1.8;
}
.feature-flag-mark-red {
color: #dc2626;
}
@media (max-width: 576px) {
.feature-depth-card {
padding: 24px;
}
.feature-what-to-build {
padding: 20px;
}
.feature-depth-footer {
flex-direction: column;
gap: 12px;
}
.feature-depth-title {
font-size: 20px;
}
}
.chat-solution-sm-title {
font-size: 0.70rem;
font-weight: 450;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.35rem;
}
.blog-service-links-wrapper {
margin-top: 24px;
display: flex;
align-items: center;
gap: 12px;
font-size: 17px;
}
.blog-service-link {
color: #059669;
text-decoration: none;
font-weight: 500;
padding-bottom: 2px;
transition: opacity 0.2s ease;
}
.blog-service-link:hover {
opacity: 0.8;
}
@media (max-width: 768px) {
.blog-service-links-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.blog-service-divider {
display: none;
}
} .blog-cost-breakdown-wrapper {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: clamp(20px, 4vw, 40px);
margin-bottom: 40px;
}
.blog-cost-breakdown-title {
margin-top: 0;
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 16px;
font-weight: 450;
}
.blog-cost-breakdown-desc {
color: #4b5563;
margin-bottom: 32px;
font-size: 1.05rem;
line-height: 1.6;
}
.blog-cost-driver-title {
font-size: 16px;
font-weight: 700;
color: #0f172a;
margin-top: 32px;
margin-bottom: 16px;
}
.blog-cost-driver-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px 0;
flex-wrap: wrap;
gap: 12px;
}
.blog-cost-driver-item-border {
border-bottom: 1px solid #e2e8f0;
}
.blog-cost-driver-name {
font-size: 15px;
color: #334155;
padding-top: 6px;
}
.blog-cost-driver-price {
font-size: 14px;
font-weight: 700;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid #e2e8f0;
color: #0f172a;
background: #ffffff;
white-space: nowrap;
}
.btn-outline-primary {
background: #fff;
color: #023be2;
padding: 10px 25px;
border-radius: 12px;
font-weight: 500;
font-size: 14px;
border: 1px solid #0056D4;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
overflow: visible;
}
.btn-outline-primary:hover {
background: #023be2;
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(2, 59, 226, 0.2);
}
.blog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 3.5rem !important;
}
.blog-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border: none;
border-radius: 50%;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.12) 2.06%, rgba(0, 161, 197, 0.12) 99.67%);
color: #023be2;
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.01em;
transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.blog-pagination a.page-numbers:hover {
color: #023be2;
background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.2) 2.06%, rgba(0, 161, 197, 0.2) 99.67%);
transform: translateY(-1px);
}
.blog-pagination .page-numbers.current {
background: var(--gradient-blue);
color: #fff;
}
.blog-pagination .next.page-numbers,
.blog-pagination .prev.page-numbers,
.blog-pagination .previous.page-numbers {
min-width: auto;
width: auto;
height: auto;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #111;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0;
}
.blog-pagination a.next.page-numbers:hover,
.blog-pagination a.prev.page-numbers:hover,
.blog-pagination a.previous.page-numbers:hover {
background: transparent;
box-shadow: none;
color: #111;
transform: none;
}
@media (max-width: 576px) {
.blog-pagination {
gap: 10px;
margin-top: 2.75rem !important;
}
.blog-pagination .page-numbers {
min-width: 32px;
height: 32px;
padding: 0 10px;
font-size: 0.82rem;
}
.blog-pagination .next.page-numbers,
.blog-pagination .prev.page-numbers,
.blog-pagination .previous.page-numbers {
font-size: 0.78rem;
}
} .blog-guide-covers-box {
background-color: rgba(0, 87, 255, 0.05) ;
border: 1px solid #f3eff3;
border-radius: 16px;
padding: 35px;
margin: 20px 0;
}
.guide-covers-title {
font-size: 0.85rem;
font-weight: 700;
color: #71717a;
letter-spacing: 0.05em;
margin-bottom: 25px;
text-transform: uppercase;
}
.guide-covers-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 40px;
}
.guide-covers-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 1rem;
line-height: 1.4;
color: #3f3f46;
margin-bottom: 5px;
}
.guide-covers-tick {
color: #2563eb; font-size: 1.1rem;
font-weight: 900;
flex-shrink: 0;
margin-top: 2px;
}
@media (max-width: 991px) {
.guide-covers-grid {
gap: 15px 20px;
}
}
@media (max-width: 768px) {
.guide-covers-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.blog-guide-covers-box {
padding: 25px;
margin: 30px 0;
}
.guide-covers-item {
font-size: 0.95rem;
}
} .three-layer-main-title {
font-size: 1.25rem;
font-weight: 700;
color: #111;
margin-bottom: 2rem;
line-height: 1.4;
}
.three-layer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 10px;
}
.three-layer-card {
position: relative;
padding: 30px 24px;
border-radius: 20px;
border: 1px solid rgba(0,0,0,0.08);
background: #fff;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
min-height: 400px;
overflow: hidden;
}
.three-layer-card:hover {
box-shadow: 0 15px 35px rgba(0,0,0,0.03);
}
.layer-bg-number {
position: absolute;
top: 0;
right: 15px;
font-size: 6rem;
font-weight: 900;
line-height: 1;
opacity: 0.05;
user-select: none;
pointer-events: none;
font-family: 'Poppins', sans-serif;
}
.layer-card-header {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 1.3rem;
}
.layer-card-title {
font-size: 1rem;
font-weight: 700;
color: #111;
margin-bottom: 1.2rem;
line-height: 1.2;
z-index: 1;
}
.layer-card-text {
font-size: 0.85rem;
line-height: 1.6;
color: #4b5563;
margin-bottom: auto;
z-index: 1;
}
.layer-card-badge {
display: inline-flex;
padding: 8px 18px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
width: fit-content;
margin-top: 2rem;
z-index: 1;
} .layer-teal {
border-color: rgba(13, 148, 136, 0.2);
background: linear-gradient(180deg, #f0fdfa 0%, #fff 100%);
}
.layer-teal .layer-card-header { color: #0d9488; }
.layer-teal .layer-card-badge { background: #ccfbf1; color: #0d9488; }
.layer-amber {
border-color: rgba(217, 119, 6, 0.2);
background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}
.layer-amber .layer-card-header { color: #d97706; }
.layer-amber .layer-card-badge { background: #fef3c7; color: #d97706; }
.layer-rose {
border-color: rgba(225, 29, 72, 0.2);
background: linear-gradient(180deg, #fff1f2 0%, #fff 100%);
}
.layer-rose .layer-card-header { color: #e11d48; }
.layer-rose .layer-card-badge { background: #ffe4e6; color: #e11d48; } @media (max-width: 1024px) {
.three-layer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.three-layer-grid {
grid-template-columns: 1fr;
}
.three-layer-card {
min-height: auto;
}
.layer-bg-number {
font-size: 6rem;
}
}
.pricing-card-container {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 25px;
}
.pricing-tier-card {
background: #ffffff;
border: 1px solid #eaebec;
border-radius: 12px;
display: flex;
padding: 25px;
gap: 30px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.pricing-tier-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
border-color: #023be222;
}
.pricing-tier-left {
flex: 0 0 110px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border-right: 1px solid #f1f5f9;
padding-right: 15px;
}
.pricing-tier-price {
color: #023be2;
font-size: 26px;
font-weight: 800;
line-height: 1;
margin-bottom: 4px;
letter-spacing: -0.5px;
text-transform: uppercase;
font-family: 'Outfit', 'Inter', sans-serif;
}
.pricing-tier-label {
color: #94a3b8;
font-size: 12px;
font-weight: 600;
text-transform: lowercase;
}
.pricing-tier-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.pricing-tier-title {
color: #0f172a;
font-size: 17px;
font-weight: 800;
margin-bottom: 6px;
line-height: 1.2;
}
.pricing-tier-desc {
color: #64748b;
font-size: 14px;
line-height: 1.5;
margin: 0;
font-weight: 400;
}
@media (max-width: 991px) {
.pricing-tier-card {
gap: 20px;
padding: 20px;
}
.pricing-tier-left {
flex: 0 0 100px;
}
.pricing-tier-price {
font-size: 22px;
}
}
@media (max-width: 767px) {
.pricing-tier-card {
flex-direction: column;
gap: 15px;
padding: 20px;
}
.pricing-tier-left {
flex: none;
text-align: left;
border-right: none;
border-bottom: 1px solid #f1f5f9;
padding-right: 0;
padding-bottom: 12px;
align-items: flex-start;
}
.pricing-tier-price {
font-size: 24px;
}
}
.dating-cost-grid-section {
margin: 56px 0;
}
.dating-cost-grid-header {
margin-bottom: 28px;
}
.dating-cost-grid-title {
margin-bottom: 12px;
}
.dating-cost-grid-description {
max-width: 760px;
margin-bottom: 0;
}
.dating-cost-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.dating-cost-card {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
min-height: 86px;
padding: 22px 20px;
border: 1px solid rgba(2, 59, 226, 0.18);
border-radius: 14px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 8px 24px rgba(2, 59, 226, 0.05);
}
.dating-cost-card-title {
margin: 0;
color: #0f172a;
font-size: 1rem;
font-weight: 500;
line-height: 1.45;
max-width: 72%;
}
.dating-cost-card-price {
flex-shrink: 0;
color: #023be2;
font-size: 0.90rem;
font-weight: 700;
line-height: 1.2;
text-align: right;
white-space: nowrap;
}
@media (max-width: 1199px) {
.dating-cost-card-title {
font-size: 1.15rem;
max-width: 68%;
}
.dating-cost-card-price {
font-size: 1.15rem;
}
}
@media (max-width: 991px) {
.dating-cost-grid {
grid-template-columns: 1fr;
}
.dating-cost-card {
min-height: auto;
}
}
@media (max-width: 575px) {
.dating-cost-grid-section {
margin: 44px 0;
}
.dating-cost-card {
flex-direction: column;
gap: 12px;
padding: 18px;
}
.dating-cost-card-title {
max-width: 100%;
font-size: 1rem;
}
.dating-cost-card-price {
font-size: 1.05rem;
text-align: left;
white-space: normal;
}
}
.ai-card-subtitle {
margin: -2px 0 10px;
color: rgba(255, 255, 255, 0.82);
font-size: 10px;
font-weight: 500;
line-height: 1.45;
}
.chat-choose-grid .chat-choose-number {
width: auto;
height: auto;
margin-bottom: 12px;
display: block;
color: rgba(2, 59, 226, 0.12);
font-size: 3.25rem;
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.05em;
font-family: 'Poppins', sans-serif;
}
@media (max-width: 640px) {
.chat-choose-grid .chat-choose-number {
font-size: 2.65rem;
}
}
.stepper-cross-square {
display: flex;
align-items: center;
justify-content: center;
font-size: 0 !important;
}
.stepper-cross-square i {
color: #fff;
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
}
.message-type-card .message-type-text {
margin-bottom: 18px;
}
.message-type-value {
margin:20px 0;
color: #023be2;
font-size: 2.5rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.05em;
font-family: 'Outfit', 'Poppins', sans-serif;
}
@media (max-width: 640px) {
.message-type-value {
font-size: 2.1rem;
}
}
.app-cost-tier-section {
margin: 28px 0 42px;
}
.app-cost-factors-section {
margin-top: 8px;
}
.app-cost-tier-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.app-cost-factors-card {
background: #0b101e;
padding: 38px 36px 34px;
}
.app-cost-factors-title {
margin: 0 0 14px;
color: #fff;
font-size: clamp(2rem, 2vw, 2.25rem);
font-weight: 500;
line-height: 1.18;
letter-spacing: -0.03em;
}
.app-cost-factors-intro {
max-width: 980px;
margin: 0 0 28px;
color: #b4b8ca;
font-size: 1rem;
font-weight: 400;
line-height: 1.7;
}
.app-cost-factors-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0px 54px;
}
.app-cost-factor-item {
min-width: 0;
padding: 26px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.app-cost-factors-grid .app-cost-factor-item:nth-last-child(-n+2) {
border-bottom: none;
padding-bottom: 0;
}
.app-cost-factors-grid .app-cost-factor-item:nth-child(-n+2) {
padding-top: 0;
}
.app-cost-factor-heading {
margin: 0 0 6px;
color: #0664d8;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
}
.app-cost-factor-copy {
margin: 0;
color: #b4b8ca;
font-size: 0.83rem;
font-weight: 400;
line-height: 1.72;
}
.app-cost-tier-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 12px;
} .help-services-section .app-cost-tier-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991px) {
.help-services-section .app-cost-tier-grid {
grid-template-columns: 1fr;
}
.app-cost-factors-card {
padding: 32px 24px 28px;
}
.app-cost-factors-grid {
gap: 22px 26px;
}
}
@media (max-width: 767px) {
.app-cost-factors-card {
padding: 24px 18px 22px;
}
.app-cost-factors-grid {
grid-template-columns: 1fr;
gap: 0px;
}
.app-cost-factor-item {
padding: 20px 0 !important;
border-right: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.app-cost-factor-item:first-child {
padding-top: 0 !important;
}
.app-cost-factor-item:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.app-cost-factors-grid .app-cost-factor-item:nth-child(even) {
padding-left: 0 !important;
}
.app-cost-factors-title {
font-size: 1.75rem;
}
.app-cost-factors-intro,
.app-cost-factor-copy {
font-size: 0.94rem;
line-height: 1.65;
}
.app-cost-factor-heading {
font-size: 1.16rem;
}
}
.help-services-section .app-cost-tier-enterprise-pricing {
flex-wrap: wrap;
}
.help-services-section .app-cost-tier-enterprise-details {
border-bottom: 1px solid rgba(15, 23, 42, 0.1); }
.app-cost-tier-card {
border-radius: 14px;
padding: 18px 14px 14px;
border: 1px solid #d9e2ec;
background: linear-gradient(135deg, #fbfdfa 0%, #f4f9f6 100%);
}
.app-cost-tier-card-mint {
border-color: #9bd4bb;
background: linear-gradient(135deg, #f6fbf7 0%, #eef7f2 100%);
}
.app-cost-tier-card-blue {
border-color: #a9c8f3;
background: linear-gradient(135deg, #f8fbff 0%, #eef4fd 100%);
}
.app-cost-tier-card-darkblue {
border:2px solid #0030b8;
background: linear-gradient(130deg, #051838 0%, #0f2154 45%, #17113b 100%)
}
.app-cost-tier-card-enterprise {
border-color: #ff6b47;
background: linear-gradient(135deg, #fff7f2 0%, #fffaf7 48%, #fff7f7 100%);
}
.app-cost-tier-label,
.app-cost-tier-kicker,
.app-cost-tier-subheading,
.app-cost-tier-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.08em;
}
.app-cost-tier-label {
margin-bottom: 10px;
color: #5b6473;
}
.app-cost-tier-heading {
margin: 0 0 12px;
color: #0f172a;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}
.app-cost-tier-heading-large {
margin-bottom: 12px;
font-size: 19px;
}
.app-cost-tier-price {
margin-bottom: 4px;
color: #0f172a;
font-size: 21px;
font-weight: 700;
line-height: 1.15;
}
.help-services-section .app-cost-tier-price{
font-size:35px;
}
.app-cost-tier-range {
margin-bottom: 12px;
color: #7a8595;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
}
.app-cost-tier-features {
margin: 0;
padding: 0 0 14px;
list-style: none;
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
.app-cost-tier-features li {
position: relative;
margin-bottom: 6px;
padding-left: 15px;
color: #64748b;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}
.app-cost-tier-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #3aa27a;
font-size: 11px;
font-weight: 700;
}
.app-cost-tier-footer,
.app-cost-tier-enterprise-footer {
display: flex;
align-items: center;
gap: 8px;
color: #7a8595;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.app-cost-tier-footer {
padding-top: 10px;
}
.app-cost-tier-footer i {
color: #7a8595;
font-size: 12px;
}
.app-cost-tier-topbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.app-cost-tier-badge {
padding: 7px 10px;
border-radius: 999px;
color: #ff6b47;
background: #fde6dd;
}
.app-cost-tier-badge-muted {
color: #ff6b47;
background: #fce6dd;
}
.app-cost-tier-badge-mint {
color: #15803d;
background: #e3f2ea;
}
.app-cost-tier-badge-blue {
color: #1d4ed8;
background: #e3ecfa;
}
.app-cost-tier-badge-text {
color: #aaa;
background: none !important;
}
.app-cost-tier-badge-text-blue {
color: #0057ff;
background: none !important;
}
.app-cost-tier-enterprise-pricing {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(255, 107, 71, 0.18);
}
.app-cost-tier-price-block {
flex: 0 0 auto;
}
.app-cost-tier-kicker {
margin-bottom: 8px;
}
.app-cost-tier-kicker-orange,
.app-cost-tier-subheading-orange {
color: #ff6b47;
}
.app-cost-tier-kicker-purple,
.app-cost-tier-subheading-purple {
color: #8b5cf6;
}
.app-cost-tier-divider-arrow {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
justify-self: center;
width: 28px;
height: 28px;
margin-top: 0;
border-radius: 50%;
color: #ff6b47;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
.app-cost-tier-enterprise-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(255, 107, 71, 0.18);
}
.app-cost-tier-subheading {
margin: 0 0 12px;
}
.app-cost-tier-features-tight {
padding-bottom: 0;
border-bottom: 0;
}
.app-cost-tier-enterprise-footer {
gap: 20px;
flex-wrap: wrap;
}
@media (max-width: 991px) {
.app-cost-tier-grid,
.app-cost-tier-enterprise-details {
grid-template-columns: 1fr;
}
.app-cost-tier-enterprise-pricing {
grid-template-columns: 1fr;
gap: 12px;
}
.app-cost-tier-divider-arrow {
display: none;
}
}
@media (max-width: 767px) {
.app-cost-tier-card {
padding: 16px 14px;
}
.app-cost-tier-heading {
font-size: 17px;
}
.app-cost-tier-price {
font-size: 19px;
}
.app-cost-tier-features li {
font-size: 13px;
}
}
.app-cost-tier-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}
.app-cost-tier-card-mint:hover {
border-color: #79c5a2;
box-shadow: 0 20px 36px rgba(88, 165, 127, 0.16);
}
.app-cost-tier-card-blue:hover {
border-color: #86b4ed;
box-shadow: 0 20px 36px rgba(89, 140, 226, 0.16);
}
.app-cost-tier-card-enterprise:hover {
transform: translateY(-8px);
border-color: #ff5b33;
box-shadow: 0 22px 40px rgba(255, 107, 71, 0.18);
}
.app-stage-flow-section {
margin: 24px 0 20px;
}
.app-stage-flow-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 185px));
gap: 12px;
justify-content: start;
}
.app-stage-flow-card {
min-height: 92px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 14px;
border: 2px solid #d8e5f6;
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.app-stage-flow-card:hover {
transform: translateY(-4px);
border-color: #9ec2f5;
}
.app-stage-flow-number {
flex: 0 0 26px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
color: #ffffff;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.app-stage-flow-title {
margin: 0;
color: #0f172a;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
@media (max-width: 1024px) {
.app-stage-flow-grid {
grid-template-columns: repeat(3, minmax(0, 185px));
justify-content: center;
}
}
@media (max-width: 767px) {
.app-stage-flow-grid {
grid-template-columns: repeat(2, minmax(0, 185px));
justify-content: center;
}
.app-stage-flow-card {
min-height: 84px;
padding: 14px 12px;
}
.app-stage-flow-title {
font-size: 15px;
}
}
.stage-one-insight-panel {
margin-top: 18px;
}
.stage-one-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.stage-one-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid #9fd8b8;
background: linear-gradient(135deg, #f4fbf7 0%, #ecf9f1 100%);
color: #1f7a57;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.stage-one-metric-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
max-width: 560px;
}
.stage-one-metric-card {
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e5ddd2;
background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.stage-one-metric-value {
margin-bottom: 6px;
color: #0f172a;
font-size: 18px;
font-weight: 700;
line-height: 1.15;
}
.stage-one-metric-label {
color: #8a7f72;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
@media (max-width: 767px) {
.stage-one-chip {
font-size: 12px;
padding: 6px 12px;
}
.stage-one-metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 100%;
}
.stage-one-metric-value {
font-size: 16px;
}
}
@media (max-width: 480px) {
.stage-one-chip-row {
gap: 6px;
}
.stage-one-chip {
white-space: normal;
text-align: center;
}
.stage-one-metric-grid {
grid-template-columns: 1fr;
}
}
.stage-two-insight-panel {
margin-top: 18px;
}
.stage-two-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.stage-two-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid #a9c8f3;
background: linear-gradient(135deg, #f7fbff 0%, #edf4ff 100%);
color: #2563eb;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.stage-two-metric-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
max-width: 560px;
}
.stage-two-metric-card {
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e5ddd2;
background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.stage-two-metric-value {
margin-bottom: 6px;
color: #0f172a;
font-size: 18px;
font-weight: 700;
line-height: 1.15;
}
.stage-two-metric-label {
color: #8a7f72;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
@media (max-width: 767px) {
.stage-two-chip {
font-size: 12px;
padding: 6px 12px;
}
.stage-two-metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 100%;
}
.stage-two-metric-value {
font-size: 16px;
}
}
@media (max-width: 480px) {
.stage-two-chip-row {
gap: 6px;
}
.stage-two-chip {
white-space: normal;
text-align: center;
}
.stage-two-metric-grid {
grid-template-columns: 1fr;
}
}
.stage-three-insight-panel {
margin-top: 18px;
}
.stage-three-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.stage-three-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid #e4ddd2;
background: linear-gradient(135deg, #fffdf9 0%, #f7f3eb 100%);
color: #7c8799;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.stage-three-chip-featured {
border-color: #f8bea6;
background: linear-gradient(135deg, #fff8f3 0%, #fff0e6 100%);
color: #ff6b47;
}
.stage-three-metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-width: 360px;
}
.stage-three-metric-card {
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e5ddd2;
background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.stage-three-metric-value {
margin-bottom: 6px;
color: #0f172a;
font-size: 18px;
font-weight: 700;
line-height: 1.15;
}
.stage-three-metric-label {
color: #8a7f72;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
@media (max-width: 767px) {
.stage-three-chip {
font-size: 12px;
padding: 6px 12px;
}
.stage-three-metric-grid {
max-width: 100%;
}
.stage-three-metric-value {
font-size: 16px;
}
}
@media (max-width: 480px) {
.stage-three-chip {
white-space: normal;
text-align: center;
}
.stage-three-metric-grid {
grid-template-columns: 1fr;
}
}
.stage-four-insight-panel,
.stage-five-insight-panel,
.stage-six-insight-panel {
margin-top: 18px;
}
.stage-four-summary-text,
.stage-five-summary-text,
.stage-six-summary-text {
margin: 0 0 14px;
color: #334155;
font-size: 15px;
line-height: 1.65;
}
.stage-four-chip-row,
.stage-five-chip-row,
.stage-six-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.stage-four-chip,
.stage-five-chip,
.stage-six-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.stage-four-chip {
border: 1px solid #f7b597;
background: linear-gradient(135deg, #fff8f3 0%, #fff0e8 100%);
color: #f97316;
}
.stage-five-chip {
border: 1px solid #9fd8b8;
background: linear-gradient(135deg, #f4fbf7 0%, #ecf9f1 100%);
color: #1f7a57;
}
.stage-six-chip {
border: 1px solid #a9c8f3;
background: linear-gradient(135deg, #f7fbff 0%, #edf4ff 100%);
color: #2563eb;
}
.stage-four-metric-grid,
.stage-five-metric-grid,
.stage-six-metric-grid {
display: grid;
gap: 12px;
}
.stage-four-metric-grid,
.stage-six-metric-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 540px;
}
.stage-five-metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 360px;
}
.stage-four-metric-card,
.stage-five-metric-card,
.stage-six-metric-card {
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e5ddd2;
background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.stage-four-metric-value,
.stage-five-metric-value,
.stage-six-metric-value {
margin-bottom: 6px;
color: #0f172a;
font-size: 18px;
font-weight: 700;
line-height: 1.15;
}
.stage-four-metric-label,
.stage-five-metric-label,
.stage-six-metric-label {
color: #8a7f72;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
@media (max-width: 767px) {
.stage-four-summary-text,
.stage-five-summary-text,
.stage-six-summary-text {
font-size: 14px;
}
.stage-four-chip,
.stage-five-chip,
.stage-six-chip {
font-size: 12px;
padding: 6px 12px;
}
.stage-four-metric-grid,
.stage-five-metric-grid,
.stage-six-metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 100%;
}
.stage-four-metric-value,
.stage-five-metric-value,
.stage-six-metric-value {
font-size: 16px;
}
}
@media (max-width: 480px) {
.stage-four-chip,
.stage-five-chip,
.stage-six-chip {
white-space: normal;
text-align: center;
}
.stage-four-metric-grid,
.stage-five-metric-grid,
.stage-six-metric-grid {
grid-template-columns: 1fr;
}
}
.stage-eight-insight-panel {
margin-top: 18px;
}
.stage-eight-summary-text {
margin: 0 0 14px;
color: #334155;
font-size: 15px;
line-height: 1.65;
}
.stage-eight-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.stage-eight-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid #9fd8b8;
background: linear-gradient(135deg, #f4fbf7 0%, #ecf9f1 100%);
color: #1f7a57;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
.stage-eight-metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-width: 360px;
}
.stage-eight-metric-card {
min-height: 72px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e5ddd2;
background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.stage-eight-metric-value {
margin-bottom: 6px;
color: #0f172a;
font-size: 18px;
font-weight: 700;
line-height: 1.15;
}
.stage-eight-metric-label {
color: #8a7f72;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
@media (max-width: 767px) {
.stage-eight-summary-text {
font-size: 14px;
}
.stage-eight-chip {
font-size: 12px;
padding: 6px 12px;
}
.stage-eight-metric-grid {
max-width: 100%;
}
.stage-eight-metric-value {
font-size: 16px;
}
}
@media (max-width: 480px) {
.stage-eight-chip {
white-space: normal;
text-align: center;
}
.stage-eight-metric-grid {
grid-template-columns: 1fr;
}
}
.stepper-item-postlaunch .stepper-left {
align-items: flex-start;
}
.stepper-item-postlaunch .stepper-line {
display: none;
}
.stepper-item-postlaunch .stepper-right {
padding-bottom: 0;
}
.stepper-postlaunch-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #1f7a57;
color: #ffffff;
font-size: 24px;
font-weight: 500;
line-height: 1;
box-shadow: 0 10px 24px rgba(31, 122, 87, 0.18);
}
@media (max-width: 767px) {
.stepper-item-postlaunch {
gap: 16px;
}
.stepper-postlaunch-icon {
width: 40px;
height: 40px;
font-size: 22px;
}
}
.feature-cost-breakdown-section {
margin: 28px 0 36px;
}
.feature-cost-breakdown-list {
width: 100%;
border-top: 1px solid #e6dfd3;
}
.feature-cost-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid #e6dfd3;
}
.feature-cost-name-wrap {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.feature-cost-dot {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
}
.feature-cost-dot-green {
background: #21885a;
}
.feature-cost-dot-blue {
background: #2468b8;
}
.feature-cost-dot-orange {
background: #eb5b31;
}
.feature-cost-dot-gold {
background: #bc8617;
}
.feature-cost-dot-purple {
background: #8235a5;
}
.feature-cost-name {
margin: 0;
color: #0f172a;
font-size: 16px;
font-weight: 600;
line-height: 1.45;
}
.feature-cost-price {
color: #2468b8;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
white-space: nowrap;
}
.feature-cost-time {
color: #8b7355;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
white-space: nowrap;
}
@media (max-width: 991px) {
.feature-cost-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px 18px;
}
.feature-cost-name-wrap {
grid-column: 1 / -1;
}
.feature-cost-price,
.feature-cost-time {
padding-left: 20px;
}
}
@media (max-width: 575px) {
.feature-cost-breakdown-section {
margin: 22px 0 30px;
}
.feature-cost-row {
grid-template-columns: 1fr;
gap: 10px;
padding: 16px 0;
}
.feature-cost-name {
font-size: 15px;
}
.feature-cost-price,
.feature-cost-time {
padding-left: 20px;
font-size: 14px;
white-space: normal;
}
}
.developer-rate-section {
margin: 28px 0 38px;
}
.developer-rate-list {
display: grid;
gap: 22px;
}
.developer-rate-card {
display: grid;
gap: 10px;
}
.developer-rate-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.developer-rate-country {
margin: 0;
color: #0f172a;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}
.developer-rate-value {
color: #374151;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
white-space: nowrap;
}
.developer-rate-track {
position: relative;
width: 100%;
height: 10px;
overflow: hidden;
border-radius: 999px;
background: #f2eee7;
}
.developer-rate-fill {
display: block;
height: 100%;
border-radius: inherit;
}
.developer-rate-fill-us {
width: 100%;
background: #d55c2f;
}
.developer-rate-fill-europe {
width: 70%;
background: #b57d0d;
}
.developer-rate-fill-uae {
width: 52%;
background: #214d86;
}
.developer-rate-fill-india {
width: 28%;
background: #2f8a49;
}
.developer-rate-note {
margin: 0;
color: #198754;
font-size: 15px;
font-weight: 600;
line-height: 1.45;
}
@media (max-width: 767px) {
.developer-rate-section {
margin: 24px 0 32px;
}
.developer-rate-list {
gap: 18px;
}
.developer-rate-head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.developer-rate-country,
.developer-rate-value {
font-size: 15px;
}
.developer-rate-note {
font-size: 14px;
}
}
@media (max-width: 480px) {
.developer-rate-track {
height: 8px;
}
.developer-rate-country {
font-size: 14px;
}
.developer-rate-value,
.developer-rate-note {
font-size: 13px;
}
}
.blog10-cost-card-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
margin-top: 28px;
}
.blog10-cost-card {
min-height: 126px;
padding: 18px 20px;
border-radius: 16px;
background-color: rgba(232, 235, 245, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
backdrop-filter: blur(4px);
}
.blog10-cost-card-label {
margin-bottom: 10px;
color: #aaa;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.blog10-cost-card-value {
color: #fff;
font-size: 16px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
.blog10-cost-card-total {
background: rgba(0, 86, 212, 0.30); border: 1px solid #3B82F6
}
.blog10-cost-card-total .blog10-cost-card-label,
.blog10-cost-card-total .blog10-cost-card-value {
color: #ffffff;
}
@media (max-width: 1199px) {
.blog10-cost-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.blog10-cost-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.blog10-cost-card {
min-height: 112px;
padding: 16px;
border-radius: 14px;
}
.blog10-cost-card-label {
font-size: 11px;
margin-bottom: 8px;
}
.blog10-cost-card-value {
font-size: clamp(17px, 4.8vw, 22px);
}
}
@media (max-width: 480px) {
.blog10-cost-card-grid {
grid-template-columns: 1fr;
}
.blog10-cost-card {
min-height: auto;
}
}
.difference-blue-text {
display: inline-flex;
align-items: center;
gap: 8px;
color: #60a5fa;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 20px;
} .instagram-related-services-section {
width: 100%;
}
.instagram-related-services-shell {
padding: 0;
background: transparent;
border-radius: 0;
}
.instagram-related-services-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
.instagram-related-service-card {
min-height: 100%;
padding: 24px 20px;
background: #ffffff;
border: 1px solid rgba(2, 59, 226, 0.14);
border-radius: 18px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
display: flex;
flex-direction: column;
}
.instagram-related-service-icon {
font-size: 30px;
line-height: 1;
margin-bottom: 14px;
color: #023be2;
}
.instagram-related-service-icon i {
display: inline-flex;
line-height: 1;
}
.instagram-related-service-label {
margin: 0 0 10px;
color: #023be2;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.instagram-related-service-title {
margin: 0 0 12px;
color: #101828;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}
.instagram-related-service-text {
margin: 0 0 18px;
color: #667085;
font-size: 13px;
line-height: 1.8;
}
.instagram-related-service-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: auto;
margin-bottom: 16px;
}
.instagram-related-meta-box {
min-width: 0;
padding: 10px 12px;
background: #f8f9fa;
border: 1px solid rgba(2, 59, 226, 0.08);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.instagram-related-meta-box strong {
color: #101828;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.instagram-related-meta-box span {
color: #667085;
font-size: 11px;
line-height: 1.2;
}
.instagram-related-service-link {
color: #023be2;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
transition: color 0.25s ease, transform 0.25s ease;
}
.instagram-related-service-link:hover {
color: #00a1c5;
}
@media (max-width: 991px) {
.instagram-related-services-grid {
grid-template-columns: 1fr;
}
.instagram-related-service-card {
padding: 22px 18px;
}
}
@media (max-width: 575px) {
.instagram-related-services-grid {
gap: 14px;
}
.instagram-related-service-title {
font-size: 17px;
}
.instagram-related-service-text {
font-size: 13px;
line-height: 1.7;
}
.instagram-related-service-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.instagram-related-meta-box:last-child {
grid-column: 1 / -1;
}
.instagram-related-service-link {
font-size: 15px;
}
} .service-mini-grid-section {
margin: 28px 0 34px;
}
.service-mini-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.service-mini-card {
min-height: 88px;
padding: 14px 18px;
border: 1px solid rgba(2, 59, 226, 0.14);
border-radius: 14px;
background: #ffffff;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.035);
display: flex;
align-items: center;
gap: 14px;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.service-mini-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
border-color: rgba(2, 59, 226, 0.24);
}
.service-mini-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(248, 250, 252, 0.95);
font-size: 22px;
line-height: 1;
}
.service-mini-icon i {
display: inline-flex;
line-height: 1;
}
.service-mini-icon-blue { color: #2563eb; }
.service-mini-icon-amber { color: #d97706; }
.service-mini-icon-slate { color: #64748b; }
.service-mini-icon-red { color: #ef4444; }
.service-mini-icon-pink { color: #ec4899; }
.service-mini-icon-violet { color: #9333ea; }
.service-mini-icon-green { color: #65a30d; }
.service-mini-icon-teal { color: #14b8a6; }
.service-mini-icon-rose { color: #f43f5e; }
.service-mini-icon-orange { color: #f97316; }
.service-mini-icon-yellow { color: #eab308; }
.service-mini-icon-sky { color: #0ea5e9; }
.service-mini-copy {
min-width: 0;
}
.service-mini-label {
margin: 0 0 4px;
color: #7b8597;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.service-mini-title {
margin: 0;
color: #111827;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
@media (max-width: 1199px) {
.service-mini-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.service-mini-grid-section {
margin: 24px 0 30px;
}
.service-mini-grid {
gap: 12px;
}
.service-mini-card {
min-height: 82px;
padding: 13px 14px;
border-radius: 13px;
gap: 12px;
}
.service-mini-icon {
width: 38px;
height: 38px;
border-radius: 10px;
font-size: 20px;
}
.service-mini-title {
font-size: 14px;
}
}
@media (max-width: 575px) {
.service-mini-grid {
grid-template-columns: 1fr;
}
.service-mini-card {
min-height: auto;
}
.service-mini-label {
font-size: 10px;
}
.service-mini-title {
font-size: 14px;
line-height: 1.35;
}
}
.wrong-dev-signs-section {
margin: 26px 0 44px;
}
.wrong-dev-signs-list {
display: grid;
gap: 20px;
}
.wrong-dev-sign-item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.wrong-dev-sign-icon {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(37, 99, 235, 0.28);
color: #2563eb;
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
font-size: 16px;
line-height: 1;
}
.wrong-dev-sign-icon i {
display: inline-flex;
line-height: 1;
}
.wrong-dev-sign-content {
min-width: 0;
}
.wrong-dev-sign-title {
margin: 0 0 7px;
color: #111111;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
}
.wrong-dev-sign-text {
margin: 0;
color: #5f6776;
font-size: 14px;
font-weight: 400;
line-height: 1.75;
}
@media (max-width: 767px) {
.wrong-dev-signs-section {
margin: 22px 0 34px;
}
.wrong-dev-signs-list {
gap: 16px;
}
.wrong-dev-sign-item {
gap: 12px;
}
.wrong-dev-sign-icon {
width: 34px;
height: 34px;
flex-basis: 34px;
font-size: 14px;
}
.wrong-dev-sign-title {
margin-bottom: 6px;
font-size: 15px;
}
.wrong-dev-sign-text {
font-size: 13px;
line-height: 1.7;
}
}
@media (max-width: 575px) {
.wrong-dev-signs-section {
margin: 20px 0 30px;
}
.wrong-dev-sign-item {
gap: 10px;
}
.wrong-dev-sign-title {
font-size: 14px;
line-height: 1.4;
}
.wrong-dev-sign-text {
font-size: 12.5px;
line-height: 1.65;
}
} .vendor-checklist-wrap {
margin-top: 28px;
}
.vendor-checklist-card {
background: #F3F4F6;
border:1px solid #E5E7EB;
border-radius: 24px;
padding: 34px 32px;
}
.vendor-checklist-head {
margin-bottom: 28px;
}
.vendor-checklist-title {
margin: 0;
color: #1d1d1b;
font-size: 18px;
font-weight: 700;
}
.vendor-checklist-title-break {
display: block;
margin-top: 2px;
}
.vendor-checklist-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.vendor-checklist-item {
min-width: 0;
}
.vendor-checklist-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.vendor-checklist-label {
width: 100%;
min-height: 46px;
margin: 0;
padding: 14px 16px 14px 14px;
border: 1px solid #e4d9cb;
border-radius: 12px;
background: rgba(255, 255, 255, 0.76);
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.vendor-checklist-box {
width: 18px;
height: 18px;
border: 2px solid #d9cec0;
border-radius: 4px;
background: #fffdf9;
flex: 0 0 18px;
position: relative;
transition: all 0.22s ease;
}
.vendor-checklist-box::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
transform: rotate(45deg) scale(0);
transform-origin: center;
transition: transform 0.18s ease;
}
.vendor-checklist-text {
color: #1f1f1c;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
}
.vendor-checklist-input:checked + .vendor-checklist-label {
border-color: #7dbd74;
background: #f3fbf1;
box-shadow: 0 10px 20px rgba(125, 189, 116, 0.12);
}
.vendor-checklist-input:checked + .vendor-checklist-label .vendor-checklist-box {
border-color: #68b45b;
background: #68b45b;
}
.vendor-checklist-input:checked + .vendor-checklist-label .vendor-checklist-box::after {
transform: rotate(45deg) scale(1);
}
.vendor-checklist-input:focus-visible + .vendor-checklist-label {
outline: 2px solid rgba(2, 59, 226, 0.28);
outline-offset: 3px;
}
@media (max-width: 991px) {
.vendor-checklist-card {
padding: 28px 22px;
border-radius: 22px;
}
.vendor-checklist-title {
font-size: 18px;
}
}
@media (max-width: 767px) {
.vendor-checklist-wrap {
margin-top: 22px;
}
.vendor-checklist-card {
padding: 22px 16px;
border-radius: 18px;
}
.vendor-checklist-head {
margin-bottom: 20px;
}
.vendor-checklist-title {
font-size: 16px;
line-height: 1.5;
}
.vendor-checklist-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.vendor-checklist-label {
min-height: 44px;
padding: 12px 14px 12px 12px;
gap: 10px;
}
.vendor-checklist-text {
font-size: 13.5px;
}
}
@media (max-width: 479px) {
.vendor-checklist-card {
padding: 18px 12px;
border-radius: 16px;
}
.vendor-checklist-box {
width: 17px;
height: 17px;
flex-basis: 17px;
}
}
.blog-app-store-highlight {
margin: 0 0 10px;
color: #0056D4;
font-size: clamp(20px, 10vw, 3rem);
line-height: 0.95;
font-weight: 800;
letter-spacing: -0.05em;
}
@media (max-width: 767px) {
.blog-app-store-highlight {
margin-bottom: 8px;
font-size: clamp(2.2rem, 12vw, 3.4rem);
}
} .app-service-arrow {
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1.5px solid #d1d5db;
color: #6b7280;
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.app-service-card:hover .app-service-arrow {
background: linear-gradient(90deg, #023be2, #00a1c5);
border-color: transparent;
color: #fff;
}
.app-service-arrow i {
transition: transform 0.2s ease;
}
.app-service-card:hover .app-service-arrow i {
transform: rotate(45deg);
} .wcu-feature-popular {
position: relative;
}
.wcu-grid-card.wcu-feature-popular {
padding-top: 24px;
overflow: visible;
}
.wcu-popular-badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, #023be2, #00a1c5);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 20px;
pointer-events: none;
z-index: 1;
} .wcu-grid-card.wcu-feature-popular {
overflow: visible;
}
.wcu-grid-container {
overflow: visible;
}
.wcu-bottom-no{
padding-bottom:80px !important;
}
.clone-capability-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 34px;
border: 1px solid rgba(2, 59, 226, 0.22);
background: rgba(255, 255, 255, 0.82);
}
.clone-capability-card {
min-width: 0;
padding: 28px 24px;
display: flex;
align-items: flex-start;
gap: 16px;
border-right: 1px solid rgba(2, 59, 226, 0.18);
border-bottom: 1px solid rgba(2, 59, 226, 0.18);
transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.clone-capability-card:nth-child(2n) {
border-right: 0;
}
.clone-capability-card:nth-last-child(-n + 2) {
border-bottom: 0;
}
.clone-capability-card:hover {
background: linear-gradient(135deg, rgba(2, 59, 226, 0.05), rgba(0, 161, 197, 0.06));
box-shadow: inset 0 0 0 1px rgba(2, 59, 226, 0.08);
transform: translateY(-2px);
}
.clone-capability-number {
flex: 0 0 auto;
min-width: 46px;
color: #023be2;
font-size: 34px;
line-height: 1;
font-weight: 700;
letter-spacing: -0.04em;
}
.clone-capability-content h3 {
margin: 0 0 10px;
color: #121212;
font-size: 24px;
line-height: 1.25;
font-weight: 700;
}
.clone-capability-content p {
margin: 0;
color: #5c6470;
font-size: 16px;
line-height: 1.75;
}
@media (max-width: 1199px) {
.clone-capability-content h3 {
font-size: 21px;
}
.clone-capability-number {
font-size: 30px;
min-width: 42px;
}
}
@media (max-width: 991px) {
.clone-capability-grid {
grid-template-columns: 1fr;
}
.clone-capability-card {
border-right: 0;
padding: 24px 20px;
}
.clone-capability-card:nth-last-child(-n + 2) {
border-bottom: 1px solid rgba(2, 59, 226, 0.18);
}
.clone-capability-card:last-child {
border-bottom: 0;
}
}
@media (max-width: 767px) {
.clone-capability-card {
gap: 14px;
padding: 20px 16px;
}
.clone-capability-grid {
margin-top: 24px;
}
.clone-capability-number {
min-width: 38px;
font-size: 26px;
}
.clone-capability-content h3 {
font-size: 18px;
margin-bottom: 8px;
}
.clone-capability-content p {
font-size: 14px;
line-height: 1.65;
}
}
@media (max-width: 479px) {
.clone-capability-card {
flex-direction: column;
}
.clone-capability-number {
min-width: auto;
}
} .tech-stack-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px 30px;
margin-top: 60px;
}
.tech-stack-category {
color: #0664d8;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
text-transform: capitalize;
}
.tech-stack-list {
list-style: none;
padding: 0;
margin: 0;
}
.tech-stack-list li {  color: #fff;  font-size: 16px;  font-weight:500px;  margin-bottom: 12px;  transition: color 0.3s ease;}
.tech-stack-list li:hover {
color: #ffffff;
} @media (max-width: 1200px) {
.tech-stack-grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
}
@media (max-width: 991px) {
.tech-stack-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.tech-stack-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.tech-stack-category {
font-size: 1.1rem;
}
} .help-services-section .app-cost-tier-card:first-child .app-cost-tier-features {
border-bottom: none;
} .app-cost-most-chosen {
position: relative;
overflow: visible;
}
.app-cost-chosen-pill {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: #f59e0b;
color: #fff;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 4px 16px;
border-radius: 20px;
white-space: nowrap;
z-index: 2;
}
.app-cost-tier-card-darkblue .app-cost-tier-features li,
.app-cost-tier-card-darkblue .app-cost-tier-features li::before,
.app-cost-tier-card-darkblue .app-cost-tier-footer,
.app-cost-tier-card-darkblue .app-cost-tier-footer span,
.app-cost-tier-card-darkblue .app-cost-tier-footer i {
color: #fff;
} .dev-process-section {
margin: 40px 0;
width: 100%;
}
.dev-process-container {
display: flex;
justify-content: space-between;
align-items: stretch;
background: #f4f4f4;
border-radius: 35px;
border: 1px solid #e0e0e0;
overflow: hidden;
}
.dev-process-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 10px;
border-right: 1px solid #e0e0e0;
transition: all 0.3s ease;
cursor: pointer;
}
.dev-process-item:hover {
background: rgba(2, 59, 226, 0.06);
}
.dev-process-item:last-child {
border-right: none;
} .dev-process-circle {
width: 36px;
height: 36px;
background: #000;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
margin-bottom: 14px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.dev-process-circle.plus-circle {
background: #148064;
}
.dev-process-info h3 {
font-size: 13px;
font-weight: 700;
color: #2d3436;
margin-bottom: 4px;
line-height: 1.2;
}
.dev-process-info p {
font-size: 11px;
color: #95a5a6;
margin: 0;
font-weight: 500;
}
@media (max-width: 991px) {
.dev-process-container {
flex-wrap: wrap;
border-radius: 25px;
}
.dev-process-item {
flex: 0 0 33.33%;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.dev-process-item:nth-child(3n) {
border-right: none;
}
.dev-process-item:nth-last-child(-n+1) {
border-bottom: none;
}
}
@media (max-width: 767px) {
.dev-process-item {
flex: 0 0 50%;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.dev-process-item:nth-child(2n) {
border-right: none;
} .dev-process-item:last-child {
border-bottom: none;
}
}
@media (max-width: 480px) {
.dev-process-item {
flex: 0 0 50%;
border-right: 1px solid #e0e0e0 !important;
border-bottom: 1px solid #e0e0e0 !important;
}
.dev-process-item:nth-child(2n) {
border-right: none !important;
}
.dev-process-item:last-child {
flex: 0 0 100%;
border-right: none !important;
border-bottom: none !important;
} .dev-process-item:nth-last-child(1) {
border-bottom: none !important;
}
}
.feature-stage-label {
font-size: 12px;
text-transform: uppercase;
color: #6c757d;
font-weight: 500;
margin-bottom:5px;
letter-spacing: 0.5px;
}
.feature-stage-label.yellow {
color: #dc831a;
}
.feature-depth-card .chat-solution-card:first-child {
border: 1px solid #dc831a !important;
background-color: rgba(220, 131, 26, 0.1) !important; 
} .blog-table-progress-wrapper {
width: 100%;
max-width: 140px;
}
.blog-table-progress-bg {
height: 7px;
background-color: #f1f5f9;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.blog-table-progress-fill {
height: 100%;
background: #d97706; border-radius: 10px;
transition: width 0.8s ease-in-out;
}
.tech-stack-summary-bar {
background: #0b0d10;
color: #fff;
padding: 16px 24px;
border-radius: 0 0 14px 14px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -1px;
}
.tech-stack-summary-label {
color: #94a3b8;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
}
.tech-stack-summary-value {
color: #d97706;
font-size: 17px;
font-weight: 700;
font-family: 'Inter', sans-serif;
}
@media (max-width: 1024px) {
.blog-tech-stack-table td:nth-child(5)::before {
content: attr(data-label);
font-weight: 700;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-right: 0;
flex-shrink: 0;
color: #64748b;
}
.blog-table-progress-wrapper {
max-width: 100%;
margin-top: 5px;
}
}
@media (max-width: 767px) {
.tech-stack-summary-bar {
flex-direction: column;
gap: 8px;
text-align: center;
padding: 18px 15px;
}
.tech-stack-summary-value {
font-size: 15px;
}
}
@media (max-width: 1024px) { .col-w42 { width: auto !important; } } .help-services-section .app-cost-tier-features li {
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
padding: 10px 0 10px 22px;
margin-bottom: 0;
}
.help-services-section .app-cost-tier-features li:last-child {
border-bottom: none;
}
.help-services-section .app-cost-tier-card-darkblue .app-cost-tier-features li {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.help-services-section .app-cost-tier-card-darkblue .app-cost-tier-features li:last-child {
border-bottom: none;
}
.help-services-section .app-cost-tier-features li::before {
top: 11px;
} .grid-container .card {
min-height: 0;
min-width: 0;
}
.grid-container .person-img, 
.grid-container .hero-img {
min-height: 0;
min-width: 0;
flex-shrink: 0;
} .pillars-slider-container {
overflow: hidden;
margin-right: calc((100vw - var(--section-width)) / -2 - 20px);
margin-top: 50px;
padding-bottom: 20px;
}
@media (max-width: 1024px) {
.pillars-slider-container {
margin-right: 0;
overflow: hidden;
}
}
.smart-pillars-grid {
display: flex;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
gap: 24px;
}
.pillar-card {
background: #ffffff;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
border: 1px solid #eef2f6;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
flex: 0 0 calc(33% - 12px); }
.pillar-top {
background-color: #F6F7F9;
padding: 35px 25px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.pillar-svg {
color: #94a3b8;
margin-bottom: 50px;
}
.pillar-bottom {
padding: 30px 25px;
background: #ffffff;
flex: 1;
display: flex;
flex-direction: column;
}
.pillar-title {
font-size: 1.25rem;
font-weight: 550;
color: #111827;
margin-bottom: 18px;
}
.pillar-desc {
font-size: 0.95rem;
color: #4b5563;
line-height: 1.6;
margin: 0;
margin-bottom: 10px;
}
.pillar-list {
list-style: none;
padding: 0;
margin: 20px 0 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pillar-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
color: #374151;
font-weight: 500;
}
.pillar-tick {
color: #0056D4;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.pillar-divider {
height: 1px;
background-color: #e5e7eb;
margin: 25px 0;
width: 100%;
}
.pillar-link {
display: flex;
align-items: center;
gap: 8px;
color: #023be2;
font-weight: 700;
font-size: 0.95rem;
text-decoration: underline;
text-underline-offset: 4px;
transition: gap 0.3s ease;
}
.pillar-link:hover {
gap: 12px;
color: #0030b8;
}
.pillar-arrow {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2.5;
} .slider-dots {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #d1d5db;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #023be2;
transform: scale(1.2);
} @media (max-width: 1200px) {
.pillar-card {
flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 1024px) {
.pillar-card {
flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 768px) {
.pillar-card {
flex: 0 0 100%; }
}
.bg-blue{
background:#0b101e !important;
} .smart-pillars-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
.pillar-smart-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 24px;
position: relative;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
height: 100%;
min-height: auto;
}
.pillar-smart-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.04);
border-color: var(--card-color);
}
.pillar-smart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.pillar-smart-badge {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 4px 12px;
border-radius: 6px;
background: var(--card-bg-light);
color: var(--card-color);
}
.pillar-smart-arrow {
width: 18px;
height: 18px;
transition: transform 0.4s ease;
}
.pillar-smart-card:hover .pillar-smart-arrow {
transform: translate(4px, -4px);
}
.pillar-smart-title {
font-size: 25px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 12px;
color: #1a1a1a;
}
.pillar-smart-desc {
font-size: 15px;
color: #4b5563;
line-height: 1.5;
margin-bottom: 20px;
}
.pillar-smart-bullets {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 16px;
margin-bottom: 24px;
list-style: none;
padding: 0;
}
.pillar-smart-bullet {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
line-height: 1.4;
}
.pillar-smart-bullet::before {
content: '';
display: inline-flex;
width: 18px;
height: 18px;
min-width: 18px;
border: 1.8px solid var(--card-color);
border-radius: 50%;
flex-shrink: 0;
background-color: var(--card-color);
background-clip: content-box;
padding: 4.8px;
margin-top: 2px;
box-sizing: border-box;
}
.pillar-smart-footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid #f3f4f6;
}
.pillar-smart-tags-label {
font-size: 14px;
font-weight: 500;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 8px;
display: block;
} .card-ai {
--card-color: #023be2;
--card-bg-light: rgba(2, 59, 226, 0.08);
}
.card-saas {
--card-color: #0d9488;
--card-bg-light: rgba(13, 148, 136, 0.08);
}
.card-web {
--card-color: #059669;
--card-bg-light: rgba(5, 150, 105, 0.08);
}
.card-mobile {
--card-color: #d97706;
--card-bg-light: rgba(217, 119, 6, 0.08);
}
@media (max-width: 991px) {
.smart-pillars-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.pillar-smart-card {
padding: 30px;
}
.pillar-smart-title {
font-size: 24px;
}
.pillar-smart-bullets {
grid-template-columns: 1fr;
}
.pillar-smart-desc {
font-size: 15px;
}
} .help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
} .help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) .app-cost-tier-heading,
.help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) .app-cost-tier-price {
color: #ffffff;
} .help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) .app-cost-tier-features li,
.help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) .app-cost-tier-footer,
.help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) .app-cost-tier-footer span,
.help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) .app-cost-tier-footer i {
color: #b4b8ca;
} .help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) .app-cost-tier-features li {
border-bottom-color: rgba(255, 255, 255, 0.1);
} .help-services-section.bg-blue .app-cost-tier-card:not(.app-cost-tier-card-darkblue) .app-cost-tier-features {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.caseStudy-arrows {
display: flex;
gap: 15px;
flex-shrink: 0;
}
.caseStudy-arrow {
width: 54px;
height: 54px;
border-radius: 50%;
border: 1px solid #e2e8f0;
background: #fff;
color: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.caseStudy-arrow:hover {
background: var(--brand-blue);
color: #fff !important;
border-color: var(--brand-blue);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(2, 59, 226, 0.2);
}
.caseStudy-arrow i {
transition: color 0.3s ease;
}
.caseStudy-arrow:hover i {
color: #fff;
}
.caseStudy-slider-viewport {
overflow: hidden;
margin-bottom: 40px;
}
.caseStudy-slider-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.caseStudy-case-card {
min-width: 100%;
flex: 0 0 100%;
}
.caseStudy-slider-progress {
display: flex;
align-items: center;
gap: 30px;
margin-top: 50px;
opacity: 1 !important;
visibility: visible !important;
position: relative;
z-index: 10;
}
.caseStudy-progress-track {
flex: 1;
height: 8px;
background: #cbd5e1; border-radius: 10px;
overflow: hidden;
position: relative;
border: 1px solid rgba(0,0,0,0.05);
}
.caseStudy-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: var(--gradient-blue);
border-radius: 10px;
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
box-shadow: 0 0 10px rgba(2, 59, 226, 0.3);
} @media (max-width: 991px) {
.caseStudy-header-row {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.caseStudy-nav-group {
max-width: 100%;
}
.caseStudy-slider-progress {
gap: 20px;
}
}
@media (max-width: 768px) {
.caseStudy-arrow {
width: 46px;
height: 46px;
font-size: 1rem;
}
.caseStudy-slider-progress {
gap: 15px;
}
}
@media (max-width: 480px) {
.caseStudy-slider-progress {
gap: 20px;
}
.caseStudy-progress-track {
width: 100%;
}
.caseStudy-arrows {
align-self: flex-end;
}
} .blog-app-store-cta .blog-roi-list li {
color: #cbd5e1; }
.blog-app-store-cta .blog-roi-list li strong {
color: #9ca3af; } .status-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin: 30px 0;
}
.status-card {
background: #ffffff;
border-radius: 14px;
overflow: hidden;
border: 1px solid #eef2f6;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
height: 100%;
}
.status-header {
padding: 14px 20px;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex;
align-items: center;
gap: 12px;
}
.status-header.good {
background: #052e16; color: #4ade80; }
.status-header.bad {
background: #450a0a; color: #f87171; }
.status-card-good {
border: 1.5px solid #22c55e !important;
}
.status-card-bad {
border: 1.5px solid #ef4444 !important;
}
.status-body {
padding: 24px;
flex-grow: 1;
}
.status-list {
list-style: none;
padding: 0;
margin: 0;
}
.status-list li {
position: relative;
padding-left: 28px;
margin-bottom: 15px;
font-size: 14.5px;
line-height: 1.6;
color: #4b5563;
}
.status-list li::before {
content: "→";
position: absolute;
left: 0;
color: #94a3b8;
font-weight: 700;
}
@media (max-width: 768px) {
.status-grid {
grid-template-columns: 1fr;
}
} .featured-service-card {
background: linear-gradient(white, white) padding-box, var(--gradient-blue) border-box;
border: 1px solid transparent;
border-radius: 24px;
padding: 15px;
transition: all 0.3s ease;
}
.featured-card-title {
font-size: 16px;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 12px;
line-height: 1.2;
}
.featured-card-desc {
font-size: 13px;
color: #64748b;
margin-bottom: 0;
line-height: 1.6;
}
.featured-card-btn {
padding: 12px 32px !important;
font-size: 15px !important;
border-radius: 14px !important;
width: auto;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
* webrtc cards inside bg-blue section */
.help-services-section.bg-blue .webrtc-demo-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(2px);
}
.help-services-section.bg-blue .webrtc-demo-card-blue {
border-top: 5px solid #0030b8;
}
.help-services-section.bg-blue .webrtc-demo-title {
color: #ffffff;
}
.help-services-section.bg-blue .webrtc-demo-desc {
color: rgba(255, 255, 255, 0.75);
}
.help-services-section.bg-blue .webrtc-demo-features li {
color: rgba(255, 255, 255, 0.85);
}
.help-services-section.bg-blue .webrtc-demo-features li::before {
color: #0030b8;
}
.help-services-section.bg-blue .webrtc-demo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(37, 99, 235, 0.18);
font-size: 26px;
margin-bottom: 20px;
}
.help-services-section.bg-blue .webrtc-demo-icon i {
font-size: 24px;
color: #ffffff;
}
.help-services-section.bg-blue .webrtc-demo-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.30);
}
.mt{
border:none;
} .about-timeline-wrapper {
margin-top: 60px;
margin-bottom: 40px;
}
.about-timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px 0;
}
.timeline-item {
display: flex;
flex-direction: column;
}
.timeline-marker {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.timeline-icon {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
z-index: 2;
color: #3e332a;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.timeline-line {
height: 2px;
background-color: #D1C7B7;
flex-grow: 1;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-dot {
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #796859;
flex-shrink: 0;
}
.timeline-content {
padding: 0 40px;
}
.timeline-year {
font-size: 24px;
font-weight: 700;
color: #333;
margin-bottom: 5px;
}
.timeline-title {
font-size: 18px;
font-weight: 600;
color: #555;
margin-bottom: 10px;
}
.timeline-text {
font-size: 14px;
color: #666;
line-height: 1.6;
} .icon-yellow { background-color: #fbeaba; }
.icon-green { background-color: #d7e4cc; }
.icon-teal { background-color: #c9dfdc; }
.icon-blue { background-color: #bed5e1; }
.icon-orange { background-color: #fad3b7; }
.icon-red { background-color: #f1cbcb; }
.icon-purple { background-color: #dfd1e6; }
.icon-beige { background-color: #e9dbca; } @media (max-width: 991px) {
.about-timeline {
grid-template-columns: 1fr;
gap: 0;
}
.timeline-item {
flex-direction: row;
gap: 24px;
align-items: stretch;
}
.timeline-marker {
flex-direction: column;
margin-bottom: 0;
width: 70px;
}
.timeline-line {
width: 2px;
height: auto;
flex-grow: 1;
margin: 10px 0;
}
.timeline-dot {
margin: 0;
}
.timeline-item:last-child .timeline-line {
display: none;
}
.timeline-content {
padding-right: 0;
padding-top: 12px;
padding-bottom: 40px;
padding-left:0;
}
} .help-icon-wrapper .help-app-image {
width: 100%;
height: 100%;
border-radius: 16px;
object-fit: contain;
} @media (min-width: 992px) {
.about-timeline .timeline-item:nth-child(5) { order: 8; }
.about-timeline .timeline-item:nth-child(6) { order: 7; }
.about-timeline .timeline-item:nth-child(7) { order: 6; }
.about-timeline .timeline-item:nth-child(8) { order: 5; }
.about-timeline .timeline-item:nth-child(4) {
position: relative;
}
.about-timeline .timeline-item:nth-child(4)::after {
content: "";
position: absolute;
top: 35px;
right: 0;
width: 2px;
height: calc(100% + 40px);
background-color: #D1C7B7;
}
} .horizontal-hero-media {
flex: 1 1 100% !important;
padding: 0 !important;
}
.horizontal-hero-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
@media (min-width: 1550px) {
.horizontal-hero-image {
width: 650px !important; max-width: none !important; }
} .process-left.larger-process {
flex: 0 0 700px !important;
height: 700px !important;
}
.process-left.larger-process .process-image-reveal-wrapper {
height: 650px !important;
}
@media (max-width: 1200px) {
.process-left.larger-process {
flex: 0 0 500px !important;
height: 500px !important;
}
.process-left.larger-process .process-image-reveal-wrapper {
height: 500px !important;
}
} .cage-container { border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); margin: 30px 0; overflow: hidden; }
@media (min-width: 992px) {
.cage-column:not(:last-child) { border-right: 1px solid #e2e8f0; }
}
@media (max-width: 991px) {
.cage-column:not(:last-child) { border-bottom: 1px solid #e2e8f0; }
}
.cage-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 14px; border-radius: 50px; width: fit-content; }
.cage-green .cage-badge { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.cage-blue .cage-badge { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.cage-purple .cage-badge { background: #faf5ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.cage-list { list-style: none; padding: 0; margin: 0; }
.cage-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: #4b5563; line-height: 1.5; margin-bottom: 14px; }
.cage-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
.cage-green .cage-list li::before { background-color: #10b981; }
.cage-blue .cage-list li::before { background-color: #3b82f6; }
.cage-purple .cage-list li::before { background-color: #8b5cf6; }
.timeline-list {
margin: 2.5rem 0;
border-top: 1px solid #eef2f6;
}
.timeline-item-months {
display: flex;
gap: 24px;
padding: 30px 0;
border-bottom: 1px solid #eef2f6;
align-items: flex-start;
}
.timeline-badge {
flex-shrink: 0;
padding: 8px 20px;
background: rgba(59, 130, 246, 0.05);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 50px;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
min-width: 110px;
text-align: center;
}
.timeline-content-months {
flex-grow: 1;
}
.timeline-title-months {
font-size: 18px;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 10px;
}
.timeline-text-months {
font-size: 15px;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
@media (max-width: 640px) {
.timeline-item-months {
flex-direction: column;
gap: 16px;
padding: 25px 0;
}
.timeline-badge {
align-self: flex-start;
min-width: auto;
padding: 6px 16px;
}
} .message-type-card.location-card {
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: left;
overflow: hidden;
}
.location-card-header {
height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
} .location-pin {
width: 48px;
height: 48px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.location-pin-inner {
width: 32px;
height: 32px;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.location-pin-flag {
width: 24px;
height: 24px;
object-fit: cover;
}
.location-badge {
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 6px;
padding: 4px 12px;
font-size: 0.8rem;
font-weight: 600;
color: #1e293b;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.video-modal-content.is-portrait {
max-width: 380px;
aspect-ratio: 9/19;
}
.why-primocys-card {
opacity: 1 !important;
transition: transform 0.1s linear, box-shadow 0.3s ease !important;
will-change: transform;
}
.why-primocys-card:hover {
animation: none !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.why-primocys-card {
opacity: 1 !important;
transition: transform 0.1s linear, box-shadow 0.3s ease !important;
will-change: transform;
}
.why-primocys-card:hover {
animation: none !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.step-flow-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; margin: 40px 0 30px; padding: 10px 0; text-align: center; }
.step-flow-line { position: absolute; top: 38px; left: 8%; right: 8%; height: 2px; background: #e2e8f0; z-index: 0; }
.step-flow-card { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.step-flow-circle {
width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 19px; font-weight: 800; margin-bottom: 16px; position: relative; flex-shrink: 0; transition: transform 0.3s ease;
}
.step-blue { background: #eff6ff; color: #2563eb; }
.step-green { background: #ecfdf5; color: #10b981; }
.step-purple { background: #f5f3ff; color: #6366f1; }
.step-orange { background: #fff7ed; color: #f97316; }
.step-sky { background: #f0f9ff; color: #0284c7; }
.step-flow-card:hover .step-flow-circle { transform: scale(1.1); }
.step-flow-content { display: flex; flex-direction: column; text-align: inherit; }
.step-flow-title { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.step-flow-text { font-size: 13px; color: #64748b; margin: 0; line-height: 1.4; max-width: 240px; }
@media (max-width: 991px) {
.step-flow-container { grid-template-columns: 1fr; gap: 28px; margin: 30px 0 20px; padding-left: 10px; }
.step-flow-line { top: 29px; bottom: 29px; left: 39px; right: auto; width: 2px; height: auto; transform: none; }
.step-flow-card { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; }
.step-flow-text { max-width: 100%; }
}
.step-card-box {
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card-box:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}
.step-pill-badge {
position: absolute;
top: -13px;
right: 24px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border-radius: 20px;
padding: 3px 14px;
font-size: 14px;
font-weight: 700;
color: #1e293b;
z-index: 2;
letter-spacing: 0.2px;
}
.build-banner {
aspect-ratio: 1920 / 620;
width: 100%;
display: flex;
align-items: center;
padding: 0 60px 0 5%;
position: relative;
overflow: hidden;
}
.build-banner-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
@media (max-width: 768px) {
.build-banner {
aspect-ratio: unset;
padding: 40px 20px;
align-items: flex-start;
}
.build-banner::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1;
}
.build-banner .custom-app-cta-content {
position: relative;
z-index: 2;
}
.build-banner .custom-app-cta-title {
color: #fff !important;
}
.build-banner .section-subtitle {
color: #fff !important;
}
}
.build-banner .custom-app-cta-content {
max-width: 600px;
text-align: left;
margin: 0;
}
.build-banner .custom-app-cta-title {
font-size: clamp(32px, 3.8vw, 52px);
}
.build-banner .section-subtitle {
font-size: clamp(16px, 1.4vw, 20px);
} .portfolio-grid.portfolio-grid--horizontal {
display: flex;
flex-direction: column;
gap: 32px;
}
.portfolio-grid--horizontal .portfolio-item {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
min-height: 280px;
border-radius: 16px;
overflow: visible;
padding: 16px;
gap: 16px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}
.portfolio-grid--horizontal .portfolio-item:nth-child(even) {
flex-direction: row-reverse;
}
.portfolio-grid--horizontal .portfolio-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 24px;
}
.portfolio-grid--horizontal .portfolio-item-icon {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 16px;
}
.portfolio-grid--horizontal .portfolio-img-wrap {
flex: 0 0 45%;
max-width: 45%;
min-height: 260px;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.portfolio-grid--horizontal .portfolio-img-wrap::before,
.portfolio-grid--horizontal .portfolio-img-wrap::after {
display: none;
}
.portfolio-grid--horizontal .portfolio-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 12px;
}
@media (max-width: 768px) {
.portfolio-grid--horizontal .portfolio-item,
.portfolio-grid--horizontal .portfolio-item:nth-child(even) {
flex-direction: column;
}
.portfolio-grid--horizontal .portfolio-img-wrap {
flex: none;
max-width: 100%;
height: 220px;
min-height: 220px;
border-radius: 12px;
}
.portfolio-grid--horizontal .portfolio-info {
padding: 24px 20px;
}
} .portfolio-mega-menu .mega-menu-content { padding: 0; }
.portfolio-mega-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .85fr); }
.portfolio-mega-cases { padding: 24px 30px 24px 12px; }
.portfolio-mega-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.portfolio-mega-heading .column-label { margin: 0; }
.portfolio-mega-title { color: #1a1a1a; font-size: 18px; font-weight: 700; text-decoration: none; }
.portfolio-mega-title:hover, .portfolio-featured-link:hover { color: #023be2; }
.portfolio-mega-title i { color: #023be2; font-size: 15px; margin-left: 5px; }
.portfolio-mega-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portfolio-mega-card { align-items: center; border: 1px solid transparent; border-radius: 10px; color: #1a1a1a; display: flex; gap: 13px; min-height: 84px; padding: 10px; text-decoration: none; transition: .25s ease; }
.portfolio-mega-card:hover { background: rgba(2, 59, 226, .05); border-color: rgba(2, 59, 226, .12); transform: translateY(-2px); }
.portfolio-mega-logo {  border-radius: 12px; flex: 0 0 58px; height: 65px; object-fit: contain; padding: 6px; width: 65px; }
.portfolio-mega-card strong, .portfolio-mega-card small { display: block; }
.portfolio-mega-card strong { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.portfolio-mega-card small { color: #6b7280; font-size: 12px; line-height: 1.35; }
.portfolio-mega-featured { background: rgba(2, 59, 226, .045); border-left: 1px solid #eef0f4; padding: 24px; }
.portfolio-mega-featured .column-label { color: #023be2; margin-bottom: 12px; }
.portfolio-featured-image-link { border-radius: 10px; display: block; margin-bottom: 14px; overflow: hidden; }
.portfolio-featured-image-link img { display: block; height: 220px; object-fit: cover; transition: transform .3s ease; width: 100%; }
.portfolio-featured-image-link:hover img { transform: scale(1.04); }
.main-case-study-menu { color: #1a1a1a; font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0 0 7px; }
.portfolio-mega-featured p { color: #6b7280; font-size: 12px; line-height: 1.45; margin: 0 0 12px; }
.portfolio-featured-link { color: #023be2; font-size: 16px; font-weight: 700; text-decoration: none; }
.portfolio-featured-link i { margin-left: 4px; }
@media (max-width: 1199px) { .portfolio-mega-menu { display: none; } }
@media (max-width: 767px) { .portfolio-mega-cards { grid-template-columns: 1fr; } }