@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css);

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #232759;
  --primary-colorGreen: rgb(0, 98, 128);
  --secondary-color: #52caf9c0;
  --secondaryColor: #52b3f9;
  --tertiary-color: rgb(14, 137, 244);
  --tertiaryDark-color: rgb(2, 28, 36);
  --soft-green: #c7f1f7;
  --cream-color: #e2a967;
  --round-border: 0.48em;
}

html, body {
  margin: 0; 
  padding: 0; 
}


body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  background-color: rgba(182, 202, 249, 0.294);
}

/* buttons that change the page */
.btn {
  display: block;
  padding: 0.8em 0.6em;
  text-decoration: none;
  color: var(--primary-color);
  background-color: var(--soft-green);
  font-weight: bold;
  transition: background-color 0.3s ease-in-out;
  border: 1px solid var(--primary-color);
  border-radius: var(--round-border);
  width: fit-content;
  margin: 0 auto 2em;
}

.btn:hover {
  background-color: var(--cream-color);
}

.wrapperContainer {
  max-width: 90vw;
  margin: auto;
  padding: 0 0 1.6em;
  min-height: auto;
}

/* Languages options */
.language_option_container {
  display: flex;
  justify-content: end;
  margin-top: 1em;
  gap: 1em;
}

.language_option_container label {
  color: var(--primary-color);
  font-weight: bolder;
  font-size: 1rem;
  white-space: nowrap;
}

.language_option_container select {
  padding: 0.3em;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  background-color: var(--secondary-color);
  cursor: pointer;
}

.language_option_container select:focus {
  outline: none;
  border-color: var(--tertiary-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.language-switcher button.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
  font-weight: bold;
}

.header {
  max-width: 90vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2em 0;
  position: relative;
  z-index: 1;
}

.header_container {
  display: flex;
  flex-direction: column;
  width: auto;
}

.logo {
  display: flex;
  align-items: center;
  color: var(--primary-color);
  font-weight: bolder;
  flex-shrink: 1;
}

.header img {
  display: block;
  width: 5em;
  height: 3.5em;
}

.logo_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo_title {
  font-size: 0.6em;
}

.header_nav {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1em;
}

.header_nav__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 1em;
  margin-top: 3.25em;
}

.header_nav__list a {
  text-decoration: none;
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 0.6em;
  border-radius: 0.4em;
  outline: 1px solid rgb(213, 204, 204);
  text-align: center;
  width: 100%;
  transition: background-color 0.3s ease;
}

