/* ========== H3 IT Solutions – Custom Styles ========== */
* { font-family: 'Inter', sans-serif; }

body {
  background-color: #091227;
  color: #eef3fc;
  padding-top: 70px;
}

.bg-nav-custom { background-color: #17264B; }
.bg-logo-custom { background-color: #AECCFF; }
.text-logo-accent { color: #AECCFF; }

.btn-logo {
  background-color: #AECCFF;
  color: #091227;
  font-weight: 600;
  border: none;
  transition: all 0.2s ease;
}
.btn-logo:hover { background-color: #9bb8f0; color: #091227; }

.btn-outline-logo {
  border: 1px solid #AECCFF;
  color: #AECCFF;
  background: transparent;
  transition: 0.2s;
}
.btn-outline-logo:hover { background-color: #AECCFF; color: #091227; }

.card-custom {
  background-color: #0e1a2b;
  border: 1px solid #1e2c44;
  border-radius: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card-custom:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
  border-color: #2e426b;
}

.badge-logo {
  background-color: #17264B;
  color: #AECCFF;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
}

.hero-slide {
  min-height: 500px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #091227e0 0%, #091227a0 80%);
}
.hero-content { position: relative; z-index: 2; }

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #AECCFF40;
  border-radius: 50%;
  padding: 1.2rem;
  background-size: 60%;
}
.carousel-indicators button {
  background-color: #AECCFF;
  height: 4px;
  border-radius: 4px;
  width: 30px;
}

.price-tag { font-weight: 700; font-size: 1.4rem; color: #AECCFF; }

.team-img {
  width: 110px; height: 110px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #AECCFF;
  padding: 3px;
}

.footer-custom {
  background-color: #0a1222;
  border-top: 1px solid #1e2c44;
}

section { scroll-margin-top: 70px; }
.section-title { font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.underline-accent {
  width: 70px; height: 4px;
  background: #AECCFF;
  border-radius: 4px;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .hero-slide { min-height: 420px; }
  .display-4 { font-size: 2.2rem; }
  body { padding-top: 60px; }
}