/*===================================================
AI HERO
===================================================*/

.ai-hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;
background:
linear-gradient(135deg,#050816 0%,#0b1b3c 40%,#001a3d 100%);
}

.ai-hero::before{
content:"";
position:absolute;
width:160%;
height:160%;
top:-30%;
left:-30%;
background:
radial-gradient(circle,#3ea6ff22 0%,transparent 35%),
radial-gradient(circle,#00ffd522 0%,transparent 28%),
radial-gradient(circle,#7c5cff22 0%,transparent 30%);
animation:heroGradient 18s linear infinite;
}

@keyframes heroGradient{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

/*===================================================
GRID BACKGROUND
===================================================*/

.ai-grid{
position:absolute;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:60px 60px;
animation:gridMove 18s linear infinite;
opacity:.4;
}

@keyframes gridMove{

0%{
transform:translateY(0);
}

100%{
transform:translateY(60px);
}

}

/*===================================================
GLOW ORBS
===================================================*/

.glow-orb{
position:absolute;
border-radius:50%;
filter:blur(90px);
animation:floatOrb 10s ease-in-out infinite;
}

.orb-one{
width:350px;
height:350px;
background:#00bfff;
top:5%;
left:-120px;
opacity:.25;
}

.orb-two{
width:300px;
height:300px;
background:#00ffd5;
right:-80px;
top:25%;
opacity:.20;
animation-delay:2s;
}

.orb-three{
width:280px;
height:280px;
background:#7a5cff;
bottom:-80px;
left:45%;
opacity:.20;
animation-delay:4s;
}

@keyframes floatOrb{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-35px);
}

}

/*===================================================
FLOATING AI ICONS
===================================================*/

.floating-ai{
position:absolute;
width:80px;
height:80px;
display:flex;
justify-content:center;
align-items:center;
border-radius:24px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 20px 50px rgba(0,0,0,.30);
color:#00e1ff;
font-size:34px;
animation:floatIcon 6s ease-in-out infinite;
z-index:3;
}

.floating-ai.one{
top:18%;
left:8%;
}

.floating-ai.two{
top:70%;
left:12%;
animation-delay:1.5s;
}

.floating-ai.three{
top:18%;
right:12%;
animation-delay:3s;
}

.floating-ai.four{
bottom:10%;
right:15%;
animation-delay:4s;
}

@keyframes floatIcon{

0%,100%{
transform:translateY(0) rotate(0deg);
}

50%{
transform:translateY(-18px) rotate(8deg);
}

}

/*===================================================
HERO CONTENT
===================================================*/

.hero-content{
position:relative;
z-index:5;
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 26px;
border-radius:40px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);
color:#00f2ff;
font-weight:600;
margin-bottom:25px;
}

.hero-content h1{
font-size:68px;
font-weight:800;
color:#fff;
line-height:1.1;
margin-bottom:20px;
}

.hero-content h1 span{
background:linear-gradient(90deg,#00d2ff,#00ffcc);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-content p{
font-size:18px;
line-height:1.9;
color:#d4dff6;
max-width:620px;
margin-bottom:35px;
}

/*===================================================
AI DISPLAY
===================================================*/

.ai-display{
position:relative;
width:520px;
height:520px;
margin:auto;
display:flex;
justify-content:center;
align-items:center;
}

.ai-core{
position:absolute;
width:220px;
height:220px;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:rgba(255,255,255,.10);
backdrop-filter:blur(22px);
border:2px solid rgba(255,255,255,.10);
box-shadow:
0 0 60px rgba(0,255,255,.35),
0 0 120px rgba(0,180,255,.20);
animation:pulseCore 4s ease infinite;
z-index:5;
}

.ai-core i{
font-size:70px;
color:#00e5ff;
margin-bottom:15px;
}

.ai-core h4{
color:#fff;
font-weight:700;
margin-bottom:6px;
}

.ai-core p{
color:#cfe9ff;
margin:0;
}

@keyframes pulseCore{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

}

/*===================================================
ORBITS
===================================================*/

.orbit{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255,.12);
backdrop-filter:blur(20px);
color:#00e5ff;
font-size:30px;
box-shadow:0 15px 40px rgba(0,0,0,.25);
}

.orbit-one{
animation:orbitOne 12s linear infinite;
}

.orbit-two{
animation:orbitTwo 14s linear infinite;
}

.orbit-three{
animation:orbitThree 16s linear infinite;
}

.orbit-four{
animation:orbitFour 18s linear infinite;
}

@keyframes orbitOne{

0%{
transform:rotate(0deg) translateX(180px) rotate(0deg);
}

100%{
transform:rotate(360deg) translateX(180px) rotate(-360deg);
}

}

@keyframes orbitTwo{

0%{
transform:rotate(90deg) translateX(220px) rotate(-90deg);
}

100%{
transform:rotate(450deg) translateX(220px) rotate(-450deg);
}

}

/*===================================================
ORBIT ANIMATIONS (CONTINUED)
===================================================*/

@keyframes orbitThree{

0%{
transform:rotate(180deg) translateX(200px) rotate(-180deg);
}

100%{
transform:rotate(540deg) translateX(200px) rotate(-540deg);
}

}

@keyframes orbitFour{

0%{
transform:rotate(270deg) translateX(250px) rotate(-270deg);
}

100%{
transform:rotate(630deg) translateX(250px) rotate(-630deg);
}

}

/*===================================================
BREADCRUMB
===================================================*/

.ai-breadcrumb{
background:#071327;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
}

.ai-breadcrumb .breadcrumb{
margin:0;
background:none;
}

.ai-breadcrumb .breadcrumb-item a{
color:#00d4ff;
text-decoration:none;
}

.ai-breadcrumb .breadcrumb-item.active{
color:#fff;
}

/*===================================================
OVERVIEW
===================================================*/

.overview-section{
background:#091528;
}

.overview-image{
overflow:hidden;
border-radius:28px;
box-shadow:0 30px 70px rgba(0,0,0,.35);
}

.overview-image img{
width:100%;
transition:.6s;
}

.overview-image:hover img{
transform:scale(1.08);
}

.section-tag{
display:inline-block;
padding:8px 20px;
background:#00d2ff;
color:#04111f;
font-weight:700;
border-radius:30px;
margin-bottom:20px;
letter-spacing:1px;
}

.overview-section h2{
font-size:42px;
font-weight:700;
color:#fff;
margin-bottom:20px;
}

.overview-section p{
color:#c9d8ef;
line-height:1.9;
font-size:17px;
}

/*===================================================
SECTION HEADING
===================================================*/

.section-heading span{
color:#00d2ff;
font-weight:700;
letter-spacing:2px;
}

.section-heading h2{
color:#fff;
font-size:42px;
margin:20px 0;
font-weight:700;
}

.section-heading p{
max-width:720px;
margin:auto;
color:#cfd8eb;
line-height:1.9;
}

/*===================================================
CHALLENGES
===================================================*/

.ai-challenges{
background:#081321;
}

.challenge-box{
position:relative;
padding:45px 35px;
border-radius:25px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
transition:.45s;
height:100%;
}

.challenge-box:hover{
transform:translateY(-12px);
box-shadow:0 30px 70px rgba(0,212,255,.18);
border-color:#00d2ff;
}

.challenge-icon{
width:80px;
height:80px;
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#00d2ff,#006eff);
font-size:34px;
color:#fff;
margin-bottom:25px;
}

.challenge-box h4{
color:#fff;
margin-bottom:15px;
font-weight:700;
}

.challenge-box p{
color:#c8d6e8;
line-height:1.8;
}

.challenge-number{
position:absolute;
top:20px;
right:25px;
font-size:54px;
font-weight:800;
color:rgba(255,255,255,.05);
}

/*===================================================
SOLUTIONS
===================================================*/

.ai-solutions{
background:#0b172c;
}

.solution-card{
height:100%;
padding:40px 30px;
border-radius:24px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
transition:.45s;
}

.solution-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 60px rgba(0,210,255,.22);
}

