/* Page-specific styles for services.html */
/* Add services page custom styles here */

.services-hero {
  padding-top: 180px;
  padding-bottom: 120px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.services-hero .hero-image img {
  width: 100%;
  max-width: 620px;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(15, 76, 129, 0.12);
  display: block;
  margin: auto;
}

.services-hero .hero-badge {
  background: rgba(14, 90, 196, 0.08);
  color: #fff;
}

.services-hero .hero-content h1 {
  max-width: 780px;
  color: #fff;
}


.services-hero .hero-image img {
  max-width: 520px;
  margin: auto;
}

.services .section-title {
  margin-bottom: 60px;
}

.services .services-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 992px) {
  .services .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services .services-grid {
    grid-template-columns: 1fr;
  }
}

.why-us {
  background: #F8FBFF;
}

.why-us .why-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 992px) {
  .why-us .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .why-us .why-grid {
    grid-template-columns: 1fr;
  }
}

.cta-section {
  padding-top: 120px;
  padding-bottom: 120px;
}

.cta-section .cta-wrapper {
  align-items: center;
}

.cta-section .cta-image img {
  max-width: 420px;
}