/* Home page hero */
.hero { padding:3.5rem 0; }
.hero .bg-box {
  width: 100%; height: 500px;
  background-image: url('images/samplebg3.jpg');
  background-size: cover; background-repeat: no-repeat; background-position: center;
  border-radius: var(--radius); display:flex; align-items:center;
  position: relative;
}

/* Add overlay for better text readability */
.hero .bg-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
  border-radius: var(--radius);
}

.hero-inner { display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:center; position: relative; z-index: 1; }
.hero-left h1 { font-size:2.1rem; line-height:1.08; margin-bottom:0.6rem; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.lead { font-size:1.02rem; margin-bottom:1rem; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* Hero CTAs */
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero Card */
.hero-card .card { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9)); padding:1.2rem; border-radius:12px; box-shadow: var(--shadow-2); border:1px solid rgba(11,18,32,0.04); }

/* Featured services grid */
.service-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1.2rem; margin-top:1rem; }
.service-grid .service { background: linear-gradient(180deg, #fff, #fbfcff); padding:1.2rem; border-radius:12px; box-shadow: var(--shadow-1); border:1px solid rgba(11,18,32,0.03); transition: transform .2s ease, box-shadow .2s ease; }
.service-grid .service:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.service-grid .service h3 { margin-bottom:0.5rem; }
.service-grid .service p { color:var(--muted); line-height:1.5; }
.service-grid .small-link { margin-top:0.5rem; display:inline-block; color:var(--accent); font-weight:600; text-decoration:none; }

/* Responsive */
@media (max-width: 880px) {
  .hero-inner { grid-template-columns:1fr; gap:1.2rem; }
  .hero-left h1 { font-size:1.6rem; }
  .hero-card { order:-1; }
  .service-grid { grid-template-columns:1fr; }
  .hero .bg-box {
    background-position: right center;
  }
  .hero .bg-box::before {
    background: rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero { padding: 2rem 0; }
  .hero-left h1 { font-size: 1.6rem; }
  .hero-card .card { margin-top: 1rem; }
  .hero .bg-box {
    background-position: right center;
  }
  .hero-ctas { justify-content: center; }
}

@media (max-width: 600px) {
  .hero .bg-box {
    background-position: right center;
  }
}