.solution-icon{
width:78px;
height:78px;
display:flex;
justify-content:center;
align-items:center;
border-radius:20px;
margin-bottom:25px;
background:linear-gradient(135deg,#00d2ff,#6b4cff);
color:#fff;
font-size:30px;
}

.solution-card h4{
color:#fff;
margin-bottom:15px;
font-weight:700;
}

.solution-card p{
color:#cfd8eb;
line-height:1.8;
}

/*===================================================
WHY AI
===================================================*/

.why-ai{
background:#081423;
}

.why-image{
position:relative;
}

.why-image img{
border-radius:28px;
box-shadow:0 30px 70px rgba(0,0,0,.35);
}

.floating-badge{
position:absolute;
bottom:30px;
left:30px;
padding:15px 28px;
border-radius:40px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(18px);
color:#fff;
font-weight:600;
box-shadow:0 20px 50px rgba(0,0,0,.30);
}

.feature-item{
display:flex;
gap:20px;
margin-bottom:28px;
}

.feature-icon{
width:65px;
height:65px;
display:flex;
justify-content:center;
align-items:center;
border-radius:18px;
background:linear-gradient(135deg,#00d2ff,#007bff);
color:#fff;
font-size:24px;
flex-shrink:0;
}

.feature-item h5{
color:#fff;
font-weight:700;
margin-bottom:8px;
}

.feature-item p{
color:#d3dff0;
margin:0;
}

/*===================================================
BENEFITS
===================================================*/

.ai-benefits{
background:#0a1628;
}

.benefit-card{
height:100%;
padding:40px 28px;
text-align:center;
border-radius:24px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
transition:.4s;
}

.benefit-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,212,255,.20);
}

