*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}

:root{
  --primary:#2563eb;
  --dark:#020617;
  --light:#f8fafc;
  --text:#1f2937;
}

body{color:var(--text);line-height:1.7;background:#fff}
.container{max-width:1100px;margin:auto;padding:0 20px}

/* HEADER */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  transition: all 0.35s ease;
}

/* Scrolled state */
.header.scrolled {
  background: rgba(248, 250, 252, 0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.header-flex{display:flex;justify-content:space-between;align-items:center;height:90px}
.logo img{height:70px}

/* NAV */
nav a{margin-left:25px;text-decoration:none;color:var(--text);font-weight:500;position:relative}
nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--primary);transition:.3s}
nav a:hover::after{width:100%}

/* HERO */
.hero{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;padding:120px 0 90px;text-align:center}
.hero h1{font-size:48px}
.hero span{color:#93c5fd}
.hero p{max-width:700px;margin:25px auto 0;color:#e5e7eb}

/* SECTIONS */
.section{padding:70px 0}
.section-title{text-align:center;font-size:34px;margin-bottom:30px}
.section-text{max-width:800px;margin:0 auto 25px;text-align:center;color:#475569}
.bg-light{background:var(--light)}
/* Reduce divider height */
.section-divider svg {
  height: 60px;
}
/* Offset anchor scroll for sticky header */
section[id] {
  scroll-margin-top: 110px; /* slightly more than header height */
}

/* GRID */
.grid-4,.services-grid,.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:30px;
}

/* SERVICES – ORB */
.service-orb-card{
  background:rgba(255,255,255,.9);
  border-radius:22px;
  padding:55px 28px 40px;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  transition:.4s;
}
.service-orb-card:hover{transform:translateY(-12px);box-shadow:0 35px 70px rgba(0,0,0,.15)}

.orb{width:90px;height:90px;border-radius:50%;margin:0 auto 25px;display:flex;align-items:center;justify-content:center}
.orb svg{width:46px;fill:#fff}
.orb.blue{background:radial-gradient(circle,#60a5fa,#2563eb)}
.orb.purple{background:radial-gradient(circle,#a78bfa,#6d28d9)}
.orb.green{background:radial-gradient(circle,#34d399,#059669)}
.orb.orange{background:radial-gradient(circle,#fdba74,#ea580c)}

.service-orb-card h3{font-size:18px;margin-bottom:12px}
.service-orb-card p{font-size:14.5px;color:#64748b}

/* ================= WHY KM INFOWAY ================= */

.why-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 90px 0;
}

.why-section .section-text {
  max-width: 860px;
  margin-bottom: 55px;
}



/* Icon */
.why-card span {
  font-size: 34px;
  display: inline-block;
  margin-bottom: 16px;
}

/* Title */
.why-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1f2937;
}

/* Text */
.why-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #64748b;
}

/* Hover */
.why-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 65px rgba(0,0,0,0.14);
}

/* Reveal animation */
.why-card {
  opacity: 0;
  transform: translateY(30px);
}

.why-card.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Stagger */
.why-card:nth-child(1){transition-delay:.1s}
.why-card:nth-child(2){transition-delay:.25s}
.why-card:nth-child(3){transition-delay:.4s}
.why-card:nth-child(4){transition-delay:.55s}
.why-card:nth-child(5){transition-delay:.7s}
.why-card:nth-child(6){transition-delay:.85s}

/* Mobile */
@media (max-width: 768px) {
  .why-section {
    padding: 70px 0;
  }
  .why-card {
    padding: 32px 24px;
  }
}

/* Grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 35px;
}

/* Card */
.why-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 28px;
  text-align: left;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Icon */
.why-card span {
  font-size: 34px;
  display: inline-block;
  margin-bottom: 15px;
}

/* Title */
.why-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1f2937;
}

/* Text */
.why-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #64748b;
}

/* Hover */
.why-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 65px rgba(0,0,0,0.14);
}

/* Reveal animation */
.why-card {
  opacity: 0;
  transform: translateY(30px);
}

.why-card.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Stagger */
.why-card:nth-child(1){transition-delay:.1s}
.why-card:nth-child(2){transition-delay:.25s}
.why-card:nth-child(3){transition-delay:.4s}
.why-card:nth-child(4){transition-delay:.55s}
.why-card:nth-child(5){transition-delay:.7s}
.why-card:nth-child(6){transition-delay:.85s}

/* Mobile */
@media (max-width: 768px) {
  .why-section {
    padding: 80px 0;
  }

  .why-card {
    padding: 32px 24px;
  }
}


/* BUTTONS */
.btn-primary,.btn-outline{
  padding:14px 34px;
  border-radius:30px;
  text-decoration:none;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{border:2px solid var(--primary);color:var(--primary)}
.contact-actions{display:flex;justify-content:center;gap:20px;margin-top:30px}

/* FOOTER */
.footer{background:var(--dark);color:#fff;text-align:center;padding:25px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:.8s}
.reveal.active{opacity:1;transform:none}

/* MOBILE */
@media(max-width:768px){
  .hero h1{font-size:38px}
  .contact-actions{flex-direction:column}
}