@import './theme.css';

#serv {
  padding: var(--section-py) 0;
  overflow-x: hidden;
  overflow: visible;
  background: var(--surface-muted);
}

/* Keyframes em theme.css */

/* Estado inicial */
#serv h2,
#serv h3,
#serv p {
  opacity: 0;
  transform: translate3d(52px, 0, 0);
}

#serv img {
  opacity: 0;
  transform: translate3d(-52px, 0, 0);
}

/* Animações quando visível */
#serv.is-visible h2,
#serv.is-visible h3,
#serv.is-visible p {
  animation: revealFromRight var(--dur-reveal) var(--ease-reveal) forwards;
}

#serv.is-visible img {
  animation: revealFromLeft var(--dur-reveal) var(--ease-reveal) forwards;
}

/* Outros estilos */
#serv h3 {
  font-size: 22px;
  margin: 0 0 20px;
}

#serv h2 {
  position: relative;
  color: var(--primary-text);
  text-transform: none;
}

#serv h2::after {
  position: absolute;
  content: "";
  height: 4px;
  width: 60px;
  bottom: 0;
  left: 0;
  background: var(--gradient-brand);
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(52, 152, 219, 0.28);
}

#serv p {
  font-family: "Montserrat", Sans-serif;
  font-size: 28px;
}

#serv .col-md-6.d-flex {
  align-items: flex-end;
}

#serv img {
  margin-top: 10px;
  background: transparent;
  border: 0;
  border-right: 0;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}