.benefit-card i{
font-size:42px;
color:#00d4ff;
margin-bottom:20px;
}

.benefit-card h4{
color:#fff;
font-size:22px;
margin-bottom:15px;
font-weight:700;
}

.benefit-card p{
color:#d3deef;
line-height:1.8;
}

/*===================================================
CTA
===================================================*/

.ai-cta{
padding:100px 0;
background:linear-gradient(135deg,#071224,#0d2b56);
position:relative;
overflow:hidden;
}

.ai-cta::before{
content:"";
position:absolute;
width:420px;
height:420px;
background:#00d2ff;
filter:blur(140px);
opacity:.15;
top:-120px;
right:-100px;
}

.ai-cta h2{
color:#fff;
font-size:46px;
font-weight:700;
margin-bottom:20px;
}

.ai-cta p{
color:#d5dff0;
max-width:760px;
margin:auto;
line-height:1.9;
margin-bottom:35px;
}

/*===================================================
BUTTONS
===================================================*/

.hero-btn{
padding:15px 34px;
border-radius:50px;
font-weight:700;
transition:.35s;
}

.hero-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(0,0,0,.25);
}

/*===================================================
RESPONSIVE DESIGN
===================================================*/

@media (max-width:1200px){

.ai-display{
width:440px;
height:440px;
}

.ai-core{
width:190px;
height:190px;
}

.hero-content h1{
font-size:56px;
}

.overview-section h2,
.section-heading h2,
.ai-cta h2{
font-size:38px;
}

.orbit-one{
animation:orbitOneTablet 12s linear infinite;
}

.orbit-two{
animation:orbitTwoTablet 14s linear infinite;
}

.orbit-three{
animation:orbitThreeTablet 16s linear infinite;
}

.orbit-four{
animation:orbitFourTablet 18s linear infinite;
}

}

@media (max-width:992px){

.ai-hero{
padding:120px 0 80px;
text-align:center;
}

.hero-content{
margin-bottom:70px;
}

.hero-content p{
margin-left:auto;
margin-right:auto;
}

.hero-buttons{
justify-content:center;
display:flex;
flex-wrap:wrap;
gap:15px;
}

.ai-display{
width:360px;
height:360px;
}

.ai-core{
width:170px;
height:170px;
}

.ai-core i{
font-size:56px;
}

.hero-content h1{
font-size:48px;
}

.overview-section h2,
.section-heading h2,
.ai-cta h2{
font-size:34px;
}

.feature-item{
align-items:flex-start;
}

.floating-ai{
display:none;
}

.glow-orb{
opacity:.12;
}

}

