html {
  background-color: var(--background-main-color);
}

main {
  background-color: var(--background-main-color);
  min-height: 70vh;
}

.section-hero {
  min-height: 70vh;
  background: var(--blend-black) url("/src/assets/images/background-local.png")
    center / cover no-repeat;
  background-blend-mode: overlay;
}

.section-hero img {
  width: 212px;
  height: auto;
}

.btn-cta__whatsapp {
  width: 75%;
  height: 3rem;
  background-color: var(--button-green-color);
  color: var(--secondary-color);
  border: none;
  border-radius: 2rem;
  cursor: pointer;
}

.btn-cta__whatsapp:hover {
  background-color: var(--button-green-color-hover);
  color: var(--secondary-color-hover);
}

.btn-cta__whatsapp:active {
  background-color: var(--button-green-color-active);
  color: var(--secondary-color-active);
}

.social-medias {
  max-width: 50%;
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  list-style: none;
  margin: 0.5rem 0 0 0;
  padding: 0;
}

.social-medias span.fa-brands:hover {
  color: var(--primary-color-hover);
}

.social-medias span.fa-brands:active {
  color: var(--primary-color-active);
}

.rating-badge {
  max-width: 65%;
}

.rating-badge strong {
  color: var(--secondary-color);
}

.rating-badge span.text-only {
  color: var(--secondary-color);
}

.section-services {
  background-color: var(--background-main-color);
}

.service-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 75%;
  gap: 0.25rem;
  text-align: center;
}

.service-container p {
  width: 80%;
}

.services-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.25rem;
  height: 5.25rem;
  background: var(--background-global-color);
  border: solid 2px var(--primary-color);
  border-radius: 50%;
  font-size: 1.65rem;
  color: var(--primary-color);
  box-sizing: border-box;
}

.section-before-and-after {
  min-height: 40vh;
  background: var(--blend-black)
    url("/src/assets/images/before-and-after-background.png") center / cover
    no-repeat;
  background-blend-mode: overlay;
}

.section-before-and-after p {
  max-width: 90%;
}

#carouselBeforeAndAfter {
  max-width: 93%;
  margin: 0 auto;
}

.carousel-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  width: 6%;
}

.section-benefits {
  width: 100%;
  height: auto;
}

.section-reviews {
  width: 100%;
  height: auto;
}

.benefits-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 70%;
  margin: 0 auto;
}

.review-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 80%;
  height: 19rem;
  background-color: var(--background-global-color);
  border: solid 1px var(--medium-gray);
  border-radius: 0.5rem;
  text-align: center;
  padding: 1.25rem;
}

.review-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border: solid 1px var(--primary-color);
  border-radius: 50%;
  margin: 0 auto;
}

.section-reviews a {
  color: var(--primary-color);
}

.section-reviews a:hover {
  color: var(--primary-color-hover);
}

.section-reviews a:active {
  color: var(--primary-color-active);
}

.section.faq {
  width: 100%;
}

#faq {
  width: 80%;
  max-width: 90%;
}

#faq.accordion.accordion-flush .accordion-button {
  background-color: var(--background-global-color);
  color: var(--secondary-color);
  gap: 0.35rem;
}
.accordion-button {
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: var(--background-global-color);
  color: var(--secondary-color);
  border: 0.2rem solid var(--primary-color);
  border-radius: 0.25rem;
}

#faq.accordion.accordion-flush .accordion-button::after {
  background-image: none !important;
  transform: none !important;
  filter: none !important;
}

#faq.accordion.accordion-flush .accordion-button::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffc733'><path d='M7 5l6 5-6 5'/></svg>") !important;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.25s ease;
}

#faq.accordion.accordion-flush .accordion-button.collapsed::after {
  transform: rotate(0deg) !important;
}

#faq.accordion.accordion-flush .accordion-button:not(.collapsed)::after {
  transform: rotate(90deg) !important;
}

#faq .accordion-body {
  background-color: var(--medium-gray);
  color: var(--secondary-color);
}

#location {
  background: var(--blend-black)
    url("/src/assets/images/location-background.png") center / cover no-repeat;
  background-blend-mode: overlay;
}

.business-hours {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.business-hours ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#location iframe {
  max-width: 100%;
  height: 17.5rem;
}

.btn-cta__trace-rote {
  width: 50%;
  height: 2.25rem;
  background-color: var(--light-gray);
  color: var(--secondary-color);
  border: none;
  border-radius: 2rem;
  text-decoration: none;
  cursor: pointer;
}

