.header-wrapper {
  background-image: url("../img/hero.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.btn-animation {
  transition: all 150ms ease-in;
  display: inline-block;
}
.btn-animation:hover {
  transform: scale(1.2);
}
.service-card-1 {
  background-image: url("../img/service-card-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.service-card-2 {
  background-image: url("../img/service-card-2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.service-card-3 {
  background-image: url("../img/service-card-3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.tab-contents {
  display: none;
}
.tab-contents.active {
  display: grid;
}

.tabs-container {
  background: radial-gradient(
      circle at -10% 50%,
      #3d2102 -30%,
      #3d2102 -20%,
      transparent 20%
    ),
    radial-gradient(circle at 50% 50%, #fff 0%, #eee -40%, transparent 21%),
    radial-gradient(
      circle at 100.3% 50%,
      #22d3ee 0%,
      #22d3ee -10%,
      transparent 15%
    );
}

.gradient-container {
  background: radial-gradient(
      circle at -10% 50%,
      #3d2102 -30%,
      #3d2102 -20%,
      transparent 20%
    ),
    radial-gradient(
      circle at 50% 50%,
      #0b0b0b 0%,
      #2626268d -40%,
      transparent 21%
    ),
    radial-gradient(
      circle at 100.3% 50%,
      #22d3ee 0%,
      #22d3ee -30%,
      transparent 15%
    );
}

section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

section.active {
  opacity: 1;
  transform: translateY(0);
}