@media (max-width:768px){

.ai-hero{
padding-top:110px;
}

.hero-content h1{
font-size:40px;
line-height:1.2;
}

.hero-content p{
font-size:16px;
line-height:1.8;
}

.ai-display{
width:300px;
height:300px;
}

.ai-core{
width:150px;
height:150px;
}

.ai-core i{
font-size:48px;
}

.ai-core h4{
font-size:20px;
}

.ai-core p{
font-size:14px;
}

.orbit{
width:60px;
height:60px;
font-size:22px;
}

.section-heading h2,
.overview-section h2,
.ai-cta h2{
font-size:30px;
}

.challenge-box,
.solution-card,
.benefit-card{
padding:30px 25px;
}

.challenge-icon,
.solution-icon{
width:70px;
height:70px;
font-size:28px;
}

.feature-item{
gap:15px;
}

.feature-icon{
width:58px;
height:58px;
font-size:20px;
}

.floating-badge{
position:relative;
left:0;
bottom:0;
margin-top:20px;
display:inline-flex;
}

}

@media (max-width:576px){

.hero-content h1{
font-size:34px;
}

.hero-badge{
font-size:14px;
padding:10px 18px;
}

.hero-btn{
width:100%;
margin:8px 0;
}

.ai-display{
width:260px;
height:260px;
}

.ai-core{
width:130px;
height:130px;
}

.ai-core i{
font-size:40px;
}

.ai-core h4{
font-size:18px;
}

.ai-core p{
font-size:13px;
}

.orbit{
width:52px;
height:52px;
font-size:18px;
}

.overview-section h2,
.section-heading h2,
.ai-cta h2{
font-size:26px;
}

.section-heading p,
.overview-section p,
.challenge-box p,
.solution-card p,
.benefit-card p,
.feature-item p,
.ai-cta p{
font-size:15px;
}

.challenge-number{
font-size:42px;
}

}

/*===================================================
TABLET ORBITS
===================================================*/

@keyframes orbitOneTablet{

0%{
transform:rotate(0deg) translateX(130px) rotate(0deg);
}

100%{
transform:rotate(360deg) translateX(130px) rotate(-360deg);
}

}

@keyframes orbitTwoTablet{

0%{
transform:rotate(90deg) translateX(150px) rotate(-90deg);
}

100%{
transform:rotate(450deg) translateX(150px) rotate(-450deg);
}

}

@keyframes orbitThreeTablet{

0%{
transform:rotate(180deg) translateX(140px) rotate(-180deg);
}

100%{
transform:rotate(540deg) translateX(140px) rotate(-540deg);
}

}

@keyframes orbitFourTablet{

0%{
transform:rotate(270deg) translateX(165px) rotate(-270deg);
}

100%{
transform:rotate(630deg) translateX(165px) rotate(-630deg);
}

}

/*===================================================
SMOOTH ANIMATIONS
===================================================*/

.challenge-box,
.solution-card,
.benefit-card,
.feature-item,
.hero-btn,
.overview-image img,
.floating-badge{
transition:all .4s ease;
}

.challenge-box:hover .challenge-icon,
.solution-card:hover .solution-icon{
transform:rotate(10deg) scale(1.08);
}

.challenge-icon,
.solution-icon{
transition:all .35s ease;
}

/*===================================================
CUSTOM SCROLLBAR (OPTIONAL)
===================================================*/

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#07111f;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(#00d2ff,#007bff);
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:linear-gradient(#00f2ff,#009dff);
}

/*===================================================
END OF AI AUTOMATION CSS
===================================================*/


/*===================================================
CLOUD HERO OVERRIDES
===================================================*/

