/* ======================================================
GLOBAL RESET
====================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-size: var(--fs-body);
color: var(--color-text);
background: #fff;
}
/* Hide scrollbar but allow scrolling */
html, body {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE & Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
/*
body::before{
content:"Desktop";
position:fixed;
top:10px;
right:10px;
background:black;
color:white;
padding:5px 10px;
font-size:12px;
z-index:9999;
}
@media (max-width:1439px){
body::before{content:"Tablet";}
}
@media (max-width:767px){
body::before{content:"Mobile";}
}
*/
/* ======================================================
CONTAINER SYSTEM
====================================================== */
.container {
max-width: 1400px;
padding: 0 25px;
margin: auto;
}
img{ display: block; max-width: 100%;}
/* ======================================================
ROOT DESIGN SYSTEM
Typography + Spacing + Colors + Radius
====================================================== */
:root {
/* =========================
COLOR SYSTEM
========================= */
--color-primary: #101828;
--color-text: #4A5565;
--color-highlight: #239DEA;
--value-icon-bg: #F9FFE5;
--box-border: #dcdcdc;
--color-text-light: #ffffff;
/* =========================
TYPOGRAPHY SYSTEM
Desktop
========================= */
/*    --fs-h1: 65px;
--fs-h2: 52px;
--fs-h3: 40px;
--fs-h4: 30px;
--fs-h5: 22px;
--fs-h6: 18px;
--fs-body: 16px;
--fs-body-xs: 12px;
--fs-body-s: 14px;
--fs-body-md: 18px;
--fs-body-lg: 22px;
--fs-body-xl: 28px;*/
/* Line Heights */
--lh-heading: 1.2;
--lh-body: 1.65;
/* =========================
SPACING SYSTEM
========================= */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 60px;
--space-11: 80px;
/* =========================
Border Radius
========================= */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 100%;
}
/* ======================================================
TABLET TYPOGRAPHY
====================================================== */
@media (min-width:769px) {
:root {
--fs-h1: 45px;
--fs-h2: 38px;
--fs-h3: 32px;
--fs-h4: 26px;
--fs-h5: 20px;
--fs-h6: 18px;
--fs-body: 14px;
--fs-body-xs: 12px;
--fs-body-s: 14px;
--fs-body-md: 16px;
--fs-body-lg: 20px;
--fs-body-xl: 24px;
/* Line Heights */
--lh-heading: 1.1;
--lh-body: 1.55;
--space-1: 4px;
--space-2: 8px;
--space-3: 10px;
--space-4: 14px;
--space-5: 18px;
--space-6: 20px;
--space-7: 26px;
--space-8: 32px;
--space-9: 40px;
--space-10: 50px;
--space-11: 60px;
}
.wrap {
max-width: 90%;
}
}
/* ======================================================
MOBILE TYPOGRAPHY
====================================================== */
@media (max-width:768px) {
:root {
--fs-h1: 32px;
--fs-h2: 26px;
--fs-h3: 24px;
--fs-h4: 22px;
--fs-h5: 18px;
--fs-h6: 16px;
--fs-body: 14px;
--space-1: 3px;
--space-2: 6px;
--space-3: 8px;
--space-4: 12px;
--space-5: 14px;
--space-6: 16px;
--space-7: 20px;
--space-8: 24px;
--space-9: 30px;
--space-10: 36px;
--space-11: 44px;
}
}
/* ======================================================
TYPOGRAPHY ELEMENT STYLES
====================================================== */
h1 {
font-size: var(--fs-h1);
line-height: var(--lh-heading);
color: var(--color-primary);
}
h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
color: var(--color-primary);
}
h3 {
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--color-primary);
}
h4 {
font-size: var(--fs-h4);
line-height: var(--lh-heading);
color: var(--color-primary);
}
h5 {
font-size: var(--fs-h5);
line-height: var(--lh-heading);
color: var(--color-primary);
font-weight:600;	
}
h6 {
font-size: var(--fs-h6);
line-height: var(--lh-heading);
color: var(--color-primary);
}
p,
ul,
ol {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-text);
font-weight: 300;
}
/* ======================================================
PARAGRAPH SIZE UTILITIES
====================================================== */
.text-md {
font-size: var(--fs-body-md);
line-height: var(--lh-body);
}
.text-lg {
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
}
.text-xl {
font-size: var(--fs-body-xl);
line-height: var(--lh-body);
}
/* ======================================================
UTILITY COLOR CLASSES
====================================================== */
.text-primary {
color: var(--color-primary);
}
.text-default {
color: var(--color-text);
}
.text-highlight {
color: var(--color-highlight);
}
.bg-primary {
background: var(--color-primary);
}
.bg-highlight {
background: var(--color-highlight);
}
/* ======================================================
FONT SIZE UTILITIES
====================================================== */
.text-h1 {
font-size: var(--fs-h1);
}
.text-h2 {
font-size: var(--fs-h2);
}
.text-h3 {
font-size: var(--fs-h3);
}
.text-h4 {
font-size: var(--fs-h4);
}
.text-h5 {
font-size: var(--fs-h5);
}
.text-h6 {
font-size: var(--fs-h6);
}
.text-body {
font-size: var(--fs-body);
}
/* ======================================================
SPACING UTILITIES
====================================================== */
/* Margin */
.mt-1 {
margin-top: var(--space-1);
}
.mt-2 {
margin-top: var(--space-2);
}
.mt-3 {
margin-top: var(--space-3);
}
.mt-4 {
margin-top: var(--space-4);
}
.mt-5 {
margin-top: var(--space-5);
}
.mt-6 {
margin-top: var(--space-6);
}
.mt-7 {
margin-top: var(--space-7);
}
.mt-8 {
margin-top: var(--space-8);
}
.mb-4 {
margin-bottom: var(--space-4);
}
.mb-6 {
margin-bottom: var(--space-6);
}
.mb-8 {
margin-bottom: var(--space-8);
}
/* Padding */
.pt-6 {
padding-top: var(--space-6);
}
.pb-6 {
padding-bottom: var(--space-6);
}
.py-6 {
padding: var(--space-6) 0;
}
.px-6 {
padding: 0 var(--space-6);
}
.ml-2 {
margin-left: var(--space-2);
}
/* ======================================================
RADIUS UTILITIES
====================================================== */
.card,
.image-box,
.image-box img {
border-radius: var(--radius-lg);
}
.avatar {
border-radius: var(--radius-full);
}
/* ======================================================
HEADER
====================================================== */
.header {
border-bottom: 1px solid #eee;
position: sticky;
background: #fff;
left: 0; top: 0;
z-index: 999;
width: 100%;
padding:0;
transition:
all 0.3s ease,;
}
.header .container {
max-width: 100%;
display: flex;
align-items: center;
justify-content: space-between
}
.header .logo img,  .header:hover .logo img {
max-width:120px; margin: 8px 0; 
}
.header.on .logo img, .header.on:hover .logo img{  margin: 5px 0; }
.header .logo-home-dark{ display: none;}
.header.on .logo-home-dark{ display: block;}
.header.on .logo-home{ display: none;}
.header:hover .logo-home,  .header.on:hover .logo-home{ display: none;}
.header:hover .logo-home-dark,  .header.on:hover .logo-home-dark{ display: block;}
.header .menu ul li.has-sub>a{ background: url(../images/drop-menu-icon.svg) no-repeat right center; background-size:15px 15px; padding-right:20px}
.home   .header .menu ul li.has-sub>a{ background: url(../images/drop-menu-icon-white.svg) no-repeat right center; background-size:15px 15px; padding-right:20px}
.header.on .menu ul li.has-sub>a{ background: url(../images/drop-menu-icon.svg) no-repeat right center; background-size:15px 15px; padding-right:20px}
.header:hover .menu ul li.has-sub>a{ background: url(../images/drop-menu-icon.svg) no-repeat right center; background-size:15px 15px; padding-right:20px}
.header .menu ul {
display: flex;
gap: 30px;
list-style: none;
}
.header .menu ul li {
padding: 20px 0
}
.header .menu a {
text-decoration: none;
color: var(--color-primary);
font-weight: 500;
}
/* ======================================
NAVIGATION HOVER ANIMATION
====================================== */
.header .menu a {
position: relative;
text-decoration: none;
color: var(--color-primary);
font-weight: 500;
padding: 6px 0;
transition: color .3s ease;
}
.header .menu a:hover {
color: var(--color-primary);
}
.home .header { background: none; border: none;}
.home .header:hover, 
.home .header.on{  
border-bottom: 1px solid #eee;
background: #fff;       
}
.home  .header .menu li>a {color:#fff}
.home .header:hover .menu li>a{ color: var(--color-text);}
.home .header.on .menu li>a{ color: var(--color-text);}
a:focus,
button:focus,
a:focus-visible,
button:focus-visible{
outline: none;
box-shadow: none;
}
/* ======================================
CTA BUTTON HOVER
====================================== */
.header .cta a {
background: var(--color-highlight);
padding: 10px 22px;
border-radius: 40px;
text-decoration: none;
color: var(--color-text-light);
font-weight: 600;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.header .cta a:hover {
transform: translateY(-2px);
background: var(--color-primary)!important; color:#fff!important
}
.header .menu .megamenu {
opacity: 0; visibility: hidden; visibility: collapse;
transition: all ease 0.3s;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid var(--box-border);
}
.header .menu .megamenu a::after,
.header .menu .megamenu a:hover::after {
display: none
}
.header .menu li:hover .megamenu {
opacity: 1; visibility:visible; visibility:unset;
transition: all ease 0.3s;
}
.header .menu .megamenu {
/* background: rgba(0, 0, 0, .8);*/
top: calc(100% + 1px);
left: 0;
position: absolute;
/* min-height: 100vh;*/
overflow-y: auto;
overflow-x: hidden;
width: 100%;
z-index: 9;
padding: 0;
}
.header .menu .megamenu .menu-box {
background: #fff;
padding: 25px;
}
.header .menu .megamenu .wrap {
max-width: 1440px;
padding: 0 25px;
margin: 0 auto;
}
.header .menu .megamenu .megamenu-label {
font-size: var(--fs-body);
color: #9aa0a6;
margin-bottom: var(--space-5);
}
/* GRID */
.header .menu .megamenu .mega-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
/* SERVICE ITEM */
.header .menu .megamenu .megamenu-item {
display: flex;
gap: var(--space-4);
border: 1px solid var(--color-text-light);
padding: var(--space-3) var(--space-3) var(--space-2);
}
.header .menu .megamenu .megamenu-item:hover {
background: #FBFCFD;
border: 1px solid var(--box-border);
border-radius: var(--radius-sm);
}
.header .menu .megamenu .megamenu-item .icon {
min-width: 40px;
height: 40px;
background: var(--value-icon-bg);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--box-border);
}
.header .menu .megamenu .megamenu-item .icon img {
height: 35px;
}
.header .menu .megamenu .megamenu-item h5 {
font-size: 15px;
color: var(--color-primary);
margin-bottom: 6px;
}
.header .menu .megamenu .megamenu-item p {
font-size: 13px;
color: var(--color-text);
line-height: 18px;
}
/* CTA BOX */
.header .menu .megamenu .services-cta {
margin-top: var(--space-9);
background: #eef0f3;
padding: var(--space-7);
border-radius: var(--radius-lg);
display: flex;
justify-content: space-between;
align-items: center;
}
.header .menu .megamenu .cta-text h4 {
font-size: var(--fs-h4);
margin-bottom: var(--space-3);
color: var(--color-primary);
}
.header .menu .megamenu .cta-text p {
font-size: var(--fs-body);
color: var(--color-text);
margin-bottom: var(--space-4);
}
.header .menu .megamenu .btn-outline {
background: var(--color-highlight);
padding: 12px 28px;
border-color: var(--color-highlight);
transition: all ease 0.3s;
}
.header .menu .megamenu .cta-logos img {
height: 55px;
margin-left: 20px;
}
.header .menu .megamenu .mega-grid.insight-menu {
display: flex;
}
.header .menu .megamenu .mega-grid.insight-menu .menu-col {
max-width: 33%;
}
.header .menu .megamenu .mega-grid.insight-menu .menu-col+.menu-col {
max-width: 68%;
}
/* ===============================
NEWS SECTION
=============================== */
.header .btn-outline span{color:#fff}
.header .megamenu .news-grid {
display: flex;
gap: var(--space-7);
width: 100%;
}
/* ===============================
CARD BASE
=============================== */
.header .menu .megamenu .news-card,
.header .menu .megamenu .blog-card {
background: #fff;
border: 1px solid var(--box-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
transition: .3s ease;
}
.header .menu .megamenu .news-card {
max-width: 35%;
}
.header .menu .megamenu .blog-card {
max-width: 65%;
}
/* hover */
.header .menu .megamenu .news-card:hover,
.header .menu .megamenu .blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, .05);
}
/* ===============================
TAG
=============================== */
.header .menu .megamenu .news-tag {
display: inline-block;
background: var(--color-highlight);
padding: 8px 18px;
border-radius: 30px;
font-size: var(--fs-body-s);
font-weight: 600;
margin-bottom: var(--space-4);
color: var(--color-primary);
}
/* ===============================
NEWS CARD
=============================== */
.header .menu .megamenu .news-title {
font-size: var(--fs-h5);
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.header .menu .megamenu .news-divider {
width: 120px;
height: 3px;
background: var(--color-highlight);
margin-bottom: var(--space-4);
}
.header .menu .megamenu .news-text {
font-size: var(--fs-body-s);
line-height: var(--lh-body);
color: var(--color-text);
}
/* ===============================
BLOG CARD
=============================== */
.header .menu .megamenu .blog-image {
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-4);
}
.header .menu .megamenu .blog-image img {
width: 100%;
display: block;
}
.header .menu .megamenu .blog-title {
font-size: var(--fs-h6);
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.header .menu .megamenu .blog-text {
font-size: var(--fs-body-s);
color: var(--color-text);
line-height: var(--lh-body);
}
/* ===============================
RESPONSIVE
=============================== */
@media(max-width:1024px) {
.header .menu .megamenu .news-grid {
grid-template-columns: 1fr;
}
}
/* RESPONSIVE */
@media(max-width:1100px) {
.header .menu .megamenu .mega-grid {
grid-template-columns: repeat(2, 1fr);
}
.header .menu .megamenu .services-cta {
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
}
}
@media(max-width:768px) {
.header .menu .megamenu .mega-grid {
grid-template-columns: 1fr;
}
.header .menu .megamenu .cta-logos {
display: flex;
}
}
.hero{
/*   position:sticky;*/
min-height:100vh;
overflow:hidden;
top: 0px;
}
.hero-bg{
position:absolute;
inset:0;
}
.hero-bg img,
.hero-bg video{
width:100%;
height:100%;
object-fit:cover;
}
/*.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(1,18,50,.95) 0%,
rgba(1,18,50,.85) 35%,
rgba(1,18,50,.35) 70%,
rgba(1,18,50,.1) 100%
);
}*/
.hero-inner{
position:relative;
z-index:2;
min-height:100vh;
display:flex;
align-items:flex-end;
justify-content:space-between;
padding-bottom:60px;
}
.hero-content{
max-width:750px;
}
.hero-content h1{
color:#fff;
margin-bottom:24px;
}
.hero-content p{
color:#fff;
opacity:.85;
margin-bottom:32px;
}
.hero-cert{
flex-shrink:0;
}
.hero-cert img{
display:block;
max-width:250px;
height:auto;
}
.hero-buttons{
display:flex;
gap:16px;
margin-top:40px;
flex-wrap:wrap;
}
.hero-buttons a{
text-decoration:none;
}
/* PRIMARY */
.btn-primary{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-width:190px;
height:58px;
padding:0 28px;
background: var(--color-highlight);
color:#fff;
border-radius:14px;
font-size:16px;
font-weight:600;
transition:.3s ease;
}
.btn-primary:hover{
transform:translateY(-2px);
background:var(--color-highlight);
}
/* SECONDARY */
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-width:220px;
height:58px;
padding:0 28px;
border:1px solid rgba(255,255,255,.4);
color:#fff;
background:transparent;
border-radius:14px;
font-size:16px;
font-weight:600;
transition:.3s ease;
}
.btn-secondary:hover{
background:rgba(255,255,255,.08);
border-color:#fff;
}
@media(max-width:767px){
.hero-inner{
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
gap:30px;
padding-bottom:40px;
}
.hero-content{
max-width:100%;
}
.hero-cert img{
max-width:170px;
}
}
.btn-primary,
.btn-secondary{
position:relative;
overflow:hidden;
border-radius:999px;
transition:all .4s ease;
z-index:1;
}
.btn-primary::before,
.btn-secondary::before{
content:"";
position:absolute;
inset:0;
transform:scaleX(0);
transform-origin:left center;
transition:transform .45s cubic-bezier(.77,0,.175,1);
border-radius:999px;
z-index:-1;
}
.btn-primary::before{
background:#fff;
display:none
}
.btn-secondary::before{
background:#25A8FF;
}
.btn-primary:hover::before,
.btn-secondary:hover::before{
transform:scaleX(1);
}
.btn-primary:hover{
color:#25A8FF;
transform:translateY(-4px);
}
.btn-secondary:hover{
color:#fff;
border-color:#25A8FF;
transform:translateY(-4px);
}
.hero{
perspective:1200px;
overflow:hidden;
}
.hero-bg{
position:absolute;
inset:0;
transform-style:preserve-3d;
will-change:transform;
}
.hero-bg video,
.hero-bg img{
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.3) translateZ(0);
will-change:transform;
}
/* ======================================================
CLIENTS
====================================================== */
/* ======================================================
CLIENTS
====================================================== */
.home-clients {
padding: var(--space-4) 0 ;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #ccc;
position: relative;
z-index: 9;
background: #fff;
}
.home-clients-wrap {
display: flex;
align-items: center;
justify-content:center;
gap: var(--space-7);
overflow:hidden
}
form a {color:#0d0d0d; text-decoration:underline}
form a:hover{ text-decoration:none}
/* TEXT */
.home-clients-text {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 260px;
}
.home-clients-text b {
color: var(--color-primary);
font-size: var(--fs-h4);
}
.home-clients-text span {
font-size: var(--fs-body);
color: var(--color-text);
}
/* LOGOS */
.home-clients-logos {
display: flex;
align-items: center;
gap: var(--space-8);
}
.home-clients-logos img {
height: 80px;
opacity: .8;
transition: .3s ease;
}
.home-clients-logos img:hover {
opacity: 1;
transform: scale(1.05);
}
/* ========================================
Ai Lab Section style
======================================== */
.ai-labs-section{
padding: var(--space-11) 20px;
background:#fff;
overflow:hidden;
position: relative;
}
.ai-logo-wrap{
text-align:center;
margin-bottom:var(--space-9);
}
.ai-logo{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
font-size:90px;
line-height:1;
margin-bottom:12px;
font-weight:700;
}
.ai-text{
background: linear-gradient(
180deg,
#6DB9FF 0%,
#3F8FEA 45%,
#1F6FD4 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
margin-right:5px
}
.labs-text{
color:var(--color-primary);
font-weight: 600;
}
.powered-by{
position:relative;
display:inline-block;
font-size:var(--fs-body);
color:var(--color-primary);
}
.powered-by::before,
.powered-by::after{
content:"";
position:absolute;
top:50%;
width:80px;
height:1px;
background:var(--color-highlight);
}
.powered-by::before{
right:100%;
margin-right:10px;
}
.powered-by::after{
left:100%;
margin-left:10px;
}
.ai-content{
max-width:900px;
margin:auto;
text-align:center;
}
.ai-heading{
font-size:var(--fs-h3);
margin-bottom:var(--space-5);
}
.ai-heading span{
color:var(--color-highlight);
}
.ai-description{
max-width:820px;
margin:auto;
}
.ai-video{
margin:var(--space-10) auto 0;
max-width: 1100px;
}
.ai-video video{
width:100%;
border-radius:var(--radius-md);
display:block;
}
/* Animation Initial State */
.ai-text,
.labs-text,
.powered-by,
.ai-heading,
.ai-description,
.ai-video{
opacity:0;
}
.ai-text{
transform:translateX(-120px);
}
.labs-text{
transform:translateX(120px);
}
.powered-by{
transform:translateY(80px);
}
.ai-heading,
.ai-description,
.ai-video{
transform:translateY(60px);
}
/* Tablet */
@media(max-width:991px){
.ai-logo{
font-size:70px;
}
.ai-content{
max-width:100%;
}
.header:hover .menu ul li.has-sub>a{background:none}
.header:hover .menu ul li>a{font-size:18px; text-transform:uppercase}
.header .menu .megamenu .menu-box{  background:#070707;/*
linear-gradient(
180deg,
rgba(16,24,40,.95),
rgba(9,9,9,.98)
); */
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,.08);
box-shadow:
0 18px 40px rgba(0,0,0,.5),
inset 0 1px rgba(255,255,255,.04);}
.header .menu .megamenu .menu-box .icon{ display:none}
.header .menu .megamenu .menu-box li{ border:0!important;}
.header .menu .megamenu .menu-box a, .header .menu .megamenu .megamenu-item h5{color:#fff!important; border:0!important}
.header .menu .megamenu .megamenu-item h5{font-size:16px}
.header .menu .megamenu .menu-box a { padding:7px 0}
}
/* Mobile */
@media(max-width:767px){
.ai-labs-section{
padding:var(--space-10) var(--space-4);
}
.ai-logo{
font-size:48px;
}
.powered-by::before,
.powered-by::after{
width:40px;
}
.ai-heading{
font-size:var(--fs-h3);
}
.ai-video{
margin-top:var(--space-8);
}
}
/* ========================================
SECTION
======================================== */
.image-content {
padding: 50px 0;
position: relative;
background: #F9FAFB;
}
/* top right pattern */
.image-content::after {
content: "";
position: absolute;
left: -340px;
bottom: -70px;
width: 400px;
height: 400px;
background: url(../images/rotate_img.svg) no-repeat;
background-size: 100% 100%;
z-index: 9;
animation: rotateCircle 10s linear infinite;
transform-origin: center center;
}
/* bottom left pattern */
.image-content::before {
content: "";
position: absolute;
right: 10%;
top: 120px;
width: 70px;
height: 70px;
background: url(../images/filler-circle.svg) no-repeat;
background-size: contain;
animation: rotateCircle 10s linear infinite;
transform-origin: center center;
}
@keyframes rotateCircle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ========================================
LAYOUT
======================================== */
.image-content .image-content-wrap {
display: flex;
align-items:center;
justify-content: space-between;
gap: 80px;
}
.image-content.bg-white {
background: #fff;
}
.image-content.reverse .image-content-wrap {
flex-direction: row-reverse;
}
.image-content.reverse .image-content.reverse::before {
display: none;
}
/* ========================================
LEFT CONTENT
======================================== */
.image-content .i-content-left {
max-width: 660px;
position: relative;
text-align: left;
margin-bottom: 30px;
}
.image-content .i-content-left h2 {
margin-bottom: 20px;
max-width: 610px;
}
.image-content .i-content-left p {
margin-bottom: 30px;
max-width: 580px;
}
/* ========================================
RIGHT IMAGE
======================================== */
.image-content .i-content-right {
position: relative;
min-width: 450px;
}
.image-content .i-content-right img {
width: 100%;
border-radius: 20px;
display: block;
z-index: 3;
position: relative;
}
.image-content .i-content-right::before,
.business-types .business-right .image-box::before {
content: "";
position: absolute;
top: -40px;
right: -50px;
width: 260px;
height: 220px;
background: url(../images/image-right-top-pattern.svg) no-repeat top right;
background-size: contain;
}
/* bottom left pattern */
.image-content .i-content-right::after,
.business-types .business-right .image-box::after
{
content: "";
position: absolute;
left: -70px;
bottom: -30px;
width: 260px;
height: 220px;
background: url(../images/image-bottom-left-pattern.svg) no-repeat left bottom;
background-size: contain;
}
.image-content.reverse .i-content-right::before {
right: 10%;
top: 0;
}
.image-content.reverse .i-content-right::after {
left: 10%;
bottom: 0;
}
/* ========================================
EXPERIENCE CARD
======================================== */
.image-content .experience-card {
position: absolute;
right: -20px;
bottom: -20px;
background: var(--color-highlight);
padding: 25px;
border-radius: 18px;
color: var(--color-text-light);
width: fit-content;
box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
animation: floatCard 6s ease-in-out infinite;
z-index: 9;
color: var(--color-primary)
}
.image-content .experience-card p {
font-size: 22px;
font-weight: 500;
color: var(--color-text-light);
margin: 0;
padding: 0;
max-width: 180px;
}
.image-content .exp-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: -10px;
}
.image-content .exp-number {
font-size: var(--fs-h1);
font-weight: 700;
color: var(--color-text-light);
}
.image-content .exp-icon {
width: 60px;
}
/* ========================================
FLOAT ANIMATION
======================================== */
@keyframes floatCard {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
/* ========================================
BUTTON
======================================== */
.btn-outline {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border: 1px solid var(--color-primary);
text-decoration: none;
color: var(--color-primary);
transition: .3s;
position: relative;
border-radius: 50px;
overflow: hidden;
align-items: center;
}
.btn-outline .arrow-wrap {
position: relative;
width: 18px;
height: 18px;
overflow: hidden;
}
.btn-outline .arrow {
position: absolute;
inset: 0;
transition: transform 1s cubic-bezier(0.4, 0, 0, 1);
will-change: transform;
}
.btn-outline .arrow img {
width: 20px;
margin-left: 3px;
}
.btn-outline .arrow-old {
transform: translate(0, 0);
}
.btn-outline .arrow-new {
transform: translate(-120%, 120%);
}
.btn-outline:hover .arrow-old {
transform: translate(120%, -120%);
}
.btn-outline:hover .arrow-new {
transform: translate(0, 0);
}
/* Border aniamtion */
.btn-outline::after,
.btn-outline::before {
content: "";
position: absolute;
inset: 0;
border-radius: 3px;
pointer-events: none;
border: 1px solid transparent;
transition: .4s ease;
}
.btn-outline:hover::after,
.btn-outline:hover::before {
transform: scaleX(1) scaleY(1);
}
/* blue */
.btn-outline.blue {     
color: var(--color-text-light);
background:var(--color-highlight);
border: none;
}
/* partner btn & aniamtion end */
/* ===== TITLE ROW ===== */
.title-row {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
padding: 0 0 40px;
justify-content: space-between;
width: 100%;
}
.title-row-left {
width: 740px;
}
.title-row h2 {
margin-bottom: var(--space-4);
}
.title-row-description{ max-width: 800px;}
.title-row:has(.title-row-right:empty) {
grid-template-columns: 1fr;
}
.sub-title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
color: var(--color-highlight);
text-transform: uppercase;
}
.sub-title-arrow svg {
width: auto;
display: block;
fill: var(--color-highlight);
stroke: var(--color-highlight);
/* animation: arrowMove 1.5s ease-in-out infinite;*/
}  
.title-row-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.title-row-right p{ margin-bottom: 15px; display: inline-block;
}
/* Arrow animation */
@keyframes arrowMove {
0% {
transform: translateX(0);
opacity: 0.6;
}
50% {
transform: translateX(8px);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 0.6;
}
}
/* core values */
.values-section {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 650px;
padding: 0;
}
/* Item */
.value-item {
display: flex;
align-items: flex-start;
gap: 18px;
}
/* Icon box */
.icon-box {
min-width: 56px;
height: 56px;
border-radius: 14px;
background: var(--color-light);
display: flex;
align-items: center;
justify-content: center;
}
.icon-box img {
width: 26px;
height: 26px;
object-fit: contain;
}
/* Content */
.value-content h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
color: var(--color-primary);
}
.value-content p {
font-size: 15px;
line-height: 1.6;
color: var(--color-text);
margin: 0;
}
/* Agile process under core value */
/* Agile process under core value */
.benefits {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
padding: 40px 0;
}
/* Box */
/* Agile process under core value */
.benefits {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
padding: 40px 0;
}
/* Box */
.slant-card {
position: relative;
background: #F9FAFB;
text-align: center;
border: 1px solid var(--box-border);
overflow: hidden;
border-radius: 20px;
transition: all ease 0.3s;
text-decoration: none;
}
.slant-card:hover {
background:#fff;
box-shadow: 0 0 20px rgba(35,157, 234, .05);
border: 1px solid var(--color-highlight);
}
a.slant-card p, a.slant-card h3 { text-decoration: none;}
a.slant-card:hover h3{ color: var(--color-primary)!important;}
a.slant-card:hover p{ color: var(--color-text)!important;}
/*
.slant-card .box::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 1px;
height: calc(100% - 15.8px);
background: var(--box-border);
}
// bottom border 
.slant-card::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: calc(100% - 35px);
height: 1px;
background: var(--box-border);
}
// diagonal border
.slant-card::after {
content: "";
position: absolute;
right: -25px;
bottom: -13px;
width: 35px;
height: 95px;
border: 1.4px solid #dcdcdc;
transform: rotate(55deg) translate(22px, 22px);
background: #fff;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
*/
.slant-card .box {
padding: 25px;
}
/* Icon */
.slant-card .icon {
margin-bottom: 20px;
}
.slant-card  img {
width: 40px;
height: 40px;
margin-bottom: 20px;
}
/* Text */
.slant-card h3 {
font-size: var(--fs-body-md);
font-weight: 600;
color: var(--color-primary);
line-height: 1.4;
margin-bottom: var(--space-3);
}
.slant-card p{ font-size: var(--fs-body-s);}
@media (max-width:1140px)
{
.values-section {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 22px;
max-width: 650px;
width: 100%;
}
}
/* ================================
Stat Section
================================ */
.stats-section {
position: relative;
padding: 0 0 var(--space-11);
font-family: 'Poppins', sans-serif;
color:var(--color-text);
background: var(--color-text-light);
}
.stats-section h2,
.stats-section p {
text-align: center;
color: var(--color-text-light);
position: relative;
z-index: 1;
;
}
.stats-section h2+p {
margin: var(--space-3) 0 var(--space-11);
}
/* overlay */
/*  .stats-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(16, 24, 40, 0.95),
rgba(16, 24, 40, 0.85));
}
*/
/* container */
/* ======================
Heading
====================== */
.stats-section .stats-heading {
text-align: center;
max-width: 700px;
margin: auto;
margin-bottom: var(--space-10);
}
.stats-section .stats-heading h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
margin-bottom: var(--space-3);
color: #fff;
}
.stats-section .stats-heading p {
font-size: var(--fs-body-md);
color: #c7cde0;
}
/* ======================
Grid
====================== */
.stats-section .stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-7);
}
/* ======================
Card
====================== */
.stats-section .stat-card {
position: relative;
padding: var(--space-8) var(--space-2) var(--space-2);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
text-align: center;
overflow: hidden;
}
/* ======================
Running Border (SVG)
====================== */
/*
.stats-section .border-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.stats-section .border-svg rect {
fill: none;
stroke: var(--color-highlight);
stroke-width: 1;
stroke-linecap: round;
stroke-dasharray: 120 800;
animation: borderRun 4s linear infinite;
filter: drop-shadow(0 0 6px var(--color-highlight));
}
@keyframes borderRun {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -920;
}
}
*/
/* ======================
home stat Numbers
====================== */
.stats-section .stat-number {
font-size: var(--fs-h1);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--space-3);
}
/* ======================
Text
====================== */
.stats-section .stat-card h4 {
font-size: var(--fs-body-md);
margin-bottom: var(--space-3);
color: var(--color-text);
margin-top: var(--space-4);
font-weight: normal;
position: relative;
display: inline-block;
}
.stats-section .stat-card h4::before{
content:"";
width:22px;
height:22px;
border-radius:50%;
background:rgba(35,157,234,.15);
flex-shrink:0; position: absolute; left:-10px; top:-2px 
}
.stats-section .stat-card p {
font-size: var(--fs-body);
color: #c7cde0;
line-height: var(--lh-body);
}
.business-types {
padding: var(--space-11) 0 200px;
background: url(../images/business-bg.jpg) no-repeat bottom center;
background-size: 100%;
overflow-x: hidden;
position: relative;
}
.home .business-types {background: url(../images/business-bg1.jpg) no-repeat top center; min-height:100vh; background-size:cover
; /*	background-attachment:fixed */
}
@media (max-width:767px){
.home .business-types{
background:
url("../images/business-bg.jpg") bottom center / cover no-repeat;
/*background-attachment:fixed*/
}
}
.business-types .business-wrapper {
display: flex;
gap: var(--space-10);
align-items: flex-start;
}
/* LEFT */
.business-types .business-left {
flex: 1.2;
}
.business-types .section-tag {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
font-size: var(--fs-body);
color: var(--color-text);
}
.business-types .section-tag .line {
width: 40px;
height: 2px;
background: var(--color-text);
display: inline-block;
}
.business-types .business-left h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
color: var(--color-primary);
margin-bottom: var(--space-5);
}
.business-types .intro-text {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-text);
margin-bottom: var(--space-8);
max-width: 600px;
}
/* ======================
Business Type section Home page
====================== */
.business-types .business-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
gap: 40px;
}
.business-types .business-item {
background: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: var(--space-7);
border: 1px solid #E0E0E0;
}
.business-types .business-item .icon {
margin-bottom: var(--space-4);
}
.business-types .business-item h3 {
font-size: var(--fs-h6);
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.business-types .business-item p {
font-size: var(--fs-body);
color: var(--color-text);
line-height: var(--lh-body);
max-width: var(--space-2 0);
}
/* RIGHT IMAGE */
.business-types .business-right {
flex: 1;
position: relative;
padding-left: var(--space-5);
}
.business-types .business-right .image-box {
position: relative;
}
.business-types .business-right .image-box img {
width: 100%;
border-radius: var(--radius-lg);
display: block;
position: relative;
}
/* CARD */
.business-types .business-right .image-card {
position: absolute;
left: -40px;
bottom: 40px;
background: var(--color-primary);
color: #fff;
padding: var(--space-7);
border-radius: var(--radius-md);
max-width: 320px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
animation: floatCard 6s ease-in-out infinite;
}
.business-types .business-right .image-card h4 {
font-size: var(--fs-h4);
margin-bottom: var(--space-3);
color: var(--color-text-light);
}
.business-types .business-right .image-card p {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: #ddd;
}
/* ==========================================
SERVICES SECTION
========================================== */
.services{
position:relative;
overflow:hidden;
background:#fff;
padding: var(--space-11) 0;
}
.services-wrapper{
position:relative;
}
.services-list{
position:relative;
background: #fff;
}
/* ==========================================
ROW
========================================== */
.service-row{
position:relative;
display:grid;
grid-template-columns:
70px
220px
minmax(300px,1fr)
80px;
align-items:center;
gap:40px;
min-height:140px;
padding:25px 30px;
text-decoration:none;
color:#111;
border-bottom:1px solid #d8d8d8;
transition:.35s ease;
background: #fff;
}
/* ==========================================
NUMBER
========================================== */
.service-no{
font-size:24px;
font-weight:500;
line-height:1;
}
/* ==========================================
TITLE
========================================== */
.service-title{
font-size:22px;
font-weight:600;
line-height:1.2;
max-width:220px;
}
/* ==========================================
DESCRIPTION
========================================== */
.service-desc{
max-width:450px;
font-size:16px;
line-height:1.8;
}
/* ==========================================
ARROW
========================================== */
.service-arrow{
display:flex;
justify-content:flex-end;
}
.service-arrow span{
width:58px;
height:58px;
border:1px solid var(--box-border);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
transition:.35s ease;
transform:scale(0.7);
transition:all eas 0.3s
}
.service-arrow:hover span, .service-row:hover .service-arrow span {transform:scale(0.9);}
.service-row span .service_arrow_icon {
color: #2D2D2D;
transition: color 0.3s ease;
}
.service-row:hover span .service_arrow_icon {
color:var(--color-highlight);
}
/* ==========================================
HOVER IMAGE
========================================== */
.service-image{
position:absolute;
right:130px;
top:50%;
width:140px;
height:140px;
transform:
translateY(-50%)
rotate(-10deg)
scale(.8);
opacity:0;
visibility:hidden;
z-index:20;
pointer-events:none;
}
.service-image img{
width:100%;
height:100%;
object-fit:cover;
transition:all ease 0.3s;
transform:scale(0.8);
border-radius:16px;
box-shadow:
0 20px 40px rgba(0,0,0,.15);
}
.services{
position:relative;
overflow:hidden;
}
.services::after {
content: "";
position: absolute;
left: -330px;
top: -50px;
width: 400px;
height: 400px;
background: url(../images/rotate_img.svg) no-repeat;
background-size: 100% 100%;
z-index: 9;
animation: rotateCircle 10s linear infinite;
transform-origin: center center;
}
.services::before {
content: "";
position: absolute;
right: 8%;
top: 90px;
width: 70px;
height: 70px;
background: url(../images/filler-circle.svg) no-repeat;
background-size: contain;
animation: rotateCircle 10s linear infinite;
transform-origin: center center;
}
.title-row{
position:relative;
z-index:2;
}
.services-list{
position:relative;
z-index:3;
}
.service-row:hover .service-image{
opacity:1;
visibility:visible;
transform:translateY(-50%) rotate(-10deg) scale(1);
z-index:99; 
}
.service-row:hover .service-image img{
transform:scale(1);}
/* ==========================================
ACTIVE / HOVER
========================================== */
.service-row:hover{
background:#EAEEF2;
color:#0d0d0d;
border-color: #ccc;
position:relative;
z-index:999
}
.service-row:hover .service-arrow span,
.service-row.active-row .service-arrow span{
border-color:var(--color-highlight);
color:#fff;
}
.service-row:hover .service-image{
opacity:1;
visibility:visible;
}
/* ==========================================
Blog Styles Common
========================================== */
/* ===================================
BREADCRUMB
=================================== */
.breadcrumbs{
display:flex;
align-items:center;
gap:10px;
margin-bottom:var(--space-10);
flex-wrap:wrap;
}
.breadcrumbs a,
.breadcrumbs .current{
display:flex;
align-items:center;
gap:6px;
text-decoration:none;
font-size:13px;
line-height:1;
font-weight:400;
}
/* Home & Normal Links */
.breadcrumbs a{
color:var(--color-text)!important;
transition:all .3s ease;
}
.breadcrumbs a:hover{
color:#2F5DA8;
}
/* Home Icon */
.breadcrumb-home svg{
width:14px;
height:14px;
stroke:#7C8796;
stroke-width:2;
transition:.3s;
}
.breadcrumb-home:hover svg{
stroke:#2F5DA8;
}
/* Arrow */
.breadcrumbs .separator{
display:flex;
align-items:center;
color:#9EA8B6;
}
.breadcrumbs .separator svg{
width:12px;
height:12px;
stroke:#9EA8B6;
stroke-width:2;
}
/* Active Page */
.breadcrumbs .current{
color:#2E4D7A;
font-weight:500;
padding-bottom:4px;
border-bottom:3px solid #2F80ED;
margin-bottom:-6px;
}
/* ===================================
COMMON SIDEBAR
=================================== */
.single-sidebar{
position:sticky;
top:120px;
align-self:start;
}
.single-sidebar h4{
font-size:var(--fs-h6);
margin-bottom:var(--space-5);
}
.single-sidebar ul{
list-style:none;
padding:0;
margin:0;
}
.single-sidebar li{
margin-bottom:var(--space-4);
}
.single-sidebar a{
display:flex;
justify-content:space-between;
text-decoration:none;
color:var(--color-text);
transition:.3s ease;
}
.single-sidebar a:hover{
color:var(--color-highlight);
}
.single-sidebar a.active{
color:var(--color-highlight);
font-weight:600;
}
/* ==========================================
Post Card 
========================================== */
.post-card{
height:100%;
}
.post-card a{
display:block;
text-decoration:none;
height:100%;
}
.post-image{
overflow:hidden;
border-radius:var(--radius-md);
margin-bottom:var(--space-4);
}
.post-image img{
width:100%;
height:260px;
object-fit:cover;
display:block;
transition:.5s ease;
}
.post-card:hover img{
transform:scale(1.05);
}
.post-tag{
display:inline-flex;
align-items:center;
padding:5px 10px;
border:1px solid #239DEA;
border-radius:100px;
font-size:11px;
line-height:1;
color:#239DEA;
margin-bottom:var(--space-3);
}
.post-content h3{
font-size:var(--fs-h5);
line-height:1.3;
color:var(--color-primary);
margin-bottom:var(--space-3);
font-weight:500
}
.post-content p{
color:var(--color-text);
margin-bottom:var(--space-4);
line-height:1.7;
}
.post-date{
display:block;
font-size:12px;
color:#999;
}
@media(max-width:991px){
.single-sidebar ul{ display:flex; flex-wrap:wrap; gap:10px}
.single-sidebar li{ display:inline-block; border:1px solid #ccc; border-radius:40px; padding:7px 15px}
.header .menu .megamenu .megamenu-item:hover{background:none!important}
}
/* ==========================================
DESKTOP 1600+
========================================== */
@media(min-width:1600px){
.service-row{
grid-template-columns:
90px
280px
1fr
100px;
min-height:140px;
}
.service-title{
font-size:22px;
}
.service-desc{
font-size:18px;
}
.service-image{
width:180px;
height:180px;
}
}
/* ==========================================
LAPTOP
========================================== */
@media(max-width:1200px){
.service-row{
grid-template-columns:
60px
180px
1fr
70px;
gap:25px;
}
.service-title{
font-size:20px;
}
.service-desc{
font-size:15px;
}
.service-image{
width:120px;
height:120px;
right:100px;
}
}
/* ==========================================
TABLET
========================================== */
@media(max-width:991px){
.service-row{
grid-template-columns:
50px
180px
1fr
60px;
gap:20px;
min-height:100px;
padding:20px 0;
}
.service-no{
font-size:20px;
}
.service-title{
font-size:18px;
}
.service-desc{
font-size:14px;
}
.service-image{
display:none;
}
.service-arrow span{
width:40px;
height:40px;
font-size:16px;
transform:scale(1);
}
.service-arrow span img{width:20px; height:20px; transform:scale(0.9)}
}
/* ==========================================
MOBILE
========================================== */
@media(max-width:767px){
.service-row{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
min-height:auto;
padding:20px;
}
.service-no{
font-size:18px;
}
.service-title{
font-size:22px;
max-width:100%;
}
.service-desc{
max-width:100%;
font-size:14px;
}
.service-arrow{
width:100%;
justify-content:flex-start;
}
.title-row {padding-bottom:20px}
.stats-section .stat-card h4::before{display:none}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media(max-width:480px){
.service-title{
font-size:20px;
}
.service-desc{
font-size:13px;
}
}
/*
.services {
padding: var(--space-10) 0;
background: #fff;
position: relative;
}
.service-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.service-grid .slant-card {
text-align: left;
}
.card-inner {
position: relative;
z-index: 2;
}
.service-card h5 {
font-size: var(--fs-h5);
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.service-card p {
font-size: var(--fs-body);
color: var(--color-text);
line-height: var(--lh-body);
}
.service-grid .icon {
margin: var(--space-1) 0 var(--space-4);
min-width: 56px;
max-width: 56px;
height: 56px;
border-radius: 14px;
background: var(--value-icon-bg);
display: flex;
align-items: center;
justify-content: center;
}
.slant-card .arrow {
position: absolute;
right: 20px;
bottom: 20px;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
border: 1px solid var(--box-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: .35s ease;
background: #fff;
z-index: 3;
}
.slant-card:hover .arrow {
transform: rotate(45deg);
background: var(--color-highlight);
border-color: var(--color-highlight);
}
.slant-card:hover  .icon{ background: var(--color-text-light);}
.slant-card:hover  p, .slant-card:hover  h3{color: var(--color-text-light);} */
/* =========================
SECTION BG
========================= */
.engagement {
background: #f3f4f6 url(../images/gray-noise-bg.png) repeat;
padding: var(--space-11) 0;
position: relative;
}
/* =========================
GRID
========================= */
.engagement-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-7);
margin-top: var(--space-6);
}
/* =========================
CARD
========================= */
.eng-card {
background: #fff;
padding: var(--space-8);
border-radius: var(--radius-md);
border: 1px solid var(--box-border);
display: flex;
flex-direction: column;
gap: var(--space-4);
position: relative;
padding-bottom:100px!important;
}
.eng-card.popular {border: 1px solid var(--color-highlight); box-shadow:  0 0 20px rgba(0, 0, 0, .05);}
/* top icon area */
.eng-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-2);
}
.eng-card-top img {
width: 70px;
}
/* popular tag */
.tag {
background: var(--color-primary);
color: #fff;
padding: 4px 12px;
border-radius: var(--radius-sm);
font-size: 12px;
letter-spacing: 1px;
}
/* title */
.eng-card h4 {
font-size: var(--fs-h5);
line-height: var(--lh-heading);
color: var(--color-primary);
}
/* description */
.eng-card p {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-text);
margin-bottom: var(--space-4);
}
.eng-card strong{ display: block; margin:15px 0 10px; font-size: 18px; font-weight: bold;}
/* list */
.eng-card ul {
padding-left: 18px;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.eng-card li {
font-size: var(--fs-body);
color: var(--color-text);
}
.eng-card .btn-outline {
width: fit-content;
background: var(--color-highlight);
color: var(--color-text-light);
border-color: var(--color-text-light);
position: absolute;
left: 20px;
bottom: 20px;
}
/* =========================
SECTION BACKGROUND
========================= */
.pillars {
background: #071427 url(../images/dark-bg.jpg) no-repeat bottom center;
background-size: cover;
padding: var(--space-11) 0;
color: var(--color-text-light);
}
.pillars h2,
.pillars p {
color: #fff;
}
.pillars .sub-title {
color: var(--color-text-light);
}
.pillars .sub-title-arrow svg {
fill: var(--color-text-light);
stroke: var(--color-text-light);
}
.pillars .btn-outline {
color: var(--color-text-light);
border-color: var(--color-text-light);
}
.pillars .btn-outline:hover {
background: none;
border-color: var(--color-highlight);
}
.pillars .btn-outline:after,
.pillars .btn-outline:before {
display: none;
}
/* =========================
GRID
========================= */
.pillar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
margin-top: var(--space-10);
}
/* =========================
CARD
========================= */
.pillar-card {
position: relative;
background: linear-gradient(180deg, #1d2536, #131a28);
padding: var(--space-7);
border-radius: var(--radius-md);
border: 1px solid rgba(212, 255, 63, 0.3);
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 260px;
}
/* =========================
ICON
========================= */
.pillar-icon {
position: absolute;
top: -22px;
right: 0;
width: 46px;
height: 46px;
background: var(--color-highlight);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
.pillar-icon img {
width: 20px;
}
/* =========================
LABEL
========================= */
.pillar-label {
color: var(--color-highlight);
font-size: var(--fs-body);
letter-spacing: 1px;
font-weight: 600;
}
/* =========================
TITLE
========================= */
.pillar-card h4 {
font-size: var(--fs-h5);
line-height: var(--lh-heading);
color: #fff;
}
/* =========================
TEXT
========================= */
.pillar-card p {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: #c5c8d0;
}
/* =========================
SECTION
========================= */
.industries {
padding: var(--space-11) 0 var(--space-5);
overflow: hidden;
background: url(../images/home-industry-bg.jpg) no-repeat bottom center;
background-size: cover;
}
/* =========================
SLIDER
========================= */
.industries-slider {
padding-top: var(--space-7);
margin-top: var(--space-8);
}
/* =========================
CARD
========================= */
.industry-card {
background: #fff;
border-radius: var(--radius-md);
border: 1px solid var(--box-border);
padding: var(--space-7);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
transition: all .3s ease;
box-shadow: 0 0 20px rgba(0, 0, 0, .05);
margin-bottom: 30px;
}
/* icon */
.industry-icon {
width: 70px;
height: 70px;
background: #f1f4f7;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
.industry-icon img {
width: 32px;
opacity: .8;
}
/* text */
.industry-card span {
font-size: var(--fs-body-md);
color: var(--color-primary);
}
/* hover */
.industry-card:hover {
transform: translateY(-6px);
border-color: var(--color-highlight);
box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}
/* =========================
SECTION
========================= */
.insights {
padding: var(--space-11) 0;
background: #fff;
position: relative;
}
/* ==========================
SLIDER
========================== */
.insights-slider{
position:relative;
margin-top:60px;
z-index:99
}
.insights-slider .swiper-slide{
height:auto;
}
.news-card{
display:block;
text-decoration:none;
}
/* IMAGE */
.news-image{
overflow:hidden;
border-radius:20px;
margin-bottom:24px;
}
.news-image img{
width:100%;
height:300px;
object-fit:cover;
display:block;
transition:.5s ease;
}
.news-card:hover img{
transform:scale(1.06);
}
/* TITLE */
.news-card h4{
font-size:var(--fs-h5);
color:var(--color-primary);
line-height:1.35;
margin-bottom:20px;
min-height:70px;
}
/* READ MORE */
.read-more{
display:inline-flex;
align-items:center;
gap:10px;
color:var(--color-primary);
font-size:var(--fs-body);
}
.read-more svg{
transition:.3s ease;
}
.news-card:hover .read-more svg{
transform:translateX(4px);
}
/* ==========================
ARROWS
========================== */
.swiper-nav{
position:absolute;
top:-60px;
right:0;
display:flex;
gap:10px;
z-index:5;
}
.insight-prev,
.insight-next{
width:42px;
height:42px;
background:#f1f1f1;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.3s ease;
}
.insight-next{
background:#e8f4ff;
color:#239DEA;
}
.insight-prev:hover,
.insight-next:hover{
transform:translateY(-2px);
}
/* ==========================
PAGINATION
========================== */
.insights-slider .swiper-pagination{
position:relative;
margin-top:50px;
}
.insights-slider .swiper-pagination-bullet{
width:10px;
height:10px;
background:#cfcfcf;
opacity:1;
}
.insights-slider .swiper-pagination-bullet-active{
width:36px;
border-radius:30px;
background:#239DEA;
}
.insights{
overflow:hidden;
}
/* slider starts from container left line
but continues to browser right edge */
.insights-slider-wrap{
width:calc(100vw - ((100vw - 1400px) / 2));
margin-left:auto;
padding-left:25px;
margin-top:60px;
}
.insights-slider{
overflow:visible;
}
/* SECTION */
.tech {
padding: var(--space-11) 0;
background: #f8f6f6 url(../images/tech-bg.png) no-repeat right center;
position: relative;
}
.tech-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px 15px;
margin-top: 60px;
}
.tech-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 16px 10px 12px;
background: #fff;
border: 1px solid #dcdcdc;
border-radius: 999px;
transition: all .3s ease;
}
.tech-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.tech-item img {
width: 22px;
height: 22px;
object-fit: contain;
flex-shrink: 0;
}
.tech-item span {
font-size: 14px;
font-weight: 500;
color: #2d2d2d;
white-space: nowrap;
}
/* Tablet */
@media (max-width: 991px) {
.tech-logos {
gap: 16px;
}
.tech-item {
padding: 12px 22px;
}
.tech-item span {
font-size: 16px;
}
}
/* Mobile */
@media (max-width: 767px) {
.tech-logos {
justify-content: center;
margin-top: 10px;
}
.tech-item {
width: calc(50% - 8px);
justify-content: center;
padding: 12px 12px;
}
.tech-item span {
font-size: 11px;
}
.title-row-right {
justify-content: flex-start;}
.insight-prev:hover, .insight-next:hover {
transform: translateY(0);
}
}
/* animation */
@keyframes logoScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ANIMATION */
@keyframes scrollLogo {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.join-team {
padding:  0 0 var(--space-11);
overflow-x: hidden;
position: relative;
}
/* =========================
MIDDLE AREA
========================= */
.join-team .team-middle{
position: relative;
overflow: hidden;
}
.join-team .team-image{
position: relative;
overflow: hidden;
}
.join-team .team-image img{
width: 100%;
height: 560px;
object-fit: cover;
display: block;
transform: scale(1.15);
will-change: transform;
}
.join-team .container{
position: relative;
}
/* Content Card */
.join-team .team-cards{
position: absolute;
left:20px;
bottom: 80px;
max-width: 420px;
width: 100%;
background: #fff;
border-radius: 24px;
padding: 30px;
box-shadow: 0 25px 70px rgba(0,0,0,.12);
z-index: 5;
will-change: transform;
}
.join-team .team-cards h2{ margin-bottom: 20px; font-size: var(--fs-h3);}
.join-team .team-cards p{ margin-bottom: 20px;}
@media(max-width:991px){
.join-team .team-image img{
height: 550px;
}
.join-team .team-cards{
max-width: 450px;
padding: 36px;
bottom: 40px;
}
}
@media (max-width:767px){
.join-team .team-middle{
overflow:hidden;
}
.join-team .team-image img{
height: 490px;
}
.join-team .team-cards{
position:absolute;
left:16px;
right:16px;
bottom:36px;
width:auto;
max-width:none;
padding:24px;
}
.join-team .team-cards h2,
.join-team .team-cards h3{
font-size:20px;
line-height:1;
margin-bottom:12px;
transform: none;
}
.join-team .team-cards p{
font-size:15px;
line-height:1.5;
margin-bottom:16px;
transform: none!important;
}
.join-team .team-image img{
object-position:-347px
}
.inner-hero-badge{font-size:13px!important}
}
/* =========================
BOTTOM AREA
========================= */
.join-team .team-bottom {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--space-7);
align-items: center;
padding: var(--space-10) 0;
}
/* LOCATION CARD */
.join-team .location-card {
background: #fff;
padding: var(--space-7);
border-radius: var(--radius-md);
border: 1px solid var(--box-border);
}
.join-team .location-card li:nth-child(1){min-height:50px}
.join-team .country {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.join-team .country img {
width: 26px;
}
.join-team .location-card ul {
list-style: none;
margin-bottom: var(--space-4);
}
.join-team .location-card li {
font-size: var(--fs-body);
color: var(--color-text);
margin-bottom: var(--space-2);
display: flex;
align-items:flex-start;
gap: 10px;
}
.join-team .btn-dark {
background: var(--color-primary);
color: var(--color-text-light);
padding: 12px 20px;
border-radius: var(--radius-sm);
display: inline-block;
font-size: var(--fs-body);
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
text-decoration: none;
}
/* GLOBAL TEXT BLOCK */
.join-team .global-block h3 {
font-size: var(--fs-h3);
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.join-team .global-block p {
font-size: var(--fs-body);
color: var(--color-text);
margin-bottom: var(--space-5);
}
.join-team .arrow-circle {
width: 50px;
height: 50px;
background: var(--color-highlight);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.testimonials {
padding: var(--space-11) 0;
background: #080C14;
position: relative;
}
.testimonials .title-row a.btn-outline{border-color:#fff; color:#fff}
.testimonials .sub-title{ color: var(--color-text-light);}
.testimonials  .sub-title-arrow svg {
width: auto;
display: block;
fill: var(--color-text-light);
stroke:var(--color-text-light)
/* animation: arrowMove 1.5s ease-in-out infinite; */
}
.testimonials h2 {
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--color-text-light);
margin-bottom: var(--space-3);
}
.testimonials p{ color: var(--color-text-light);}
.testimonials .heart {
color: red;
}
.testimonials-slider {
padding-top: 30px;
}
/* =========================================
CARD
========================================= */
.testimonial-card{
position: relative;
background: #191D25;
border: 1px solid #888888;
border-radius: 20px;
padding: 34px 26px 24px;
height: 100%;
transition: .3s ease;
}
.testimonial-card:hover{
transform: translateY(-4px);
}
/* =========================================
QUOTE ICON
========================================= */
.testimonial-card .quote-icon{
position: absolute;
top: -20px;
left: 24px;
width: 52px;
height: 52px;
border-radius: 50%;
background: #141417;
border: 1px solid #F7BF24;
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-card .quote-icon img{
width: 18px;
}
/* =========================================
CONTENT
========================================= */
.testimonial-card .testimonial-content{
padding-bottom: 28px;
margin-bottom: 24px;
border-bottom: 1px solid #888888;
min-height:140px
}
.testimonial-card .testimonial-content p{
font-size: 14px;
line-height: 1.7;
margin: 10px 0 0;
color: var(--color-text-light);
}
.testimonial-card .testimonial-content a{
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.testimonial-card .testimonial-content a{
color: var(--color-text-light);
}
/* =========================================
FOOTER
========================================= */
.testimonial-card .testimonial-footer{
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 70px;
}
/* =========================================
CLIENT INFO
========================================= */
.testimonial-card .client-info{
display: flex;
align-items: center;
gap: 16px;
width:100%;
color: var(--color-text-light);
}
.testimonial-card .client-image{
width: 62px;
height: 62px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--color-text-light);
flex-shrink: 0;
display: none;
}
.testimonial-card .client-image img{
width: 100%;
height: 100%;
object-fit: cover;
border: 2px solid #fff;
border-radius: 50%;
}
.testimonial-card .client-meta h5{
font-size: 16px;
line-height: 1.2;
font-weight: 500;
margin-bottom: 6px;
color: var(--color-text-light);
}
.testimonial-card .client-meta span{
display: block;
font-size: 13px;
margin-bottom: 4px;
white-space: wrap;
}
.testimonial-card .client-meta small{
font-size: 14px;
color: #7b8190;
}
/* =========================================
COMPANY LOGO
========================================= */
.testimonial-card .company-logo img{
max-width: 70px;
max-height: 40px;
object-fit: contain;
}
/* =========================================
PAGINATION
========================================= */
.testimonials-slider .swiper-pagination {
position: relative;
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* Inactive dots */
.testimonials-slider .swiper-pagination-bullet {
width: 10px;
height: 10px;
border-radius: 999px;
border: none;
background: rgba(148, 163, 184, 0.6); /* gray dot */
opacity: 1;
margin: 0 !important;
transition: all 0.35s ease;
}
/* Active pill */
.testimonials-slider .swiper-pagination-bullet-active {
width: 38px;
height: 10px;
background: #e5e7eb; /* light gray/white like screenshot */
border-radius: 999px;
box-shadow: 0 0 12px rgba(229, 231, 235, 0.25);
}
.testimonials-slider .swiper-pagination-bullet {
transform: scale(1);
}
.testimonials-slider .swiper-pagination-bullet-active {
transform: scale(1.02);
}
/* =========================================
RESPONSIVE
========================================= */
@media(max-width:991px){
.testimonial-card{
padding: 30px 22px 22px;
}
.testimonial-card   .client-meta h5{
font-size: 18px;
}
}
@media(max-width:767px){
.testimonial-card .testimonial-content p { text-align: left;}
.testimonial-card   .client-meta{ text-align: left;}
.testimonials-section{
padding: 0 0 25px;
}
.testimonial-card   .testimonial-content p{
font-size: 15px;
}
}
/* testimonial popup style start */
.testimonial-popup{
max-width: 700px;
width: 100%;
border-radius: 24px;
}
.testimonial-popup .testimonial-popup-inner{
padding: 40px;
background: #fff;
border-radius: 24px;
}
.testimonial-popup .popup-client{
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.testimonial-popup .popup-image{
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background:var(--color-light);
display:flex;
justify-content:center; align-items:center
}
.testimonial-popup .popup-image img{
width: 50px;
height: 50px;
object-fit: contain;
}
.testimonial-popup .popup-meta h4{
font-size: 28px;
margin-bottom: 6px;
color: var(--color-primary);
}
.testimonial-popup .popup-meta span{
display: block;
font-size: 16px;
color: #667085;
}
.testimonial-popup .popup-meta small{
font-size: 15px;
color: #98A2B3;
}
.testimonial-popup .popup-content{
font-size: 15px;
line-height: 1.6;
color: #475467;
}
.testimonial-popup .read-more-btn{
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
}
@media(max-width:767px){
.testimonial-popup .popup-meta h4 {
font-size: 18px;
}
.testimonial-popup-inner {
padding: 0;}
}
/* testimonial popup style end */
.site-footer {
position: relative;
background: #0D0D0D;
}
/* CTA */
.footer-cta {
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 1200px;
background: var(--color-highlight);
border-radius: var(--radius-md);
z-index: 10;
}
.site-footer .footer-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-9);
color: var(--color-primary);
max-width: 100%;
}
.cta-left span{color:#fff; text-transform: uppercase;}
.site-footer .footer-cta-inner .sub .line {
height: 1px;
background: var(--color-text-light);
display: block;
max-width: 100px;
margin-bottom: 3px;
}
.site-footer .footer-cta h2 {
font-size: var(--fs-h2);
color: var(--color-text-light);
line-height: var(--lh-heading);
margin-top: var(--space-3);
font-weight: 400;
}
.site-footer .btn-outline {
background: var(--color-text-light);
color: var(--color-highlight);
border-color:var(--color-text-light) ;
}
.site-footer .btn-outline:after, .site-footer .btn-outline:before{ display: none;}
/* FOOTER GRID */
.site-footer .footer-grid{
display:grid;
grid-template-columns: 1.3fr 3fr 1fr 1.2fr;
gap:40px;
}
.footer-grid .company p{
color:#99A1AF;
margin-top: 10px;
}
.site-footer .footer-col.company img{max-width:210px; height:auto; margin-top:15px}
.site-footer .footer-col h5{
color:#fff;
font-size:22px;
margin-bottom:35px;
position:relative;
}
.site-footer .footer-col h5:after{
content:"";
position:absolute;
left:0;
bottom:-12px;
width:60px;
height:2px;
background:#00AEEF;
}
.iso-text{
font-size:12px;
color:#fff;
margin:12px 0 25px;
}
.footer-services-menu{
display:grid;
grid-template-columns:repeat(2,minmax(180px,1fr));
gap:0 20px;
}
.footer-services-menu,
.footer-links-menu{
list-style:none;
padding:0;
margin:0;
}
.footer-services-menu li,
.footer-links-menu li{
margin-bottom:14px;
color:#99A1AF;
}
.footer-services-menu a,
.footer-links-menu a{   color:#99A1AF; text-decoration: none;}
.footer-services-menu a:hover,
.footer-links-menu a:hover{   text-decoration: underline;}
.site-footer .footer-bottom-inner{ max-width: 100%;}
.reach-us ul{
list-style:none;
padding:0;
margin:0;
}
.reach-us li{
display:flex;
gap:12px;
align-items:flex-start;
margin-bottom:18px;
}
.reach-us li img{
width:16px;
margin-top:4px;
}
.reach-us li span,
.reach-us li a{
color:#99A1AF;
line-height:1.6;
text-decoration:none;	
}
.reach-us li i{color:var(--color-highlight); font-size:16px; margin:2px 0 -2px}
.office-info i{font-size:18px; margin:1px 0 -1px}
.linkedin-link{
display:flex;
align-items:center;
gap:10px;
margin-top:30px;
color:#fff;
text-decoration:none;
}
.linkedin-link img{
width:20px;
}
.site-footer .footer-main{
padding:90px 0 60px;
}
/* BOTTOM */
.site-footer .footer-bottom {
border-top: 1px solid #1f1f1f;
padding: var(--space-5) 0;
color: #99A1AF;
}
.site-footer .footer-bottom a{ text-decoration: none;}
.site-footer .footer-bottom a:hover{ text-decoration: underline;}
.site-footer .footer-bottom ul{ list-style: none; display: flex; gap: 15px;}
.site-footer .footer-bottom p {
color: #99A1AF;
}
.site-footer .footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.site-footer .footer-links {
display: flex;
gap: var(--space-4);
}
.site-footer .footer-links a {
color: #99A1AF;
font-size: var(--fs-body);
}
.site-footer .social-link {color:#99A1AF; text-decoration: none;}   
.site-footer .social-link i {color:#fff; text-decoration: none; font-size: 16px; margin-right: 10px;}
@media (max-width:1199px){
.footer-grid{
grid-template-columns:1fr 1fr;
gap:50px;
}
.footer-grid .company{
grid-column:1 / -1;
max-width:100%;
}
.services-col{
grid-column:1 / -1;
}
.footer-services-menu{
columns:2;
column-gap:60px;
}
}
@media (max-width:991px){
.footer-grid{
grid-template-columns:1fr;
gap:40px;
}
.footer-services-menu{
columns:2;
column-gap:40px;
}
.footer-col h5{
margin-bottom:25px;
}
.site-footer .footer-main {
padding: 120px 0 60px;
}
}
@media (max-width:767px){
.site-footer{
padding-top:60px;
}
.footer-grid{
grid-template-columns:1fr;
gap:35px;
}
.footer-services-menu{
columns:1;
}
.footer-col h5{
font-size:18px;
}
.company{
text-align:left;
}
.reach-us li{
margin-bottom:14px;
}
.footer-bottom-inner{
flex-direction:column;
gap:15px;
text-align:center;
}
.footer-bottom ul{
flex-wrap:wrap;
justify-content:center;
}
.site-footer .footer-main {
padding: 30px 0 30px;
}
.footer-services-menu {
display: grid;
grid-template-columns: repeat(1, minmax(180px, 1fr));}
.testimonials {
padding: var(--space-11) 0 0;
}
.testimonials-slider .swiper-pagination {
margin-top: 25px;}
}
/* ==========================================
1. OVERLAY & BACKGROUND LOCKS
========================================== */
.cf7-success-message{
display:none;
text-align:center;
padding:60px 30px;
}
.cf7-success-message h3{
margin-bottom:10px;
}
.cf7-success-message.active{
display:block;
}
.cf7-form-hidden{
display:none;
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .65);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .4s ease;
z-index: 99999;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
/* Force-freezes background web layout when modal opens */
body.modal-open {
overflow: hidden !important;
position: fixed !important; 
width: 100% !important;
height: 100% !important;
}
/* ==========================================
2. MAIN MODAL CONTAINER (BOX)
========================================== */
.modal-box {
position: relative; /* Anchor layout structure for absolute items */
width: min(1200px, 95vw);
height: 90vh; /* Replaced max-height for perfect scroll-zone calculations */
max-height: 800px; /* Prevents stretching to absurd limits on ultra-wide screens */
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 20px;
background: #fff;
/* Animation foundations */
opacity: 0;
transform: scale(.92) translateY(40px);
transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease;
}
.modal-overlay.active .modal-box {
opacity: 1;
transform: scale(1) translateY(0);
}
.modal-box.closing {
transform: translateY(-40px) scale(0.92);
opacity: 0;
}
/* ==========================================
3. INTERNAL FLEX WRAPPERS
========================================== */
.modal-content {
display: flex;
flex: 1;
min-height: 0; 
overflow: hidden; /* Clears double scrollbar engine conflict */
}
/* ==========================================
4. LEFT COLUMN SECTION
========================================== */
.modal-left {
flex: 0 0 45%;
width: 45%;
height: 100%;
background: url('../images/modal-bg.jpg') center/cover;
position: relative;
display: flex;
align-items: center; 
justify-content: flex-start;
/* Animation properties */
transform: translateX(-80px);
opacity: 0;
transition: all 0.6s ease;
}
.modal-overlay.active .modal-left {
transform: translateX(0);
opacity: 1;
}
.modal-left::after {
content: "";
position: absolute;
inset: 0;
background: rgba(10, 20, 40, 0.2);
}
.left-inner {
position: relative;
z-index: 1;
padding: clamp(24px, 4vw, 60px);
color: #fff;
}
.left-inner h2 {
font-size: clamp(26px, 2.5vw, 42px);
line-height: 1.4;
color: var(--color-text-light);
}
.left-inner span {
color: var(--color-highlight);
}
.left-inner p {
margin-top: 20px;
color: #cfcfcf;
}
/* ==========================================
5. RIGHT COLUMN SECTION (SCROLL TRACK ZONE)
========================================== */
.modal-right {
flex: 1;
width: 55%;
height: 100%;
padding: clamp(20px, 3vw, 40px);
overflow-y: auto !important; /* Force browser processing here explicitly */
overflow-x: hidden;
overscroll-behavior: contain !important; /* Block mouse-wheel from escaping popup boundary */
-webkit-overflow-scrolling: touch; /* Fast scroll acceleration on iOS */
/* Animation properties */
transform: translateX(80px);
opacity: 0;
transition: all 0.6s ease;
}
.modal-overlay.active .modal-right {
transform: translateX(0);
opacity: 1;
transition-delay: 0.15s;
}
/* Form block structural layout fix */
.modal-right .wpcf7 {
height: auto;
width: 100%;
}
/* ==========================================
6. INNER FORM FORM-ELEMENTS
========================================== */
.modal-right input, 
.modal-right select, 
.modal-right textarea {
width: 100%;
border: none;
border-bottom: 1px solid #ddd;
padding: 12px 5px;
margin-bottom: 18px;
outline: none;
}
.form-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.captcha input {
width: 80px;
border-bottom: 1px solid #ddd;
}
.modal-right button {
background: var(--color-highlight);
border: none;
padding: 12px 30px;
border-radius: 80px;
font-weight: bold;
cursor: pointer;
color: #fff;
}
.cf7-success-message  button{margin:30px 0 0}
.notes {
margin-top: 15px;
font-size: 13px;
color: #666;
}
/* ==========================================
7. CLOSE COMPONENT
========================================== */
.close-btn {
position: absolute;
top: 18px;
right: 22px;
font-size: 22px;
cursor: pointer;
z-index: 10; /* Brought forward to clear background boundaries */
}
/* ==========================================
8. TRUSTED BADGE COMPONENT
========================================== */
.trusted {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #f5f5f5;
border-top: 1px solid #eee;
}
.trusted-left h4 {
margin-bottom: 5px;
font-size: 22px;
}
.trusted-left p {
font-size: 14px;
}
.trusted-logos {
display: flex;
gap: 30px;
align-items: center;
}
.trusted-logos img {
height: 84px;
opacity: 0.8;
}
/* ==========================================
9. RESPONSIVE BREAKPOINTS (MEDIA QUERIES)
========================================== */
@media(max-width: 991px) {
.modal-box {
height: 95vh;
max-height: none;
}
/* Switch engine: Scroll the entire card on mobile, not individual segments */
.modal-content {
flex-direction: column;
overflow-y: auto !important; 
}
.modal-left, 
.modal-right {
width: 100%;
height: auto;
}
.modal-right {
overflow-y: visible !important; /* Disable double container loop processing */
}
.left-inner {
padding: 30px;
}
.left-inner h2 br {
display: none;
}
.trusted {
flex-direction: column;
gap: 15px;
text-align: center;
}
.trusted-logos {
flex-wrap: wrap;
justify-content: center;
}
.trusted-logos img {
height: 54px;
}
.modal-left {
min-height:auto;
height:auto;
flex:auto
}
}
@media (max-width: 767px) {
.modal-overlay {
padding: 20px 16px;
align-items: flex-start;
overflow-y: auto;
box-sizing: border-box;
/* Mobile viewport fix */
min-height: 100dvh;
min-height: 100svh;
}
.modal-box {
width: 100%;
max-height: calc(100dvh - 40px);
max-height: calc(100svh - 40px);
height: auto !important;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
box-sizing: border-box;
}
.modal-right {
padding: 20px;
max-height: calc(100dvh - 40px);
max-height: calc(100svh - 40px);
overflow-y: auto;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.left-inner {
padding: 20px;
}
.left-inner h2 {
font-size: 22px;
line-height: 1.3;
padding-right: 25px;
}
.modal-left {
min-height: auto !important;
height: auto !important;
flex: 0 0 100px !important;
}
.trusted {
display: none;
}
.trusted-logos {
gap: 12px;
}
.trusted-logos img {
height: 40px;
}
.select2-search--dropdown .select2-search__field {
border-radius: 4px !important;
}
.select2-container--open .select2-dropdown {
height: 270px !important;
}
}
/* Update your existing rule to completely freeze the background */
body.modal-open, body.hide-scrollbar {
overflow: hidden !important;
position: fixed !important; 
width: 100% !important;
height: 100% !important;
}
/* Prevent the mouse wheel from escaping into the parent page layout */
.modal-content,
.modal-right {
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch; /* Smooth scroll behavior on iOS */
}
/* Fix close button placement reference */
.modal-box {
position: relative; /* Fixes absolute close button positioning */
}
.modal-box{
width:min(1200px,95vw);
height:min(90vh,900px);
}
.modal-content{
height:100%;
}
.modal-left,
.modal-right{
height:100%;
}
.modal-right{
padding:clamp(18px,2vw,40px);
}
/* Scale typography */
.modal-right,
.modal-right input,
.modal-right textarea,
.modal-right select{
font-size:clamp(13px,0.85vw,16px);
}
/* Reduce spacing */
.modal-right .field{
margin-bottom:clamp(8px,1vh,18px);
}
/* REMOVE DEFAULT CF7 STYLES */
.wpcf7 form {
display: flex;
flex-direction: column;
}
/* INPUTS */
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
width: 100%;
border: none;
border-bottom: 1px solid #ddd;
padding: 12px 5px;
margin-bottom: 18px;
background: transparent;
outline: none;
font-size: 14px;
}
/* TEXTAREA */
.wpcf7 textarea {
height: 80px;
resize: none;
}
/* FORM BOTTOM */
.form-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
/* CAPTCHA */
.captcha input {
width: 80px;
border-bottom: 1px solid #ddd;
}
/* BUTTON */
.wpcf7 input[type="submit"] {
background: var(--color-highlight);
border: none;
padding: 12px 28px;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
color:#fff
}
/* NOTES */
.notes {
margin-top: 15px;
font-size: 13px;
color: #666;
}
/* REMOVE CF7 RESPONSE MESSAGE SHIFT */
.wpcf7-response-output {
margin: 10px 0 0 !important;
}
/* ======================================================
MEDIA LAYOUT ADJUSTMENTS
====================================================== */
@media (min-width:1441px) {
.hero-wrap {
max-width: 1400px !important;
}
}
/* ======================================================
TABLET LAYOUT
====================================================== */
@media (max-width:1024px) {
.title-row-left {
width: 100%;
}
.header .menu a {
font-size: 14px;
}
.media-box {
border-radius: 0;
overflow: hidden;
}
.image-content::after,
.image-content::before {
display: none;
}
.hero-wrap {
flex-direction: column;
}
.hero-right {
flex-direction: row;
}
.hero-wrap {
background-position: right center;
}
/* about section */
.i-content-right {
max-width: 100%;
}
.experience-card {
right: 20px;
bottom: -20px;
}
.image-content .i-content-left.image-content {
max-width: 100%;
}
.image-content .i-content-right {
min-width: 300px;
}
/* core values */
.values-section {
gap: 28px;
}
.value-content h3 {
font-size: 18px;
}
.value-content p {
font-size: 14px;
}
.benefits {
grid-template-columns: repeat(3, 1fr);
}
.stats-section .stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.business-types .business-wrapper {
flex-direction: column;
}
.business-types .business-right .image-card {
left: 20px;
bottom: -40px;
}
.engagement {
padding: var(--space-10) 0;
}
.engagement-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.eng-card {
padding: var(--space-8);
}
.eng-card-top img {
width: 32px;
}
.service-grid {
grid-template-columns: repeat(2, 1fr);
}
.pillar-grid {
grid-template-columns: repeat(2, 1fr);
}
.insights-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.insights-left {
max-width: 100%;
}
.insights-right {
grid-template-columns: 1fr 1fr;
}
.insights .circle-accent {
left: -10px;
}
.tech-head {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.tech .logo-track {
gap: 50px;
}
.tech .logo-track img {
height: 40px;
}
.join-team .team-top {
flex-direction: column;
}
.join-team .team-middle {
grid-template-columns: 1fr;
}
.join-team .team-bottom {
grid-template-columns: 1fr 1fr;
}
.home-clients-wrap {
flex-direction: column;
align-items: flex-start;
}
.home-clients-logos {
gap: var(--space-6);
}
.home-clients-logos img {
height: 60px;
}
.testimonials-slider-row {
background: none;
width: 100%;
min-height: auto;
}
.testimonial-content {
min-height: auto;
}
.testimonial-image {
padding-right: 0;
}
.testimonials-head {
flex-direction: column;
}
.testimonial-card {
grid-template-columns: 1fr;
text-align: center;
}
.testimonial-image img {
width: 200px;
margin: auto;
}
.site-footer .footer-grid {
grid-template-columns: 1fr 1fr;
}
.site-footer .footer-cta-inner {
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
}
}
@media(max-width:991px) {
.header .menu .megamenu {
opacity: 1; visibility: visible; visibility: unset;
transition: all ease 0.3s; display: none;
}
.header .menu {
display: none;
}
.header .menu ul {
/* margin-top: 90px;
padding-bottom: 80px; */
margin-top:0;
padding-bottom:0px
}
.header .menu.active {
display: block;
}
.header .menu .megamenu .mega-grid.insight-menu {
display: block;
}
.header .megamenu .news-grid {
display: block;
margin-top: 20px;
}
.header .menu .megamenu .mega-grid.insight-menu .menu-col,
.header .menu .megamenu .mega-grid.insight-menu .menu-col,
.header .menu .megamenu .news-card,
.header .menu .megamenu .mega-grid.insight-menu .menu-col+.menu-col,
.header .menu .megamenu .blog-card {
width: 100%;
max-width: 100%;
}
.header .menu .megamenu .blog-card {
margin-top: 20px;
}
.header .menu .megamenu .mega-grid {
grid-template-columns: 1fr;
}
.header .menu .megamenu .services-cta {
display: none;
}
.header .menu {
position: absolute;
left: 0;
top: 0;
background: #fff;
width: 100%;
overflow: auto;
z-index: 999;
padding: 25px;
}
.header .menu ul {
display: block;
width: 100%;
min-height: calc(100vh - 159px);
}
.header .menu .megamenu {
position: static;
min-height: auto;
height: auto;
display: none;
}
.header .menu .megamenu .menu-box,
.header .menu .megamenu .wrap {
padding: 0
}
.header .menu .megamenu .megamenu-label {
display: none;
}
.header .menu ul li {
border-bottom: 1px solid var(--box-border);
padding: 10px 15px;
}
.header .menu {
padding: 40px 0 0;
}
/* =========================
MENU TOGGLE
========================= */
.menu-toggle {
z-index: 1001;
width: 26px;
height: 20px;
cursor: pointer;
}
.menu-toggle span {
display: block;
height: 2px;
background: #101828;
margin-bottom: 6px;
transition: .3s;
}
.home  .menu-toggle span {
background: #fff;
}
.home   .on .menu-toggle span {
background: #101828;
}
.home   .header:hover .menu-toggle span, .home   .header.on:hover .menu-toggle span {
background: #101828;
}
.menu-toggle.active span{background:#fff!important}
.header.on .logo img, .header .logo img {
margin: 0;
}
/* CLOSE ICON */
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* =========================
SIDE MENU
========================= */
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 420px;
height: 100vh;
background: #101828;
color: #fff;
z-index: 1000;
transition: .4s cubic-bezier(.77, 0, .175, 1);
display: flex;
flex-direction: column;
}
.mobile-menu.active {
right: 0;
}
/* =========================
HEADER
========================= */
.menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
font-weight: bold;
letter-spacing: 2px;
}
.close-btn {
font-size: 22px;
cursor: pointer;
color: #fff;
}
/* =========================
MENU LIST
========================= */
.menu {
list-style: none;
}
.menu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* MAIN BUTTON */
.menu-btn {
width: 100%;
padding: 18px 20px;
background: none;
border: none;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
cursor: pointer;
}
/* ARROW */
.arrow {
color: #D4FF00;
transition: .3s;
}
/* =========================
SUBMENU
========================= */
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
background: rgba(255, 255, 255, 0.02);
}
.submenu a {
display: block;
padding: 14px 30px;
font-size: 14px;
color: #ccc;
text-decoration: none;
position: relative;
}
/* yellow dot */
.submenu a::before {
content: "";
width: 4px;
height: 4px;
background: #D4FF00;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
/* ACTIVE STATE */
.has-sub.active .submenu {
max-height: 300px;
}
.has-sub.active .arrow {
transform: rotate(180deg);
}
/* =========================
BOTTOM CTA (yellow section)
========================= */
.menu-footer {
margin-top: auto;
background: #D4FF00;
color: #101828;
padding: 0;
font-size: 14px;
}
/* =========================
OVERLAY
========================= */
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: .3s;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
/* ===== SIDE MENU ===== */
.header .menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height:100dvh;
background: #0D0D0D;
z-index: 1000;
transition: .4s cubic-bezier(.77, 0, .175, 1);
overflow-y: auto;
padding: 0;
}
.header .menu.active {
right: 0;
}
/* ===== LINKS ===== */
.header .menu ul li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 0;
}
.header .menu ul li a {
display: flex;
justify-content: flex-start;
padding: 18px 20px;
color: #fff !important;
align-items: center;
position: relative;
}
/* ===== ARROW ===== */
.header .menu ul li.has-sub>a::after {
content:' ';
transition: .3s;
position: absolute;
width:27px;
height:27px;
top: 18px;
right: 15px;
background:url(../images/plus.png) no-repeat 0 0;
}
.header .menu ul li.has-sub>a{background:none!important}
.header .menu ul li.has-sub.active>a::after {
background:url(../images/minus.png) no-repeat 0 0;
}
.header .menu ul li.active>a::after {
transform: rotate(180deg);
}
.header .menu .megamenu .mega-grid.insight-menu .megamenu-item {
padding: 8px 0;
}
.header {
padding: 11px 0 6px!important;
}
.home .header:hover {  padding: 3px 0 6px!important;}
.home .header.on {  padding: 6px 0 6px!important;}
.header:hover, .header.on {
padding:  3px 0 0!important;
height: 63px;
}
/* ===== MEGAMENU → ACCORDION ===== */
.header .menu .megamenu {
position: static;
display: block;
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
background: rgba(255, 255, 255, 0.02);
border:none;
}
/* ACTIVE OPEN */
.header .menu li.active .megamenu {
max-height: 1000px;
/* fallback */
}
/* REMOVE HEAVY DESKTOP STYLES */
.header .menu .megamenu .menu-box {
padding: 0 20px;
}
.header .menu .megamenu .wrap {
padding: 15px 0;
}
.header .cta {
display: flex;
align-items: center;
gap: 10px;
}
.header .menu .megamenu .megamenu-item h5 {
font-size: var(--fs-body-s);
font-weight: 400;
}
.header .menu .megamenu .megamenu-item {
padding: 0;
}
/* ITEMS */
.header .menu .megamenu-item {
display: block;
padding: 12px 0;
color: #ccc;
}
.header .menu .megamenu-item h5 {
color: #fff;
font-size: 14px;
}
.header .menu .megamenu-item p {
display: none;
}
.header .menu .icon {
display: none;
}
/* ===== OVERLAY ===== */
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: .3s;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
.menu-toggle.active span {
background: #D4FF00;
}
.header .menu {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* smooth iOS scroll */
}
.header .menu .mobile-cta {
display: block;
background: var(--color-highlight);
padding: var(--space-6);
border-radius: 40px;
text-decoration: none;
color: var(--color-text-light);
font-weight: 600;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
width: calc(100% - 30px);
text-align: center;
width: fit-content;
white-space:nowrap
}
.header .menu .megamenu .megamenu-item h5 {
margin-bottom: 0;
}
.menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 17px 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: static;
top: 0;
left: 0;
width: 100%;
background: #070707;
z-index: 99;
height:79px;
}
.menu-header .logo {
font-weight: bold;
letter-spacing: 2px;
}
.menu-header .close-btn {
font-size: 22px;
cursor: pointer;
color: var(--color-highlight);
}
.menu-footer .left-logos{display:flex; gap:20px}
.menu-footer .left-logos img{object-fit:contain; }
.menu-footer {
margin-top: auto;
background:#070707;
color:var(--color-text-light);
height: 80px;
font-size: 14px;
position: static;
left: 0; 
bottom: 0;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-footer  .left-logos img{ height: 40px;}
/* BODY LOCK WHEN MENU OPEN */
body.menu-open {
overflow: hidden;
height: 100vh;
position: fixed;
width: 100%;
}
.hero-content h1 {
font-size: var(--fs-h2);
}
.hero-buttons{flex-wrap:nowrap}
.hero-buttons a{padding:10px 20px; font-size:13px; min-width:auto; white-space:nowrap; height:52px}
}
/* =========================
ONLY MOBILE
========================= */
@media(min-width:992px) {
.header .menu .megamenu .mega-grid.insight-menu .megamenu-item{ margin-bottom: var(--space-5) ;}
.mobile-menu,
.overlay,
.menu-toggle {
display: none;
}
.mobile-cta {
display: none;
}
.header .menu a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
background: var(--color-highlight);
transition: width .35s ease;
}
.header .menu a:hover::after {
width: 100%;
}
.menu-header,
.menu-footer {
display: none;
}
}
/* ======================================================
MOBILE LAYOUT
====================================================== */
@media (max-width:768px) {
.header .cta a {
font-size: 14px;
}
.header .logo img {
max-width: 120px;
}
.header .cta a {
padding: 8px 18px;
}
.benefits {
grid-template-columns: repeat(2, 1fr);
}
.slant-card {
padding: 20px;
}
.slant-card h3 {
font-size: 16px;
}
.home-clients-logos {
flex-wrap: wrap;
}
.image-content {
overflow-x: hidden;
}
.image-content .i-content-right {
padding: 0 45px 10px 0;
}
.image-content .experience-card {
right: 0px;
bottom: 80px;
}
.container {
padding: 0 25px;
}
.wrap{max-width: 100%;}
.hero-right {
flex-direction: column;
}
.clients-wrap {
flex-direction: column;
align-items: flex-start;
}
/* about section */
.image-content {
padding: 30px 0;
}
.i-content-left {
text-align: center;
}
.image-content .image-content-wrap {
align-items: flex-start;
display: block;
}
.header .container {
padding: 0 15px
}
.hero-inner{padding:20px}
.image-content .i-content-left.image-content {
max-width: 100%;
}
.image-content .i-content-right {
min-width: 200px;
}
.experience-card {
width: 150px;
padding: 20px;
}
.exp-number {
font-size: 28px;
}
.title-row {
grid-template-columns: 1fr;
gap: 25px;
padding: 0 0 30px;
margin-bottom: var(--space-5)!important;
}
.sub-title-arrow img {
width: 32px;
}
.media-box img,
.media-box video {
border-radius: 0;
}
/* core value */
.values-section {
gap: 24px;
}
.values-section .value-item {
gap: 14px;
}
.values-section .icon-box {
min-width: 46px;
height: 46px;
border-radius: 12px;
}
.values-section .icon-box img {
width: 22px;
height: 22px;
}
.values-section .value-content h3 {
font-size: 17px;
}
.values-section .value-content p {
font-size: 13px;
line-height: 1.5;
}
.stats-section .stats-grid {
grid-template-columns: repeat(2, 2fr);
}
.stats-section .stat-card h4{ font-size: var(--fs-body-s);}
.stats-section .stat-number {
font-size: var(--fs-h2);
}
.business-types .business-items {
grid-template-columns: 1fr;
}
.business-types .business-left h2 {
font-size: var(--fs-h3);
}
.service-grid {
grid-template-columns: 1fr;
}
.engagement {
padding: var(--space-9) 0;
}
.engagement-grid {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.eng-card {
padding: var(--space-8);
}
.eng-card ul {
gap: var(--space-1);
}
.pillars {
padding: var(--space-9) 0;
}
.pillar-grid {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.pillar-card {
padding: var(--space-8);
}
.insights {
padding: var(--space-9) 0;
}
.insights-left h2 {
font-size: var(--fs-h3);
}
.insights-right {
grid-template-columns: 1fr;
}
.insights-right .insight-card {
margin-top: 0 !important;
}
.insights .circle-accent {
width: 80px;
height: 80px;
top: -10px;
}
.tech .logo-track {
gap: 40px;
animation-duration: 20s;
}
.tech .logo-track img {
height: 32px;
}
.join-team .team-bottom {
grid-template-columns: 1fr;
}
.home-clients-text {
text-align: center;
width: 100%;
align-items: center;
}
.home-clients-logos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
width: 100%;
justify-items: center;
}
.home-clients-logos img {
height: 80px;
}
.site-footer {
overflow: hidden;
}
.site-footer .footer-grid {
grid-template-columns: 1fr;
}
.site-footer .footer-bottom-inner {
flex-direction: column;
gap: var(--space-3);
}
.site-footer .footer-links {
flex-wrap: wrap;
justify-content: center;
}
.footer-grid .accordion-content {
max-height: 0;
overflow: hidden;
transition: .4s;
}
.footer-grid .accordion-content.open {
max-height: 300px;
}
.footer-grid .accordion-header {
cursor: pointer;
position: relative;
}
.footer-grid .accordion-header::after {
content: "+";
position: absolute;
right: 0;
}
.site-footer .footer-cta-inner {
max-width: 100%;
}
.site-footer {
padding-top: 0px;
}
.testimonial-content {
padding-bottom: 100px;
}
}
/* Small mobile */
@media (max-width:480px) {
.benefits {
grid-template-columns: 1fr;
}
.slant-card .box {
padding: 0;
}
.engagement {
padding: var(--space-8) 0;
}
.eng-card-top img {
width: 28px;
}
}
/*==================================================
TERMS & CONDITIONS
Page Slug : terms-condition
==================================================*/
.no-acf .page-content{
padding:var(--space-8) 0 var(--space-11); */
}
.no-acf .page-content .container{
/*  max-width:1100px; */
}
/*==================================
Typography
==================================*/
.no-acf .page-content h1{
font-size:var(--fs-h2);
line-height:var(--lh-heading);
color:var(--color-primary);
margin-bottom:var(--space-3);
}
.no-acf .page-content h2{
font-size:var(--fs-h4);
line-height:var(--lh-heading);
color:var(--color-primary);
margin:var(--space-10) 0 var(--space-5);
}
.no-acf .page-content h3{
font-size:var(--fs-h5);
line-height:var(--lh-heading);
color:var(--color-primary);
margin:var(--space-8) 0 var(--space-4);
}
.no-acf .page-content h4,
.no-acf .page-content h5,
.no-acf .page-content h6{
color:var(--color-primary);
margin:var(--space-6) 0 var(--space-3);
}
.no-acf .page-content p{
font-size:var(--fs-body);
line-height:var(--lh-body);
color:var(--color-text);
margin-bottom:var(--space-4);
font-weight:300;
}
.no-acf .page-content strong{
color:var(--color-primary);
font-weight:600;
}
/*==================================
Lists
==================================*/
.no-acf .page-content ul,
.no-acf .page-content ol{
margin:0 0 var(--space-6) var(--space-6);
padding:0;
}
.no-acf .page-content li{
margin-bottom:var(--space-2);
color:var(--color-text);
line-height:var(--lh-body);
}
.no-acf .page-content ul li::marker{
color:var(--color-highlight);
}
/*==================================
Links
==================================*/
.no-acf .page-content a{
color:var(--color-highlight);
text-decoration:none;
transition:.3s;
}
.no-acf .page-content a:hover{
color:var(--color-primary);
}
/*==================================
HR
==================================*/
.no-acf .page-content hr{
border:0;
height:1px;
background:var(--box-border);
margin:var(--space-8) 0;
}
/*==================================
Table
==================================*/
.no-acf .page-content table{
width:100%;
border-collapse:collapse;
margin:var(--space-7) 0;
}
.no-acf .page-content table th,
.no-acf .page-content table td{
border:1px solid var(--box-border);
padding:var(--space-4);
text-align:left;
font-size:var(--fs-body);
}
.no-acf .page-content table th{
background:#f8f9fb;
color:var(--color-primary);
font-weight:600;
}
/*==================================
Last Updated
==================================*/
.no-acf .page-content p:first-of-type{
color:var(--color-text);
margin-bottom:var(--space-4);
}
/*==================================
Section spacing
==================================*/
.no-acf .page-content h2:first-child,
.no-acf .page-content h3:first-child{
margin-top:0;
}
/*==================================
Responsive
==================================*/
@media(max-width:991px){
.no-acf .page-content{
padding:var(--space-9) 0;
}
.no-acf .page-content h1{
font-size:var(--fs-h2);
}
.no-acf .page-content h2{
font-size:var(--fs-h3);
}
.no-acf .page-content h3{
font-size:var(--fs-h5);
}
}
@media(max-width:767px){
.no-acf .page-content{
padding:var(--space-8) 0;
}
.no-acf .page-content h1{
font-size:var(--fs-h2);
}
.no-acf .page-content h2{
margin-top:var(--space-8);
}
.no-acf .page-content h3{
margin-top:var(--space-6);
}
.no-acf .page-content ul,
.no-acf .page-content ol{
margin-left:22px;
}
.home-clients-wrap{padding:20px}
}
@media (max-height:600px){
.hero{padding-top:60px}
}
/* Default (enabled) */
.insight-prev,
.insight-next{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
background:#EAF4FF;
color:#1477FF;
cursor:pointer;
transition:.3s;
}
/* Disabled */
.insight-prev.swiper-button-disabled,
.insight-next.swiper-button-disabled{
background:#F2F2F2;
color:#999;
cursor:not-allowed;
opacity:1;
}
/*==================================================
CONTACT PAGE
==================================================*/
.contact-page{
padding:var(--space-8) 0 var(--space-11);
position:relative;
overflow:hidden;
background:#fff;
}
.contact-page::before, .blog-hero::before, .testimonials-page::before, .clients-page::before {
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(16,24,40,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(16,24,40,.05) 1px, transparent 1px);
background-size:40px 40px;
pointer-events:none;
width: 230px; height:230px
}
.contact-page .container{
position:relative;
z-index:2;
}
.page-template-contact .company-stats{ margin:-40px 0 40px!important}
/*==========================
Heading
==========================*/
.contact-heading{
max-width:760px;
margin-bottom:var(--space-10);
}
.contact-heading h1{
margin-bottom:var(--space-5);
}
.contact-desc{
max-width:720px;
}
.contact-desc p:last-child{
margin:0;
}
/*==========================
Layout
==========================*/
.contact-layout{
display:grid;
grid-template-columns:1fr 520px;
gap:var(--space-11);
align-items:start;
}
/*==========================
Image
==========================*/
.contact-right{
position:sticky;
top:120px;
}
.contact-right img{
width:100%;
display:block;
border-radius:var(--radius-lg);
max-height: 490px;
object-fit: cover;
}
/*==========================
FORM
==========================*/
.contact-left{
width:100%;
}
/*========================================
GRID
========================================*/
.cf7-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-5);
}
.cf7-full{
grid-column:1/-1;
}
.cf7-field{
position:relative;
}
/*========================================
COMMON FIELDS
========================================*/
.cf7-field input,
.cf7-field textarea,
.cf7-field select{
width:100%;
font-size:var(--fs-body);
font-family:inherit;
color:var(--color-primary);
outline:none;
transition:.35s;
margin-bottom:0
}
/*========================================
INPUTS
========================================*/
.cf7-field input{
height:44px;
border:none;
border-bottom:1px solid #D9DEE7;
background-color:transparent;
background-repeat:no-repeat;
background-position:left 2px;
background-size:18px;
padding:0 0 0 34px;
}
.cf7-field input:focus{
border-color:var(--color-highlight);
}
/*========================================
TEXTAREA
========================================*/
.cf7-field textarea{
height:70px;
resize:none;
border:none;
border-bottom:1px solid #D9DEE7;
background-color:transparent;
background-repeat:no-repeat;
background-position:left 4px;
background-size:18px;
padding:0 0 0 34px;
}
.cf7-field textarea:focus{
border-color:var(--color-highlight);
}
/*========================================
SELECT
========================================*/
.cf7-field select{
height:60px;
border:none;
border-radius:12px;
background-color:#F5F6F8;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
padding:0 55px 0 20px;
}
.icon-country::after{
content:"";
position:absolute;
right:22px;
top:20px;
width:20px;
height:20px;
background:url("../images/down-arrow.svg") center/contain no-repeat;
pointer-events:none;
z-index: 11;
}
/*========================================
SVG ICONS
========================================*/
.icon-user input{
background-image:url("../images/name.svg"); background-position:0 11px;
}
.icon-mail input{
background-image:url("../images/email.svg");background-position:0 11px;
}
.icon-phone input{
background-image:url("../images/phone.svg");background-position:0 11px;
}
.icon-message textarea{
background-image:url("../images/describe.svg");background-position:0 2px;
}
/*========================================
PLACEHOLDER
========================================*/
.cf7-field input::placeholder,
.cf7-field textarea::placeholder{
color:#98A2B3;
opacity:1;
}
/*========================================
CHECKBOX
========================================*/
.cf7-checkbox{
margin-top:var(--space-2);
}
.cf7-checkbox .wpcf7-list-item{
margin:0;
}
.cf7-checkbox label{
display:flex;
align-items:flex-start;
gap:10px;
color:var(--color-text);
font-size:14px;
line-height:1.6;
}
.cf7-checkbox input{
width:18px;
height:18px;
min-width:18px;
margin-top:2px;
accent-color:var(--color-highlight);
}
/*========================================
SUBMIT
========================================*/
.cf7-field input[type="submit"]{
width:auto;
min-width:170px;
height:56px;
padding:0 var(--space-8);
border:none;
border-radius:100px;
background:var(--color-highlight);
color:#fff;
font-weight:600;
cursor:pointer;
transition:.35s;
}
.cf7-field input[type="submit"]:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(35,157,234,.25);
}
/*========================================
ERROR
========================================*/
.wpcf7-not-valid-tip{
margin-top:8px;
font-size:12px;
}
.wpcf7-response-output{
margin-top:var(--space-5)!important;
}
/*========================================
TABLET
========================================*/
@media(max-width:991px){
.cf7-grid{
grid-template-columns:1fr;
gap:var(--space-5);
}
}
/*========================================
MOBILE
========================================*/
@media(max-width:767px){
.cf7-field input[type="submit"]{
width:100%;
}
}
.contact-left ::placeholder{
color:#9aa3b2;
}
/*==========================
Submit
==========================*/
.contact-left input[type=submit]{
width:auto;
min-width:180px;
height:56px;
border:none;
border-radius:100px;
background:var(--color-highlight);
color:#fff;
font-weight:600;
cursor:pointer;
padding:0 var(--space-8);
transition:.35s;
}
.contact-left input[type=submit]:hover{
transform:translateY(-3px);
box-shadow:0 15px 30px rgba(0,0,0,.15);
}
/*==========================
CF7 Messages
==========================*/
.wpcf7-response-output{
margin-top:var(--space-5)!important;
}
.wpcf7-spinner{
display:block;
margin-top:10px;
}
/*==========================
Tablet
==========================*/
@media(max-width:991px){
.contact-layout{
grid-template-columns:1fr;
gap:var(--space-8);
}
.contact-right{
order:-1;
position:relative;
top:auto;
}
.contact-right img {
max-width: 100%;
margin: auto;
max-height: 300px;
overflow: hidden;
object-fit:cover
}
}
/*==========================
Mobile
==========================*/
@media(max-width:767px){
.contact-page{
padding:var(--space-8) 0;
}
.contact-heading{
margin-bottom:var(--space-8);
}
.contact-right{
margin-bottom:var(--space-7);
}
.contact-right img {
max-width: 100%;
margin: auto;
max-height: 160px;
overflow: hidden;
object-fit:cover
}
}
/*=====================================
SELECT2
=====================================*/
/*=====================================
SELECT2
=====================================*/
.select2-container{
width:100% !important;
display:block;
}
.select2-container .selection{
display:block;
}
.select2-container--default .select2-selection--single{
height:60px !important;
display:flex !important;
align-items:center;
background:#F5F6F8 !important;
border:none !important;
border-radius:12px !important;
padding:0 50px 0 20px;
box-sizing:border-box;
}
.select2-container--default .select2-selection__rendered{
line-height:60px !important;
color:#98A2B3 !important;
font-size:var(--fs-body);
padding-left:0 !important;
padding-right:0 !important;
}
.select2-container--default .select2-selection__placeholder{
color:#98A2B3 !important;
}
.select2-container--default .select2-selection__arrow{
width:42px !important;
height:60px !important;
right:10px !important;
top:0 !important;
}
.select2-container--default .select2-selection__arrow b{
display:none;
}
/*=====================================
DROPDOWN
=====================================*/
.select2-dropdown{
border:1px solid #E5E7EB !important;
border-radius:12px !important;
overflow:hidden;
margin-top:8px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.select2-search{
display:block !important;
}
.select2-search--dropdown{
display:block !important;
}
.select2-results{
max-height:280px;
}
.select2-results__options{
max-height:280px !important;
}
.select2-results__option{
padding:14px 18px !important;
font-size:15px;
color:var(--color-primary);
}
.select2-container--default .select2-results__option--highlighted{
background:var(--color-highlight) !important;
color:#fff !important;
}
.select2-container--default .select2-results__option--selected{
background:#F3F4F6;
color:var(--color-primary);
}
/*=====================================
FIX POSITION
=====================================*/
.cf7-field.icon-country{
position:relative;
}
.cf7-field.icon-country .select2-container{
position:relative;
z-index:10;
}
.select2-container--open{
z-index:99999 !important;
}
.select2-container--open .select2-dropdown{
left:0 !important;
right:auto !important;
}
/*=====================================
MOBILE
=====================================*/
@media(max-width:767px){
.select2-container--default .select2-selection--single{
height:56px !important;
}
.select2-container--default .select2-selection__rendered{
line-height:56px !important;
}
.select2-container--default .select2-selection__arrow{
height:56px !important;
}
}
@media(max-height:768px){
.header .menu .megamenu .mega-grid {
gap: var(--space-1);
}
.header .menu li:hover .megamenu{    max-height: calc(100vh - 90px); /* header height */
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;}
}
@media(max-width:767px){
.cta-section{padding:var(--space-8) 0!important}
.join-team{padding: 0 0 var(--space-5) 0!important}
.cta-section h2 {
font-size: 30px!important;
}
}
.pcb-faq{    padding: var(--space-7) 0!important;}
.insights-slider, .pcb-detail-feature-grid,.tech-logos {
margin-top: 0;
}
.engagement .title-row{padding-bottom:0}
/*=========================================
CAREER FORM CONSENT
=========================================*/
.wpcf7-acceptance label{display:flex}
.navigation.pagination .nav-links{display:flex; gap:15px}
.navigation.pagination .nav-links .page-numbers{ color:var(--color-text)}
.navigation.pagination .nav-links .page-numbers.current, .navigation.pagination .nav-links .page-numbers:hover{color:var(--color-text-light)}
.navigation.pagination .nav-links .page-numbers.dots:hover{background:#fff; color:var(--color-text)}
.page-content h1{margin-bottom:15px}
@media(max-width:767px){.navigation.pagination .nav-links{flex-wrap:wrap;}
}
.ai-btn,
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 60px;
padding: 0 34px;
border-radius: 999px;
font-size: 16px;
line-height: 1;
font-weight: 600;
color: #fff;
text-decoration: none;
transition: .35s;
}
/* AI Button */
.ai-btn {
background: linear-gradient(90deg, #2f9dff, #ff1570);
}
.ai-btn:hover {
transform: translateY(-4px)!important;
box-shadow: 0 15px 40px rgba(255, 0, 120, .35);
}
/* Hero Button */
.hero-btn {
background: linear-gradient(90deg, #1d8dff, #0c63dc);
}
.hero-btn:hover {
transform: translateY(-3px)!important;
box-shadow: 0 15px 35px rgba(0, 108, 255, .35);
}
/* ===================================
CF7 FILE UPLOAD
=================================== */
.uplaod  {  border-bottom: 1px solid #d4dce7;}
.wpcf7 input[type="file"] {
width: 100%;
height: 55px;
padding: 0 0 14px;
border: 0;
border-bottom: 1px solid #d4dce7;
border-radius: 0;
background: transparent;
color: #8b98aa;
font-family: inherit;
font-size: 14px;
cursor: pointer;
}
/* Chrome / Edge / Safari */
.wpcf7 input[type="file"]::file-selector-button {
height: 36px;
padding: 0 16px;
margin-right: 10px;
border: 1px solid #d4dce7;
border-radius: 4px;
background: #f5f6f8;
color: #5f6b7a;
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: all .3s ease;
}
.wpcf7 input[type="file"]::file-selector-button:hover {
background: #2096dc;
border-color: #2096dc;
color: #fff;
}
/* Focus */
.wpcf7 input[type="file"]:focus {
outline: none;
border-bottom-color: #2096dc;
}