/* HOME page specific - hero, services, experience, socials, footer complements */

/* Hero */
.hero{
  min-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 20px;
  background:
    radial-gradient(1200px 400px at 10% 10%, rgba(0,180,255,0.07), transparent 6%),
    radial-gradient(1000px 360px at 90% 90%, rgba(0,123,255,0.05), transparent 6%),
    linear-gradient(180deg, rgba(2,6,23,0.95), rgba(5,9,14,0.9));
}
.hero .hero-inner{
  width:100%;
  max-width:980px;
  text-align:center;
  padding:28px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 10px 40px rgba(2,6,23,0.6);
}
.hero h1{
  font-size:2.3rem;
  line-height:1.05;
  margin-bottom:10px;
}
.hero h1 span{color:var(--accent)}
.hero p{
  color:var(--muted);
  margin-bottom:18px;
  font-size:1.05rem;
}

/* CTA row */
.hero .row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:8px;
}

/* Services */
.services{
  padding:70px 20px;
}
.service-grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.service-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:22px;
  border-radius:14px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.45);
  transition: transform .22s ease, box-shadow .22s ease;
}
.service-card h3{margin-bottom:8px}
.service-card p{color:var(--muted);font-size:0.95rem}
.service-card:hover{transform:translateY(-8px);box-shadow: 0 24px 60px rgba(0,123,255,0.12);}

/* Experience */
.experience{padding:70px 20px;background:linear-gradient(180deg, rgba(255,255,255,0.005), transparent)}
.timeline{
  display:grid;
  gap:14px;
  max-width:900px;
  margin:0 auto;
}
.exp-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--card);
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.02);
}
.exp-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);margin-top:8px;
}

/* Floating social icons */
.social-floating{
  position:fixed; left:18px; top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;z-index:1100;
}
.social-floating a{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--card), rgba(255,255,255,0.01));
  color:var(--white);font-weight:700;text-decoration:none;
  box-shadow: 0 8px 26px rgba(2,6,23,0.6);
  transition:transform .18s;
}
.social-floating a:hover{transform:translateY(-6px)}

/* Chat button */
#chatbot-btn{
  position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--accent), #00b4ff);
  color:#021026;font-size:22px;cursor:pointer;box-shadow:0 18px 40px rgba(0,123,255,0.18);
  z-index:1200;
}
/* WhatsApp Floating Button (Common CSS) */
#whatsapp-btn {
  position: fixed;
  bottom: 90px;   /* sits above the chat button */
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 18px 40px rgba(37, 211, 102, 0.4);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
#whatsapp-btn:hover {
  transform: translateY(-4px);
}
#whatsapp-btn img {
  width: 28px;
  height: 28px;
}

/* small screens */
@media (max-width:700px){
  .hero h1{font-size:1.6rem}
  .hero p{font-size:.95rem}
  .social-floating{left:8px}
  .container{padding:20px}
}