.ai-hero.cloud-hero{
    background:
    linear-gradient(135deg,#050816 0%,#0d2448 45%,#0a3d7a 100%);
}

.ai-hero.cloud-hero::before{
    background:
    radial-gradient(circle,#4db8ff22 0%,transparent 35%),
    radial-gradient(circle,#00d4ff22 0%,transparent 28%),
    radial-gradient(circle,#6aa8ff22 0%,transparent 30%);
}

.ai-core.cloud-core{
    box-shadow:
        0 0 60px rgba(0,191,255,.35),
        0 0 120px rgba(0,120,255,.20);
}

.ai-core.cloud-core i{
    color:#4fc3ff;
}


/*===================================================
IT CONSULTING OVERRIDES
===================================================*/

.consulting-hero{

background:
linear-gradient(135deg,#050816 0%,#13213f 45%,#1f3d73 100%);

}

.consulting-hero::before{

background:
radial-gradient(circle,#5daeff22 0%,transparent 35%),
radial-gradient(circle,#38bdf822 0%,transparent 28%),
radial-gradient(circle,#7c9cff22 0%,transparent 30%);

}

.consulting-core{

box-shadow:
0 0 60px rgba(93,174,255,.35),
0 0 120px rgba(56,189,248,.22);

}

.consulting-core i{

color:#5daeff;

}

.consulting-hero .hero-badge{

color:#5daeff;

}

.consulting-hero .hero-content h1 span{

background:linear-gradient(90deg,#5daeff,#38bdf8);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.consulting-hero .floating-ai{

color:#5daeff;

}

.consulting-hero .orbit{

color:#5daeff;

}


/*===================================================
IT STAFFING PAGE OVERRIDES
===================================================*/

.staffing-hero{

background:
linear-gradient(135deg,#06111f 0%,#0f2744 45%,#164f72 100%);

}

.staffing-hero::before{

background:
radial-gradient(circle,#34d39922 0%,transparent 35%),
radial-gradient(circle,#38bdf822 0%,transparent 28%),
radial-gradient(circle,#60a5fa22 0%,transparent 30%);

}

.staffing-core{

box-shadow:
0 0 60px rgba(52,211,153,.35),
0 0 120px rgba(56,189,248,.20);

}

.staffing-core i{

color:#34d399;

}

.staffing-hero .hero-badge{

color:#34d399;

}

.staffing-hero .hero-content h1 span{

background:linear-gradient(90deg,#34d399,#38bdf8);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.staffing-hero .floating-ai{

color:#34d399;

}

.staffing-hero .orbit{

color:#34d399;

}


/*===================================================
SAP CONSULTING PAGE OVERRIDES
===================================================*/

.sap-hero{

background:
linear-gradient(135deg,#08111f 0%,#0f2947 45%,#14532d 100%);

}

.sap-hero::before{

background:
radial-gradient(circle,#22c55e22 0%,transparent 35%),
radial-gradient(circle,#38bdf822 0%,transparent 28%),
radial-gradient(circle,#16a34a22 0%,transparent 30%);

}

.sap-core{

box-shadow:
0 0 60px rgba(34,197,94,.35),
0 0 120px rgba(56,189,248,.20);

}

.sap-core i{

color:#22c55e;

}

.sap-hero .hero-badge{

color:#22c55e;

}

.sap-hero .hero-content h1 span{

background:linear-gradient(90deg,#22c55e,#38bdf8);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.sap-hero .floating-ai{

color:#22c55e;

}

.sap-hero .orbit{

color:#22c55e;

}

.sap-hero .solution-icon,
.sap-hero .challenge-icon,
.sap-hero .feature-icon{

background:linear-gradient(135deg,#22c55e,#38bdf8);

}

.sap-hero .hero-btn.btn-info{

background:#22c55e;
border-color:#22c55e;
color:#fff;

}

.sap-hero .hero-btn.btn-info:hover{

background:#16a34a;
border-color:#16a34a;

}





























/*==================================================
EDUCATION PAGE DARK THEME
==================================================*/

.education-hero ~ section{
    background:#071327;
    color:#fff;
}

.education-hero ~ section:nth-child(even){
    background:#0b1831;
}

.education-hero ~ section p{
    color:#c6d2e3;
}

.education-hero ~ section .text-muted{
    color:#b8c7dd !important;
}

.education-hero ~ section h1,
.education-hero ~ section h2,
.education-hero ~ section h3,
.education-hero ~ section h4,
.education-hero ~ section h5,
.education-hero ~ section h6{
    color:#fff;
}

.education-hero ~ section.bg-light{
    background:#0b1831 !important;
}

.edu-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border-radius:22px;

    transition:.4s;

    box-shadow:0 18px 45px rgba(0,0,0,.30);

}

.edu-card:hover{

    transform:translateY(-10px);

    border-color:#00d4ff;

    box-shadow:0 25px 60px rgba(0,212,255,.20);

}

.edu-icon-box{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#00d4ff,#2563eb);

    color:#fff;

    font-size:28px;

    margin-bottom:20px;

    box-shadow:0 10px 25px rgba(0,212,255,.25);

}

.edu-title{

    color:#fff;

}

.edu-subtitle{

    color:#00d4ff;

    letter-spacing:2px;

}

.edu-check li{

    color:#dbe7ff;

    margin-bottom:18px;

}

.edu-check i{

    color:#00d4ff;

    margin-right:12px;

}



/*==================================================
RETAIL PAGE DARK THEME
==================================================*/

.overview-section,
.about-home-section{
    background:#071327;
}

.retail-challenges,
.industries-section{
    background:#0b1831;
    position:relative;
    overflow:hidden;
}

.retail-solutions,
.services-section{
    background:#071327;
}

.why-retail,
.why-banking{
    background:#0b1831;
}

.retail-benefits,
.benefits-section{
    background:#071327;
}

.retail-cta{
    background:linear-gradient(135deg,#0b1831,#071327);
}

/* Section Headings */

.section-tag,
.section-heading span,
.retail-challenges span,
.retail-solutions span,
.retail-benefits span{

    color:#00d4ff;
    letter-spacing:2px;
    font-weight:700;

}

.overview-section h2,
.retail-challenges h2,
.retail-solutions h2,
.why-retail h2,
.retail-benefits h2{

    color:#fff;

}

.overview-section p,
.retail-challenges p,
.retail-solutions p,
.why-retail p,
.retail-benefits p{

    color:#c7d5e8;

}

.challenge-box,
.solution-card,
.benefit-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    border-radius:22px;

    transition:.4s;

    box-shadow:0 20px 45px rgba(0,0,0,.28);

    position:relative;

    overflow:hidden;

}

.challenge-box:hover,
.solution-card:hover,
.benefit-card:hover{

    transform:translateY(-10px);

    border-color:#00d4ff;

    box-shadow:0 30px 70px rgba(0,212,255,.22);

}

.challenge-icon,
.solution-icon,
.feature-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    background:linear-gradient(135deg,#00d4ff,#2563eb);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

    margin-bottom:20px;

    box-shadow:0 15px 30px rgba(0,212,255,.25);

}

.industries-section::before,
.services-section::before,
.why-banking::before,
.benefits-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:radial-gradient(circle,rgba(0,212,255,.10),transparent 70%);

    border-radius:50%;

    top:-180px;

    right:-120px;

    pointer-events:none;

}

.industries-section::after,
.services-section::after,
.why-banking::after,
.benefits-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:radial-gradient(circle,rgba(37,99,235,.08),transparent 70%);

    border-radius:50%;

    left:-120px;

    bottom:-120px;

    pointer-events:none;

}


/*==================================================
LOGISTICS PAGE DARK THEME
(Hero remains unchanged)
==================================================*/

body{
    background:#07111f;
    color:#e9f2ff;
}

/* Sections */

.overview-section,
section.py-5{
    position:relative;
    background:#07111f;
    overflow:hidden;
}

.bg-light{
    background:#0d1729 !important;
}

/* Alternate sections */

section:nth-of-type(even):not(.logistics-hero):not(.footer):not(.cta-section){
    background:#0c182d;
}

/* Animated Background */

section.py-5::before,
.bg-light::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 25%,rgba(0,170,255,.08),transparent 35%),
        radial-gradient(circle at 80% 70%,rgba(255,179,0,.08),transparent 35%),
        radial-gradient(circle at 60% 15%,rgba(0,255,200,.05),transparent 30%);
    animation:logisticsGlow 16s linear infinite alternate;
    pointer-events:none;
}

@keyframes logisticsGlow{

0%{
transform:translateY(0) scale(1);
}

100%{
transform:translateY(-30px) scale(1.15);
}

}

/* Titles */

.edu-title,
h2,
h3{
    color:#fff;
    font-weight:700;
}

.text-muted,
p{
    color:#c5d3e5 !important;
}

.text-primary{
    color:#39b6ff !important;
}

/* Images */

img{
    border-radius:18px;
}

.shadow{
    box-shadow:0 25px 60px rgba(0,0,0,.45)!important;
}

/* Service Cards */

.service-card{
    position:relative;
    background:rgba(15,27,46,.85);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:35px;
    overflow:hidden;
    transition:.45s;
    backdrop-filter:blur(18px);
    box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.service-card::before{

content:"";
position:absolute;
top:-120%;
left:-40%;
width:220%;
height:220%;
background:linear-gradient(135deg,
transparent,
rgba(255,255,255,.08),
transparent);
transform:rotate(25deg);
transition:.8s;

}

.service-card:hover::before{
top:100%;
}

.service-card:hover{

transform:translateY(-12px);
border-color:#29b6ff;
box-shadow:0 25px 70px rgba(41,182,255,.25);

}

.service-card h4,
.service-card h5{
color:#fff;
}

.service-card p{
color:#c6d5e6 !important;
}

/* Icons */

.service-card i{
color:#ffc547 !important;
transition:.35s;
}

.service-card:hover i{

transform:scale(1.18) rotate(8deg);
color:#29b6ff !important;

}

/* Buttons */

.btn-primary{

background:linear-gradient(135deg,#1fa2ff,#12d8fa);
border:none;
border-radius:50px;
padding:14px 34px;
font-weight:600;
box-shadow:0 15px 35px rgba(31,162,255,.35);

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-light,
.btn-outline-light{

border-radius:50px;
padding:14px 34px;

}

/* Checklist */

li{
color:#d9e6f5;
}

/* CTA */

.cta-section{

position:relative;
background:
linear-gradient(135deg,#0b2e4c,#0b6ba8);
overflow:hidden;

}

.cta-section::before{

content:"";
position:absolute;
width:650px;
height:650px;
border-radius:50%;
background:rgba(255,255,255,.05);
top:-260px;
right:-220px;

}

.cta-section::after{

content:"";
position:absolute;
width:450px;
height:450px;
border-radius:50%;
background:rgba(255,196,0,.08);
bottom:-180px;
left:-150px;

}

/* Floating Dots */

section.py-5::after,
.bg-light::after{

content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#2dbbff;
top:18%;
left:15%;
box-shadow:
180px 120px #ffc547,
420px 70px #2dbbff,
720px 180px #39d6ff,
980px 340px #ffc547,
350px 480px #39b6ff;
animation:floatingDots 18s linear infinite;

}

@keyframes floatingDots{

0%{
transform:translateY(0);
opacity:.25;
}

50%{
opacity:.8;
}

100%{
transform:translateY(-40px);
opacity:.25;
}

}

/* Hover Image */

img:hover{

transform:scale(1.02);
transition:.5s;

}



/*==================================================
FACTORY GRID
==================================================*/

.factory-grid{

    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:58px 58px;

    animation:gridMove 18s linear infinite;

    opacity:.55;

}

/*==================================================
GLOW CIRCLES
==================================================*/

.factory-circle{

    position:absolute;

    border:1px solid rgba(0,190,255,.08);

    border-radius:50%;

    animation:pulseFactory 8s infinite;

}

.circle1{

    width:420px;
    height:420px;

    top:-120px;
    left:-80px;

}

.circle2{

    width:340px;
    height:340px;

    bottom:-120px;
    right:120px;

}

.circle3{

    width:280px;
    height:280px;

    top:45%;
    left:38%;

}

/*==================================================
GEARS
==================================================*/

.gear{

    position:absolute;

    color:#29b6ff;

    opacity:.15;

    animation:gearRotate 18s linear infinite;

}

.gear i{

    font-size:95px;

}

.gear1{

    top:10%;
    right:7%;

}

.gear2{

    bottom:8%;
    left:6%;

}

.gear3{

    top:40%;
    left:45%;

}

/*==================================================
FACTORY ICONS
==================================================*/

.factory-icon{

    position:absolute;

    width:84px;
    height:84px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.08);

    color:#4cc8ff;

    font-size:34px;

    animation:floatIcon 6s ease-in-out infinite;

}

.icon1{

    left:70px;
    top:80px;

}

.icon2{

    right:150px;
    top:120px;

}

.icon3{

    left:160px;
    bottom:90px;

}

.icon4{

    right:110px;
    bottom:80px;

}

.icon5{

    left:50%;
    top:25%;

}

/*==================================================
PLUS
==================================================*/

.factory-plus{

    position:absolute;

    width:26px;
    height:26px;

}

.factory-plus::before,
.factory-plus::after{

    content:"";

    position:absolute;

    background:#39c5ff;

}

.factory-plus::before{

    width:26px;
    height:3px;
    top:11px;

}

.factory-plus::after{

    width:3px;
    height:26px;
    left:11px;

}

.plus1{

    left:22%;
    top:18%;

}

.plus2{

    right:28%;
    bottom:18%;

}

.plus3{

    left:62%;
    top:65%;

}

/*==================================================
CONVEYOR LINE
==================================================*/

.conveyor-line{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:170px;

}

.conveyor-line path{

    fill:none;

    stroke:#1fbfff;

    stroke-width:4;

    stroke-linecap:round;

    stroke-dasharray:1700;

    stroke-dashoffset:1700;

    animation:lineMove 8s linear infinite;

}

/*==================================================
ANIMATIONS
==================================================*/

@keyframes gearRotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes pulseFactory{

    0%,100%{

        transform:scale(1);

        opacity:.15;

    }

    50%{

        transform:scale(1.08);

        opacity:.35;

    }

}

@keyframes lineMove{

    to{

        stroke-dashoffset:0;

    }

}




/*==================================================
BANKING HERO
==================================================*/

.banking-hero{

    position:relative;
    overflow:hidden;

    min-height:100vh;

    display:flex;
    align-items:center;

    background:linear-gradient(135deg,#061426 0%,#0b2347 45%,#071935 100%);

}

/*==================================================
GRID
==================================================*/

.bank-grid{

    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.5;

    animation:gridMove 18s linear infinite;

}

/*==================================================
GLOW
==================================================*/

.bank-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

    animation:floatGlow 8s ease-in-out infinite;

}

.glow1{

    width:320px;
    height:320px;

    background:#009dff;

    top:-120px;
    left:-80px;

}

.glow2{

    width:280px;
    height:280px;

    background:#1b7dff;

    right:-80px;
    bottom:0;

}

.glow3{

    width:220px;
    height:220px;

    background:#36c5ff;

    left:45%;
    top:35%;

}

/*==================================================
BANK NETWORK
==================================================*/

.bank-network{

    position:absolute;
    inset:0;

}

.bank-network span{

    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#37d5ff;

    box-shadow:0 0 18px #37d5ff;

    animation:pulseNode 3s infinite;

}

.bank-network span:nth-child(1){

    left:15%;
    top:22%;

}

.bank-network span:nth-child(2){

    left:35%;
    top:38%;

}

.bank-network span:nth-child(3){

    left:55%;
    top:28%;

}

.bank-network span:nth-child(4){

    left:75%;
    top:45%;

}

.bank-network span:nth-child(5){

    left:48%;
    top:62%;

}

.bank-network span:nth-child(6){

    left:82%;
    top:72%;

}

/*==================================================
BANK ICONS
==================================================*/

.bank-icon{

    position:absolute;

    width:80px;
    height:80px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:20px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    color:#42c8ff;

    font-size:34px;

    animation:floatIcon 6s ease-in-out infinite;

}

.icon1{

    left:70px;
    top:90px;

}

.icon2{

    right:130px;
    top:90px;

}

.icon3{

    left:130px;
    bottom:100px;

}

.icon4{

    right:90px;
    bottom:120px;

}

.icon5{

    left:48%;
    top:22%;

}

/*==================================================
PLUS
==================================================*/

.bank-plus{

    position:absolute;

    width:24px;
    height:24px;

}

.bank-plus::before,
.bank-plus::after{

    content:"";

    position:absolute;

    background:#42c8ff;

}

.bank-plus::before{

    width:24px;
    height:3px;

    top:10px;

}

.bank-plus::after{

    width:3px;
    height:24px;

    left:10px;

}

.plus1{

    left:22%;
    top:18%;

}

.plus2{

    right:24%;
    top:28%;

}

.plus3{

    left:64%;
    bottom:18%;

}

/*==================================================
FINANCE LINE
==================================================*/

.finance-line{

    position:absolute;

    bottom:0;
    left:0;

    width:100%;
    height:180px;

}

.finance-line path{

    fill:none;

    stroke:#27c8ff;

    stroke-width:4;

    stroke-linecap:round;

    stroke-dasharray:1800;

    stroke-dashoffset:1800;

    animation:financeLine 7s linear infinite;

}

/*==================================================
IMAGE
==================================================*/

.hero-image{

    animation:heroFloat 5s ease-in-out infinite;

}

/*==================================================
ANIMATIONS
==================================================*/

@keyframes pulseNode{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.8);

    }

}

@keyframes floatIcon{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes floatGlow{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-30px);

    }

}

@keyframes financeLine{

    to{

        stroke-dashoffset:0;

    }

}

@keyframes heroFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}