.header_nav__list a:hover,
.header_nav__list a:focus {
  background-color: var(--tertiary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}

.hamburger_button {
  display: none;
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 1.8em;
  padding: 0.5em;
  cursor: pointer;
  z-index: 2;
}

.hamburger_button:focus {
  outline: none;
}

.hamburger_button[aria-expanded="false"] .icon::before {
  content: "\2630";
}

.hamburger_button[aria-expanded="true"] .icon::before {
  content: "\2715";
}

/* banner */
.hero_banner {
  background-image: url(image/pictures/random/hero-background1.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 28em;
  display: flex;
  justify-content: end;
  padding: 0.6em;
  border-radius: var(--round-border);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
}

.hero_banner__title {
  color: var(--cream-color);
}
.hero_banner__slogan {
  font-size: 1.4em;
  color: var(--cream-color);
  font-weight: bolder;
  margin: 3em 0 0 2em;
}

.hero_banner_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero_banner_box a {
  text-decoration: none;
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 0.2em;
  margin: 0 auto;
  border: 1px solid rgb(213, 204, 204);
  border-radius: 0.4em;
  transition: background-image 10s ease-in-out;
}

.hero_banner a:hover {
  background-color: var(--tertiary-color);
}

/* Chiropractic */
.chiropractic {
  background-image: url(./image/pictures/random/spinal.jpg);
  padding: 1em;
  margin-top: 2em;
  border-radius: var(--round-border);
}

.chiropractic_title,
.treatment_title,
.howItWork_explanation__title,
.benefits_title,
.aboutUs__title,
.ourInstalations,
.testimony_title,
.contact_title,
.table_title,
/* Title to galerias of facilities and treatments */
.facilitiesGallery_mainTittle,
.treatments,
.treatmentsGallery_addiction {
  text-align: center;
  margin: 1.2em 0;
  color: var(--primary-colorGreen);
  font-size: 2em;
  text-transform: uppercase;
}

.chiropractic_explanation {
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-indent: 2em;
}

/* How it works? */
.howItWork {
  display: flex;
  gap: 2em;
  margin-top: 2em;
}
.howItWork_explanation__title {
  margin: 0;
}

.howItWork_explanation {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.howItWork_explanation p {
  text-indent: 2em;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.howItWork_explanation__check {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  align-items: flex-start;
  gap: 1em;
  letter-spacing: 0.06em;
}

.howItWork_explanation__check input {
  display: inline-block;
  margin-right: 0.6em;
}

.howItWork img {
  border-radius: var(--round-border);
}

/* Treatment */
.treatment_content {
  width: 90vw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  justify-content: space-between;
  margin: auto;
  padding: 1em;
}

.cards {
  display: flex;
  flex-direction: column;
  flex-basis: calc(33.33% - 0.6em);
  overflow: hidden;
  text-align: center;
}

.cards img {
  max-width: 100%;
  display: block;
  width: 100%;
  height: 21.88em;
  object-fit: cover;
  border-radius: 0.48em 0.48em 0 0;
}

.cards_content {
  background-color: var(--soft-green);
  padding: 1em;
  border-radius: 0 0 0.48em 0.48em;
  flex-grow: 1;
}

.cards_title {
  color: var(--primary-colorGreen);
  padding: 0.4em 0;
}

.cards p {
  text-align: left;
  text-indent: 2em;
  letter-spacing: 0.08em;
  color: var(--primary-colorGreen);
}

.treatment_button {
  display: block;
  text-decoration: none;
  color: var(--primary-color);
  background-color: var(--secondary-color);
  padding: 0.6em;
  border-radius: 0.4em;
  text-align: center;
  width: fit-content;
  margin: auto;
  transition: background-color 0.3s ease;
}

.treatment_button:hover,
.treatment_button:focus {
  background-color: var(--tertiary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}

/* Benefits */
.benefits {
  display: flex;
  justify-content: space-between;
}

.benefits_list li {
  margin-bottom: 1.2em;
  font-weight: bold;
  list-style-position: inside;
}

.benefits_list li::marker {
  font-weight: bold;
  color: var(--primary-colorGreen);
  font-size: 1.2em;
  margin-right: 5px;
}

.benefits img {
  border-radius: var(--round-border);
}

/* About us */
.aboutUs_box {
  display: flex;
  gap: 0.6em;
}

.aboutUs_box img {
  border-radius: var(--round-border);
}

.aboutUs_explanation {
  text-indent: 2em;
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin-top: 2.4em;
}

.aboutUs_explanation strong {
  color: var(--primary-colorGreen);
}

.aboutUs h3 {
  font-size: 1.8em;
  font-weight: 600;
  color: var(--primary-colorGreen);
}

/* Facilities index */
.ourInstalations_datails {
  display: flex;
  justify-content: space-between;
  width: 90vw;
  overflow: hidden;
  gap: 1em;
}

.ourInstalations_img img {
  display: block;
  max-width: 100%;
  height: 20em;
  object-fit: cover;
  border-radius: 0.46em 0.46em 0 0;
  width: 100%;
}
.ourInstalations_datails__weatingRoom p,
.ourInstalations_datails__equipment p {
  background-color: var(--soft-green);
  padding: 0.8em;
  border-radius: 0 0 0.46em 0.46em;
  color: var(--primary-color);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-indent: 2em;
  margin-bottom: 2em;
}

/* Testimony */
#testimonialInput {
  width: 100%;
  padding: 0.625em;
  outline: 1px solid var(--primary-color);
  border-radius: var(--round-border);
  min-height: 8em;
}

.testimonyPoust_button {
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-bottom: 2em;
}

.testimony_card img {
  display: inline-block;
  width: 70px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #f0f0f0;
  text-align: center;
  font-weight: bold;
  margin: 1em 0;
}

.testimony_card {
  display: flex;
  align-items: center;
  gap: 1.2em;
}

#photoInput {
  display: none;
}

.testimonialAdd,
.edit,
.remove {
  font-size: 0.8em;
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.8em;
  display: inline-block;
  border: none;
  text-transform: uppercase;
  outline: 2px solid var(--primary-color);
  border-radius: 1em;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.testimonialAdd:hover,
.edit:hover,
.remove:hover,
.testimonialAdd:focus,
.edit:focus,
.remove:focus {
  background-color: var(--secondary-color);
  color: black;
}

.edit {
  margin-right: 1em;
}

/* Contact */

.contact {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.contact_address {
  padding: 0em;
}

.contact_address__address,
.contact_address__instagran,
.contact_address__email {
  text-decoration: none;
  color: black;
  background-color: transparent;
  padding: 0 1em;
  border-radius: 2px;
  display: block;
  width: fit-content;
  margin: .2em 0;
}
.contact_address__address{
  padding: 1em;
}

.contact_address__address:hover,
.contact_address__instagran:hover,
.contact_address__email:hover {
  background-color: var(--secondary-color);
}

.contact_address__instagran {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 1em;
}
.contact_address__instagran img {
  width: 40px;
  height: 40px;
}
.contact_address__address img {
  width: 30px;
  height: 30px;
}

.fa-envelope {
  background-clip: text;
  color: blue;
}

.contact_address {
  font-style: normal;
}

.fa-phone-volume,
.fa-envelope {
  font-size: 2em;
  margin: 0.4em 0;
}

.fa-phone-volume {
  color: var(--primary-colorGreen);
}

.contact_address__phone {
  background-color: transparent;
  width: fit-content;
  padding: 0 0.6em;
  border-radius: 2px;
  font-weight: bolder;
}

.contact_address__atention {
  color: var(--primary-color);
  padding: 0.6em;
  font-size: 300;
}

.contact_address__atention span {
  font-size: 1.6em;
  font-weight: 600;
  color: var(--primary-colorGreen);
}

iframe {
  margin-top: 2em;
}
iframe,
.contact_address__pictures img {
  border-radius: 10px;
}
.contact_address__pictures {
  display: flex;
  justify-content: space-between;
}
.contact_address__picturesTitle,
.contact_address__pictures p {
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 1em;
}
.contact_address__pictures1 {
  margin-bottom: 1.2em;
}
.contact_address__picturesTitle {
  margin: 1em 0;
}

/* Open hour */
.horarios_container {
  width: 80%;
  margin: auto;
  border: 1px solid var(--tertiaryDark-color);
  border-collapse: collapse;
  color: var(--primary-color);
  background-color: #f8f8f8;
  border-radius: var(--round-border, 8px);
  overflow: hidden;
}

.table_title {
  font-weight: bolder;
  text-align: center;
  width: 100%;
  padding: 15px;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 1.8em;
}

.horarios_header {
  display: flex;
  background-color: var(--primary-color);
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tertiaryDark-color);
}

.horarios_day_header,
.horarios_period_header {
  padding: 12px 15px;
  text-align: center;
  flex: 1;
}

.horarios_day_header {
  text-align: left;
}

.horario_item {
  display: flex;
  border-bottom: 1px solid var(--tertiaryDark-color);
}

.horario_item:last-of-type {
  border-bottom: none;
}

.horario_day,
.horario_period {
  padding: 12px 15px;
  text-align: center;
  flex: 1;
  border-right: 1px solid var(--tertiaryDark-color);
}

.horario_day {
  text-align: left;
  flex: 1;
}

.horario_period:last-of-type {
  border-right: none;
}

.close {
  color: red;
  font-weight: bolder;
}

.tableFoot {
  padding: 15px;
  text-align: center;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 0.9em;
}

.tableFoot p {
  margin: 0;
}

/* footer */
.footer {
  background-color: var(--primary-color);
  color: #fff;
  text-align: center;
  padding: 0.625em;
}

/* OtherTreatments  and Facilities*/

.otherTreatments {
  max-width: 90vw;
  margin: 0 auto 2em;
  padding: 1em;
  
}

/* Já incluído no seletor '.chiropractic_title, .treatment_title, ...' acima */
.treatmentsGallery,
.facilitiesGallery {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2em;
  margin: 0 auto;
  padding: 0;
}

.treatmentsGallery_picture,
.facilitiesGallery_pictures {
  display: flex;
  align-items: center;
  text-align: center;
  flex-basis: calc(50% - 1em);
}
.facilitiesGallery_pictures{
  flex-direction: column;
  padding: 1em;
}

.treatmentsGallery_img,
.facilitiesGallery_img {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.treatmentsGallery_img img,
.facilitiesGallery_img img {
  width: 100%;
  height: 25em;
  object-fit: cover;
  display: block;
  border-radius: var(--round-border);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

.treatmentsGallery_img p, 
.facilitiesGallery_pictures p {
  color: var(--primary-color);
  padding: 1em 0;
  font-size: 0.95em;
  max-width: 40em;
  text-align: center;
  margin-top: 1.2em;
  line-height: 1.5;
}

/* Estilo específico para a última imagem/artigo da segunda section .treatmentsGallery */
.treatmentsGallery .treatmentsGallery_picture:last-child {
  flex-basis: 100%;
  max-width: 40em;
  margin: 0 auto;
}


.treatmentsGallery_img p strong {
  color: var(--cream-color);
  font-size: 1.2em;
}


@media (max-width: 48em) {
  html, body {
    overflow-x: hidden;
    width: 100%; 
  }
  .wrapperContainer {
    width: 100%; 
    margin: auto; 
  }
  

  .hero_banner,
  .language-switcher {
    display: none;
  }

  .hamburger_button {
    display: block;
  }
  .header_nav {
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
  }

  .header_nav__list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background-color: var(--soft-green);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 var(--round-border) var(--round-border);
    overflow: hidden;
    margin: 0;
  }

  .header_nav__list.active {
    display: flex;
  }
  .header_nav__list li {
    width: 100%;
  }

  .header_nav__list a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.8em 1.2em;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: transparent;
    color: var(--primary-color);
    box-shadow: none;
  }
  .header_nav__list li:last-child a {
    border-bottom: none;
  }
  .language_option_container.mobile_menu_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0.8em 1.2em;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--soft-green);
    gap: 0.5em;
  }
  .language_option_container.mobile-menu-item label,
  .language_option_container.mobile-menu-item select {
    width: 100%;
    box-sizing: border-box;
  }

  .language_option_container.mobile-menu-item select {
    background-color: #fff;
    border: 1px solid #ccc;
  }

  .howItWork {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .treatment_content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .benefits {
    flex-direction: column-reverse;
    gap: 1em;
  }

  .aboutUs_box {
    flex-direction: column-reverse;
  }

  .aboutUs h3 {
    margin: 0 0 1em;
  }
  /* Facilities index */
  .ourInstalations_datails {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
  }
  
  .testimony_card img {
    margin: 2em 0 0;
  }

  .testimony_card {
    flex-direction: column;
  }

  .contact_address__pictures {
    flex-direction: column;
    align-items: center;
  }

  .horarios_container {
    width: 95%;
    font-size: 0.9em;
  }

  .horarios_header {
    display: none;
  }

  .horario_item {
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--tertiaryDark-color);
    margin-bottom: 10px;
    border-radius: var(--round-border, 5px);
    overflow: hidden;
  }

  .horario_item:last-of-type {
    margin-bottom: 10px;
  }

  .horario_day {
    width: 100%;
    text-align: center;
    background-color: var(--primary-color);
    color: #fff;
    padding: 8px 15px;
    border-bottom: 1px solid var(--tertiaryDark-color);
    border-right: none;
  }

  .horario_period {
    width: 100%;
    padding: 8px 15px;
    border-right: none;
  }

  .horario_item .horario_period:first-of-type:not(.close) {
    border-bottom: 1px solid var(--tertiaryDark-color);
  }
  .horario_item .horario_period:last-of-type:not(.close) {
    border-bottom: none;
  }

  .horario_item .horario_period.close {
    border-bottom: none;
    padding: 10px 15px;
  }

  .tableFoot {
    border-radius: var(--round-border, 8px);
    margin-top: 15px;
  }

  .otherTreatments {
    max-width: 90vw;
    padding: 1em;
  }
  /* Other facilities */
  .facilitiesGallery,
  .treatmentsGallery {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
  }

  .treatmentsGallery_picture,
  .facilitiesGallery_pictures {
    flex-basis: 90%;
    max-width: unset;
  }

  .treatmentsGallery_img img {
    height: 20em;
  }

  .treatmentsGallery .treatmentsGallery_picture:last-child {
    flex-basis: 90%; 
    max-width: unset;
  }
}