/* Homepage styling - professional colorful theme */
:root{
  --primary:#0d6efd;
  --accent:#6f42c1;
  --muted:#6c757d;
  --bg:#f8fafc;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.7);
}

body{
  background: linear-gradient(180deg,var(--bg),#ffffff);
  color:#222;
}

/* Hero */
.hero-section{
  padding:110px 0;
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(13,110,253,0.06);
  position:relative;
  overflow:hidden;
}

/* Top full-width banner that sits above the hero */
.top-banner{
  width:100%;
  background-image: linear-gradient(rgba(13,110,253,0.45), rgba(111,66,193,0.25)), url('.././images/banner-bg.jpg');
  background-size:cover;
  background-position:center;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  border-radius:8px;
  margin-bottom:18px;
  box-shadow:0 6px 18px rgba(16,24,40,0.06);
}
.top-banner .banner-inner{max-width:1100px;padding:18px;text-align:center}
.top-banner h5{font-weight:600;margin-bottom:6px;letter-spacing:0.2px}
.top-banner p{margin:0;color:rgba(255,255,255,0.92)}

@media (max-width:768px){
  .top-banner{min-height:120px}
  .top-banner .banner-inner{padding:12px}
}
.hero-section::after{
  content:'';
  position:absolute;
  right:-120px;top:-80px;
  width:420px;height:420px;
  background: radial-gradient(circle at 30% 30%, rgba(13,110,253,0.12), transparent 35%), radial-gradient(circle at 70% 70%, rgba(111,66,193,0.08), transparent 30%);
  transform:rotate(20deg);
}
.hero-section .display-3{font-weight:700;color:#fff;text-shadow:0 6px 20px rgba(0,0,0,0.25)}
.hero-section .lead{color:rgba(255,255,255,0.92)}
.hero-section .btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));border:none;box-shadow:0 8px 18px rgba(13,110,253,0.18)}
.hero-section .btn-outline-light{border-color:rgba(255,255,255,0.45)}

/* Category cards */
.skill-card{border-radius:14px;overflow:hidden;border:1px solid rgba(15,23,42,0.04);box-shadow:0 6px 18px rgba(16,24,40,0.04);transition:transform .28s,box-shadow .28s}
.skill-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(16,24,40,0.08)}
.skill-card .card-body{padding:18px}
.skill-card h4{margin-bottom:6px}
.skill-card p{color:var(--muted);font-size:.95rem}
.skill-card:hover .card-body p{color:#fff !important}

/* Ensure category images have equal heights and maintain aspect ratio */
.skill-card .card-img-top{
  width:100%;
  height:220px; /* consistent height */
  object-fit:cover;
  display:block;
}

/* Stats glass cards */
.stats-section{padding:40px 0;background-position:center;background-size:cover;color:#fff}
.stat-card{background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));padding:28px;border-radius:12px;border:1px solid rgba(255,255,255,0.08)}
.stat-card h2{font-size:2.2rem}

/* Testimonials */
.testimonial-card{border-radius:12px}
.testimonial-img{width:72px;height:72px;object-fit:cover;border-radius:50%}

/* CTA */
.bg-primary{background:linear-gradient(90deg,var(--primary),var(--accent)) !important}
.bg-primary .btn-light{background:#fff;color:var(--primary);border:none}

/* Responsive tweaks */
@media (max-width:768px){
  .hero-section{padding:60px 0}
  .hero-section::after{display:none}
  .skill-card .card-img-top{height:160px}
}

/* subtle link hover */
a{text-decoration:none}
a:hover{text-decoration:underline}