.btn-cta__trace-rote:hover {
  background-color: var(--light-gray-hover);
}

.btn-cta__trace-rote:active {
  background-color: var(--light-gray-active);
}

.about-owner-img {
  width: 17.5rem;
  border-radius: 0.75rem;
}

.about-text {
  max-width: 80%;
  text-align: center;
}

.about-text strong {
  font-weight: inherit;
  color: inherit;
}

@media (min-width: 710px) {
  .section-hero {
    min-height: 53vh;
  }

  .section-hero p {
    max-width: 90%;
  }

  .section-hero img {
    width: 242px;
  }

  .btn-cta__whatsapp {
    max-width: 45%;
    height: 3.25rem;
  }

  .rating-badge p {
    max-width: 80%;
  }

  .service-container {
    width: 60%;
  }

  .service-container p {
    width: 70%;
  }

  #carouselBeforeAndAfter {
    max-width: 85%;
  }

  .review-card {
    max-width: 45%;
  }

  #faq {
    width: 83%;
    max-width: 90%;
  }

  #location iframe {
    max-width: 100%;
    height: 17.5rem;
  }

  .btn-cta__trace-rote {
    width: 50%;
    height: 2.25rem;
  }

  #location iframe {
    width: 75%;
    height: 18.65rem;
  }

  .btn-cta__trace-rote {
    width: 30%;
    height: 2.3rem;
  }

  .about-owner-img {
    width: 18rem;
    border-radius: 0.75rem;
  }

  .about-text {
    max-width: 65%;
    text-align: center;
  }
}

@media (min-width: 992px) {
  .section-hero p {
    max-width: 70%;
  }

  .btn-cta__whatsapp {
    max-width: 36.75%;
  }

  .social-medias {
    margin: 0;
  }

  .service-container {
    flex-direction: column;
    width: 50%;
  }

  .service-container p {
    width: 60%;
  }

  .section-before-and-after p {
    max-width: 65%;
  }

  #carouselBeforeAndAfter {
    max-width: 63%;
  }

  .review-card {
    max-width: 33%;
    height: 18.5rem;
  }

  #faq {
    width: 75%;
  }

  #location iframe {
    width: 70%;
    height: 22rem;
  }

  .btn-cta__trace-rote {
    width: 23.35%;
    height: 2.5rem;
  }

  .about-owner-img {
    width: 20.8rem;
  }

  .about-text {
    max-width: 55%;
  }
}

@media (min-width: 1200px) {
  .section-hero p {
    max-width: 63.75%;
  }

  .section-hero img {
    width: 280px;
  }

  .btn-cta__whatsapp {
    max-width: 30.65%;
    height: 3rem;
  }

  .service-container p {
    width: 50%;
  }

  .section-before-and-after p {
    max-width: 52%;
  }

  #carouselBeforeAndAfter {
    max-width: 47%;
  }

  .benefits-item {
    max-width: 70%;
  }

  section .review-card {
    max-width: 31%;
  }

  .review-card {
    max-width: 25%;
    height: 22rem;
  }

  #faq {
    width: 62%;
  }

  #location iframe {
    width: 58%;
  }

  .btn-cta__trace-rote {
    width: 18.75%;
  }

  .about-owner-img {
    width: 27rem;
  }

  .about-text {
    max-width: 35%;
    text-align: start;
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 18px;
  }

  .section-hero {
    min-height: 47vh;
  }

  .section-hero p {
    max-width: 40%;
  }

  .section-hero img {
    width: 306px;
  }

  .btn-cta__whatsapp {
    max-width: 17.75%;
  }

  .rating-badge p {
    max-width: 80%;
  }

  .service-container p {
    width: 30%;
  }

  .section-before-and-after p {
    max-width: 35%;
  }

  #carouselBeforeAndAfter {
    max-width: 32%;
  }

  .benefits-item {
    max-width: 80%;
  }

  section .review-card {
    max-width: 16.5%;
  }

  .review-card {
    max-width: 30%;
  }

  #faq {
    width: 40%;
  }

  #location iframe {
    width: 35.75%;
    height: 23.75rem;
  }

  .btn-cta__trace-rote {
    width: 17%;
  }

  .about-owner-img {
    width: 24.35rem;
  }

  .about-text {
    max-width: 40%;
  }
}

@media (min-width: 1600px) {
  .section-hero p {
    max-width: 30%;
  }

  .btn-cta__whatsapp {
    max-width: 13.5%;
  }

  .rating-badge p {
    max-width: 80%;
  }

  .about-text {
    max-width: 25%;
  }
}