/* ════════════════════════════════════════════════════════════════
   index.css  —  Home page styles
   Sections: Hero · What We Do · About · Connect With Teleshield
   ════════════════════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  padding-top: 160px;
  padding-bottom: 60px;
  background-image: url('../images/2025/image-1.png');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}
.hero .container { width: 100%; }
.hero-content { max-width: 640px; }

.hero-eyebrow {
  font-size: .8rem; font-weight: 300; color: var(--accent);
  letter-spacing: .1em; text-transform: uppercase;
  display: block; margin-bottom: 1rem;
}
.hero-title {
  font-size: 3rem; font-weight: 700; color: var(--white); line-height: 1.1;
}
.hero-title-line2 { margin-top: -15px; }

.hero-sub {
  font-size: 1.5rem; font-weight: 400; color: var(--accent);
  margin-top: 10px; line-height: 1.4;
}
.hero-tagline {
  font-size: 1.2rem; font-weight: 300; color: var(--muted);
  margin-top: 15px; margin-bottom: 20px;
}
.hero-btn-wrap { padding-top: 20px; }

/* ── WHAT WE DO ─────────────────────────────────────────────────── */
.section-whatwedo {
  background: var(--bg);
  min-height: 50vh;
  padding: 80px 18px 60px;
}
.whatwedo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.whatwedo-left  { padding-right: 40px; }
.whatwedo-right { padding-left: 40px; }

/* ── ABOUT US ───────────────────────────────────────────────────── */
.section-about { background: var(--bg); padding: 18px 0 80px; }

.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start;
}
.about-h2 { font-size: 2rem; font-weight: 700; color: var(--white); margin-bottom: 1.25rem; }

.about-block  { margin-bottom: 1.5rem; }
.about-label  {
  font-size: .8rem; font-weight: 300; color: var(--accent);
  display: block; margin-bottom: .4rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.about-body   { font-size: .85rem; font-weight: 300; line-height: 1.5rem; color: var(--white); }
.about-image img { width: 100%; border-radius: var(--r-card); }

/* ── CONNECT WITH TELESHIELD ────────────────────────────────────── */
.section-connect {
  min-height: 31vh;
  padding: 80px 18px 60px;
  background-image: url('../images/2025/image.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}
.connect-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
  max-width: var(--max-w); margin: 0 auto; width: 100%;
}
.connect-h2   { font-size: 2rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; }
.connect-body { font-size: 1rem; font-weight: 300; line-height: 1.5rem; color: var(--white); }

.social-btns { display: flex; gap: 1.5rem; justify-content: center; align-items: center; }
.social-btn  {
  color: var(--white); background: transparent; border: none; cursor: pointer;
  padding: 0; line-height: 1; display: flex; align-items: center;
  transition: color .2s, transform .2s;
}
.social-btn:hover { color: var(--accent); transform: scale(1.1); }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero         { padding: 120px 0 60px; }
  .hero-content { max-width: 70%; }
}
@media (max-width: 767px) {
  .hero         { padding: 120px 0 60px; min-height: auto; }
  .hero-content { max-width: 100%; }
  .hero-title   { font-size: 2rem; }
  .whatwedo-grid, .about-grid, .connect-grid { grid-template-columns: 1fr; gap: 30px; }
  .whatwedo-left, .whatwedo-right { padding: 0; }
}