/* background-image: url("../assets/menubg.png"); */
.headerBg {
  background-color: white;
  margin-top: 0;
  position: inherit;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.headerBg .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0.4rem 0;
}

.headerBg nav a {
  color: #f6966f !important;
}

.contentWrapper {
  margin: 3rem 0;
}

.contentWrapper article .title {
  font-size: 1rem;
  color: #748093;
  max-width: 100%;
  text-align: justify;
  margin: auto;
}

.contentWrapper article h3 {
  font-size: 1.5rem;
  color: #748093;
  margin: 1rem 0;
  margin-top: 3rem;
}

.servicesWrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

.serviceCard {
  width: 30%;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.serviceCard img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.serviceCard h4 {
  font-size: 1.2rem;
  color: #748093;
  margin: 1rem 0;
}

.serviceCard p {
  font-size: 1rem;
  color: #748093;
  margin: 1rem 0;
  max-width: 100% !important;
}

.productionTypesWrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 8rem;
  margin-bottom: -7rem;
}

.productionTypeCard {
  position: relative;
  width: 30%;
  padding: 2rem;
  background-color: #f7f9fa;
  margin-bottom: 10rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  border: 2px solid #f6966f;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.productionTypeCard img {
  border-radius: 100%;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 2px solid #f6966f;
  background-color: #fff;
}

.productionTypeCard p {
  color: #748093;
  margin-top: 7rem;
  text-align: center;
  max-width: 100% !important;
  font-size: 1.5rem !important;
}

@media (max-width: 800px) {
  .serviceCard {
    width: 100%;
  }

  .productionTypeCard {
    width: calc(100% / 2 - 1rem);
  }
}

@media (max-width: 472px) {
  .productionTypeCard {
    width: 100%;
  }
}