/* Cards Grid */

/* Services Hero - centered title */

.services-hero {

  position: relative;

  background: linear-gradient(135deg, #FFFFFF 0%, #F8F5F0 100%);

  padding: 80px 24px;

  text-align: center;

  overflow: hidden;

}



.services-hero-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: url("../img/shared/bg-7.jpg?v_4");

  background-repeat: no-repeat;

	background-size: cover;

  opacity: 0.2;

  pointer-events: none;

}



.services-hero-content {

  position: relative;

  z-index: 1;

  max-width: 800px;

  margin: 0 auto;

  text-align: center;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(196, 30, 58, 0.1);

  color: var(--red);

  padding: 8px 20px;

  border-radius: 60px;

  font-size: 0.8rem;

  font-weight: 600;

  margin-bottom: 24px;

}



.hero-badge i {

  font-size: 0.9rem;

}



.services-hero-content h1 {

  font-size: 2.5rem;

  font-weight: 700;

  color: var(--gray-900);

  margin-bottom: 20px;

  letter-spacing: -0.02em;

  text-align: center;

}



.services-hero-content h1 span {

  color: var(--red);

  position: relative;

  display: inline-block;

}



.services-hero-content h1 span::after {

  content: '';

  position: absolute;

  bottom: 6px;

  left: 0;

  width: 100%;

  height: 8px;

  background: rgba(196, 30, 58, 0.2);

  z-index: -1;

  border-radius: 4px;

}



.services-hero-content p {

  font-size: 1rem;

  color: var(--gray-600);

  line-height: 1.6;

  text-align: center;

  max-width: 600px;

  margin: 0 auto;

}



/* ???????????? */

@media (max-width: 768px) {

  .services-hero {

    padding: 60px 20px;

  }

  

  .services-hero-content h1 {

    font-size: 1.8rem;

  }

  

  .services-hero-content p {

    font-size: 0.9rem;

  }

  

  .hero-badge {

    font-size: 0.7rem;

    padding: 6px 14px;

  }

}



@media (max-width: 480px) {

  .services-hero {

    padding: 50px 16px;

  }

  

  .services-hero-content h1 {

    font-size: 1.5rem;

  }

  

  .services-hero-content h1 span::after {

    bottom: 4px;

    height: 6px;

  }

  

  .services-hero-content p {

    font-size: 0.85rem;

  }

}



.cards-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 32px;

  margin-top: 40px;

}



.service-card {

  background: var(--white);

  border-radius: var(--radius-md);

  padding: 32px;

  transition: var(--transition);

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--gray-200);

}



.service-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

  border-color: var(--red-light);

}



.service-icon {

  width: 60px;

  height: 60px;

  background: var(--red-light);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

}



.service-icon i {

  font-size: 1.8rem;

  color: var(--red);

}



.service-card h3 {

  font-size: 1.2rem;

  margin-bottom: 12px;

  color: var(--gray-800);

}



.service-card p {

  color: var(--gray-600);

  font-size: 0.9rem;

  line-height: 1.6;

}

/* Cards Grid */

.cards-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 32px;

  margin-top: 40px;

}



.service-card {

  background: var(--white);

  border-radius: var(--radius-md);

  padding: 32px;

  transition: var(--transition);

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--gray-200);

}



.service-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

  border-color: var(--red-light);

}



.service-icon {

  width: 60px;

  height: 60px;

  background: var(--red-light);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

}



.service-icon i {

  font-size: 1.8rem;

  color: var(--red);

}



.service-card h3 {

  font-size: 1.2rem;

  margin-bottom: 12px;

  color: var(--gray-800);

}



.service-card p {

  color: var(--gray-600);

  font-size: 0.9rem;

  line-height: 1.6;

}