body{
margin:0;
font-family:'Inter',sans-serif;
background:#f7f9fc;
color:#111;
}

/* NAVBAR */
header{
display:flex;
justify-content:space-between;
align-items:center;

padding:12px 28px;
height:78px;

background:rgba(255,255,255,.78);
backdrop-filter:blur(18px);

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

position:fixed;
top:24px;
left:50%;
transform:translateX(-50%);

width:83%;
max-width:1600px;
z-index:9999;
}

/* LOGO */
.logo img{
height:72px;
display:block;
}

/* NAV */
.nav{
display:flex;
align-items:center;
gap:34px;
}

.nav a{
text-decoration:none;
color:#374151;
font-size:16.5px;
font-weight:600;
transition:.3s;
}

.nav a:hover{
color:#4f46e5;
}

.nav-btn{
background:linear-gradient(135deg,#4f46e5,#7c3aed);
padding:16px;
border-radius:14px;
color:#fff;
font-size:16.5px;
font-weight:600;
}

/* RIGHT */
.header-right{
display:flex;
align-items:center;
gap:18px;
}

.phone{
padding:12px 18px;
font-size:16px;
background:#f8fafc;
border-radius:14px;
font-weight:600;
color:#4f46e5;
}


/* DROPDOWN */
.dropdown{
position:relative;
display:inline-block;
}

.dropdown > a{
display:inline-block;
padding:10px 0;
text-decoration:none;
color:#374151;
font-size:16.5px;
font-weight:600;
}

.dropdown-menu{
position:absolute;
top:100%;
left:0;
margin-top:12px;

background:#ffffff;
padding:15px;
border-radius:16px;
box-shadow:0 20px 40px rgba(0,0,0,.10);

display:flex;
flex-direction:column;
gap:12px;

min-width:320px;
max-height:420px;
overflow-y:auto;

opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:.3s ease;
z-index:99999;
}

.drop-item{
display:flex;
align-items:center;
gap:12px;

padding:10px 12px;
border-radius:14px;
cursor:pointer;

transition:.25s ease;
min-height:auto;
}

.dropdown:hover 
.dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.drop-item:hover{
background:linear-gradient(135deg,#f8fafc,#eef2ff);
transform:translateX(6px) scale(1.01);
box-shadow:0 10px 25px rgba(79,70,229,.08);
}

.drop-item:active{
transform:scale(.98);
}

.drop-item b{
display:block;
font-size:15px;
line-height:1.2;
font-weight:700;
margin-bottom:2px;
}

.drop-item p{
margin:0;
font-size:13px;
line-height:1.2;
color:#6b7280;
}

.icon{
width:42px;
height:42px;
min-width:42px;

border-radius:12px;
display:flex;
align-items:center;
justify-content:center;

font-size:18px;
color:#fff;
flex-shrink:0;
}

@media(max-width:768px){

.dropdown-menu{
left:0;
transform:none;
width:92vw;
max-height:70vh;
overflow-y:auto;
gap:6px;
padding:10px;
}

.dropdown:hover .dropdown-menu{
transform:none;
}

}

/* COLORS */
.blue{background:#3b82f6;}
.green{background:#10b981;}
.purple{background:#8b5cf6;}
.orange{background:#f59e0b;}

.drop-item p{
margin:0;
font-size:12px;
color:#777;
}

/* HERO */
.hero{
padding:80px 8%;
}

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

.hero span{
color:#4f46e5;
}

/* STATS */
.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
padding:60px 8%;
background:white;
}

.stat-box{
background:#f1f5ff;
padding:30px;
border-radius:12px;
text-align:center;
}

/* POPUp */
.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.popup-box{
position:relative;
width:350px;
background:white;
border-radius:20px;
overflow:hidden;
animation:popupAnim 0.3s ease;
}

/* HEADER */
.popup-header{
background:linear-gradient(45deg,#4facfe,#6a11cb);
color:white;
text-align:center;
padding:25px;
}

.popup-icon{
font-size:30px;
margin-bottom:10px;
}

/* BODY */
.popup-body{
padding:20px;
text-align:center;
}

.call-box{
background:#eef2ff;
padding:10px;
border-radius:10px;
margin-bottom:15px;
font-weight:bold;
}

/* INPUT */
.popup-body input{
width:100%;
padding:12px;
margin:8px 0;
border-radius:10px;
border:1px solid #ddd;
}

/* BUTTON */
.submit-btn{
width:100%;
padding:12px;
background:linear-gradient(45deg,#4facfe,#6a11cb);
color:white;
border:none;
border-radius:10px;
cursor:pointer;
}

/* CLOSE */
.close-btn{
position:absolute;
top:10px;
right:15px;
color:white;
cursor:pointer;
font-size:18px;
z-index:10;
}

/* ANIMATION */
@keyframes popupAnim{
from{transform:scale(0.8);opacity:0;}
to{transform:scale(1);opacity:1;}
}


/* ===== SLIDER LAYOUT ===== */

/* LAYOUT */
.main-layout{
  display:flex;
  gap:20px;
  padding:30px;
}

.left-content{
  width:80%;
}

/* SLIDER BOX */
.slider-box{
  width:20%;
  height:420px;
  background:linear-gradient(145deg,#ffffff,#f3f4f6);
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  border:2px solid transparent;
  background-clip:padding-box;
  position:sticky;
  top:100px;
}

/* GRADIENT BORDER GLOW */
.slider-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:2px;
  background:linear-gradient(45deg,#4f46e5,#06b6d4,#4f46e5);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* TITLE */
.slider-title{
  text-align:center;
  font-weight:600;
  font-size:18px;
  margin-bottom:10px;
  color:#4f46e5;
  flex-shrink:0;   /* IMPORTANT FIX */
}

/* SLIDER VIEW AREA */
.slider{
  flex:1;
  overflow:hidden;
}

/* TRACK */
.slider-track{
  display:flex;
  flex-direction:column;
  animation:scrollSmooth 30s linear infinite;
}

/* IMAGES */
.slide{
  width:100%;
  height:80px;   /* smaller = more images visible */
  object-fit:contain;
  margin-bottom:10px;
  border-radius:10px;
  background:#ffffff;
  padding:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  border:1px solid #f1f5f9;
  transition:0.3s;
}

/* HOVER EFFECT */
.slide:hover{
  transform:scale(1.05);
}

/* PAUSE ON HOVER */
.slider-track:hover{
  animation-play-state:paused;
}

/* ANIMATION */
@keyframes scrollSmooth{
  0%{transform:translateY(0);}
  100%{transform:translateY(-50%);}
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){
  .main-layout{
    flex-direction:column;
  }

  .left-content{
    width:100%;
  }

  .slider-box{
    width:100%;
    height:300px;
  }
}

body{
margin:0;
font-family:'Inter',sans-serif;
background:linear-gradient(135deg,#f8fafc,#eef2ff);
color:#111827;
padding-top:120px;
}

/* HERO */
.hero{
text-align:center;
padding:80px;
background:linear-gradient(45deg,#4facfe,#6a11cb);
color:white;
}

/* CARD */
.container{
padding:60px 8%;
display:grid;
gap:25px;
}

.card{
background:rgba(255,255,255,0.6);
backdrop-filter:blur(12px);
border-radius:16px;
padding:25px;
transition:0.3s;
}

.card:hover{
transform:translateY(-8px);
}

.card h2{
color:#4f46e5;
}

/* TAG */
.tag{
background:#eef2ff;
padding:8px;
border-radius:10px;
display:inline-block;
margin:5px;
}

.card{
  margin-bottom:20px;
}

.flow-gap{
  margin:20px 0;
}

/* HERO */
.hero{
  padding:40px 8%;
  background:#f3f4f6;
}

/* BLUE BOX */
.hero-box{
  background:linear-gradient(120deg,#3b82f6,#7c3aed);
  color:white;
  padding:40px 50px;
  border-radius:20px;
  text-align:left;   /* 🔥 IMPORTANT FIX */
}

/* HEADING */
.hero-title{
  font-size:32px;
  line-height:1.4;
  margin-bottom:20px;
}

/* DESCRIPTION */
.hero-desc{
  max-width:700px;
  font-size:14px;
  line-height:1.6;
  margin-bottom:20px;
  opacity:0.9;
}

/* STATS */
.hero-stats{
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  font-size:14px;
}

.hero-stats{
  display:flex;
  gap:15px;
  margin-top:20px;
}

.stat-box{
  background:rgba(255,255,255,0.2);
  padding:8px 14px;
  border-radius:8px;
  color:white;              /* 🔥 WHITE TEXT */
  font-size:14px;
  font-weight:500;
}

/* BACKGROUND */
.consult-popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:999;
}

/* BOX */
.consult-box{
  width:320px;
  background:white;
  border-radius:20px;
  overflow:hidden;
  position:relative;
}

/* HEADER */
.consult-header{
  background:linear-gradient(120deg,#3b82f6,#7c3aed);
  color:white;
  text-align:center;
  padding:25px 15px;
}

.consult-header .icon{
  font-size:30px;
  margin-bottom:10px;
}

.consult-header h2{
  margin:5px 0;
}

.consult-header p{
  font-size:14px;
  opacity:0.9;
}

/* CLOSE */
.close-btn{
  position:absolute;
  top:10px;
  right:15px;
  color:white;
  cursor:pointer;
}

/* BODY */
.consult-body{
  padding:20px;
}

/* CALL BOX */
.call-box{
  background:#eef2ff;
  padding:12px;
  border-radius:10px;
  text-align:center;
  margin-bottom:15px;
  cursor:pointer;
}

/* INPUT */
.consult-body input{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
  border:1px solid #ddd;
}

/* BUTTON */
.consult-body button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:linear-gradient(120deg,#3b82f6,#7c3aed);
  color:white;
  cursor:pointer;
}
.hero-stat{
  background:rgba(255,255,255,0.2);
  padding:8px 14px;
  border-radius:8px;
  color:white;
  font-size:14px;
}


.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.stat-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
  text-align:center;
  color:#111;
}

.stat-box h3{
  margin:0;
  color:#4f46e5;
}

.stat-box p{
  margin:5px 0 0;
  font-size:13px;
}



.highlight-strip{
  background:linear-gradient(120deg,#eef2ff,#f5f3ff);
  text-align:center;
}


.strategy-block{
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid #e5e7eb;
}


.highlight-strip{
  background:linear-gradient(120deg,#eef2ff,#f5f3ff);
  text-align:center;
}


.mini-highlights{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:15px;
}

.mini-highlights div{
  background:#eef2ff;
  padding:6px 12px;
  border-radius:6px;
  font-size:13px;
}


.objective-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.objective-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
}

.objective-box h4{
  margin-bottom:5px;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.benefit-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.project-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
}

.eligibility-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.eligibility-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
}

.process-steps{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.step-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
}

.process-steps{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.step-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
}

.docs-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.docs-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
}

.statss-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
  margin-top:20px;
}

.statss-box{
  background:#f3f4f6;
  padding:15px;
  border-radius:10px;
  text-align:center;
  color:#111;
}







/* Add this once in CSS for creative premium effect */
.glow-card{
position:relative;
overflow:hidden;
}

.glow-card::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:radial-gradient(circle, rgba(79,70,229,0.08), transparent 60%);
animation:rotateGlow 8s linear infinite;
pointer-events:none;
}

.glow-card > *{
position:relative;
z-index:1;
}

.benefit-box{
transition:0.3s ease;
}

.benefit-box:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 12px 25px rgba(0,0,0,0.08);
}

@keyframes rotateGlow{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

/* Optional creative effect */
.pulse-card{
position:relative;
overflow:hidden;
}

.pulse-card::after{
content:"";
position:absolute;
right:-40px;
top:-40px;
width:140px;
height:140px;
border-radius:50%;
background:rgba(79,70,229,0.08);
animation:pulseMove 3s infinite ease-in-out;
}

.pulse-card > *{
position:relative;
z-index:1;
}

.docs-box{
transition:0.3s ease;
}

.docs-box:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.07);
}

@keyframes pulseMove{
0%,100%{transform:scale(1);}
50%{transform:scale(1.2);}
}


/* Creative premium process styling */
.process-card .step-box{
position:relative;
transition:0.3s ease;
border-left:4px solid #4f46e5;
}

.process-card .step-box:hover{
transform:translateX(8px);
box-shadow:0 12px 24px rgba(0,0,0,0.08);
}

.process-card .step-box::before{
content:"";
position:absolute;
left:-9px;
top:18px;
width:12px;
height:12px;
border-radius:50%;
background:#4f46e5;
}

/* Creative premium hover effect */
.premium-timeline .statss-box{
transition:0.3s ease;
position:relative;
overflow:hidden;
}

.premium-timeline .statss-box:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 14px 28px rgba(0,0,0,0.08);
}

.premium-timeline .statss-box::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#4f46e5,#06b6d4);
}

/* Premium list styling */
.trust-card .premium-list{
padding-left:0;
list-style:none;
margin-top:20px;
}

.trust-card .premium-list li{
background:#f8fafc;
padding:14px 16px;
margin-bottom:12px;
border-radius:12px;
transition:0.3s ease;
border-left:4px solid #4f46e5;
}

.trust-card .premium-list li:hover{
transform:translateX(8px);
box-shadow:0 10px 22px rgba(0,0,0,0.07);
}

/* Elegant final section */
.final-strip{
text-align:center;
background:linear-gradient(135deg,#ffffff,#eef2ff);
border:1px solid rgba(79,70,229,0.08);
}

.final-strip .mini-highlights{
justify-content:center;
}

.final-strip:hover{
transform:translateY(-4px);
transition:0.3s ease;
box-shadow:0 12px 24px rgba(0,0,0,0.06);
}

@media (max-width:768px){

/* body */
body{
  overflow-x:hidden;
  padding-top:95px;
}

/* Navbar */
header{
  width:95%;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 15px;
  height:auto;
  border-radius:18px;
  flex-wrap:wrap;
}

.logo img{
  height:52px !important;
}

.nav{
  display:none;
}

.header-right{
  width:100%;
  justify-content:flex-end;
  margin-top:8px;
}

.phone{
  display:none;
}

.nav-btn{
  padding:10px 14px;
  font-size:14px;
}

/* Hero */
.hero{
  padding:20px 15px !important;
}

.hero-box{
  padding:24px 18px !important;
}

.hero-title{
  font-size:30px !important;
  line-height:1.25;
}

.hero-desc{
  font-size:15px;
}

.hero-stats{
  flex-direction:column;
  gap:10px;
}

/* Layout */
.main-layout{
  flex-direction:column;
  padding:10px;
}

.left-content,
.slider-box{
  width:100%;
}

.slider-box{
  position:static;
  height:240px;
}

/* all grids become single column */
.stats-grid,
.objective-grid,
.benefits-grid,
.project-grid,
.eligibility-grid,
.process-steps,
.docs-grid,
.statss-grid{
  grid-template-columns:1fr !important;
}

/* Cards */
.container{
  padding:20px 15px;
}

.card{
  padding:18px;
}

h2{
  font-size:25px;
}

p, li{
  font-size:15px;
  line-height:1.7;
}

img{
  max-width:100%;
  height:auto;
}

}

@media (max-width:768px){

/* Show mobile menu */
.menu-toggle{
  display:block;
  font-size:32px;
  cursor:pointer;
  color:#111;
}

.nav.active{
  display:flex;
  flex-direction:column;
  position:absolute;
  top:80px;
  left:0;
  width:100%;
  background:#fff;
  padding:20px;
  gap:14px;
  border-radius:16px;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.menu-toggle{
 display:none;
}

@media (max-width:768px){

.menu-toggle{
 display:block;
}

.nav{
 display:none;
}

.nav.active{
 display:flex;
}

}

/* Remove weird blue border/glow */
.hero-box,
.slider-box,
header{
  border:none !important;
  outline:none !important;
  box-shadow:none;
}

/* Keep clean shadow only */
header{
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

}

@media (max-width:768px){

.slider-box::before{
  display:none !important;
}

.slider-box{
  border:none !important;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

}

@media (max-width:768px){

/* popup overlay above navbar */
.popup,
.consult-popup{
  z-index:20000 !important;
}

/* popup box */
.popup-box,
.consult-box{
  position:relative;
  z-index:20001 !important;
  margin-top:40px;
}

/* close button always visible */
.close-btn{
  position:absolute;
  top:12px;
  right:14px;
  z-index:20002 !important;
  font-size:24px;
  padding:8px;
  cursor:pointer;
}

}

@media (max-width:768px){

.dropdown-menu{
  display:none;
  position:static;
  opacity:1;
  visibility:visible;
  transform:none;
  box-shadow:none;
  padding:10px 0 0;
  margin-top:0;
  min-width:100%;
}

.dropdown.active .dropdown-menu{
  display:flex;
  flex-direction:column;
}

.dropdown > a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
}

}

/* Hide menu icon on desktop */
.menu-toggle{
  display:none !important;
}

/* Show only on mobile */
@media (max-width:768px){
  .menu-toggle{
    display:block !important;
    font-size:32px;
    cursor:pointer;
  }
}

@media (max-width:768px){

.dropdown-menu{
  max-height:70vh !important;
  overflow-y:auto !important;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-right:5px;
}

.nav.active{
  max-height:80vh;
  overflow-y:auto;
}

}