/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* --------------------- END OF RESET ----------- */

/* @font-face {
  font-family: "Poppins-Black";
  src: url("./assets/fonts/Poppins-Black.ttf");
  font-weight: normal;
  font-style: normal;
} */
.ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* ---------------- END FONTS ------------------ */

/* declarando variaveis de cores */
:root {
  --DarkGreen: #294d6f;
  --White: #fff;
  --BlackOne: #000;
  --Bg: #f9f9f9;
  --BgTraramentos: #f9f9f9;
  --Gold: #faa72f;
  --BgField: #ffffff;
  --BgDark: #404040;
  --GreenWhats: #27cc6f;
  --HoverWhats: #136537;
}
/* -------------- END OF COLOR PRESETS ---------- */

html,
body {
  width: 100%;
  height: 100%;
}
body {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: var(--BlackOne);
  background: var(--clr-White);
  overflow-x: hidden;
}

section#main {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  margin: 0 auto;

  .hidden {
    display: none;
  }
  .show {
    display: flex;
  }

  .cta_whats {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    background: var(--GreenWhats);
    color: var(--White);
    padding: 10px 20px;
    width: max-content;
    height: auto;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    &:hover {
      background: var(--HoverWhats);
      color: var(--White) !important;
    }
  }

  /* top-bar */
  section#top_bar {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 10px;
    background: var(--DarkGreen);
    @media (max-width: 765px) {
      padding: 0;
      background: var(--BgDark);
    }
    div.s_left {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      padding: 10px 15px;
      @media (max-width: 765px) {
        width: 100%;
        background: var(--BgDark);
        padding: 20px 10px;
      }
      p {
        font-family: "Ubuntu", sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--White);
      }
    }
    div.s_right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      padding: 10px 15px;
      @media (max-width: 765px) {
        display: none;
      }
      div.social {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: max-content;
        height: auto;
        column-gap: 10px;
        margin-right: 25px;
        a {
          font-family: "Ubuntu", sans-serif;
          font-weight: 600;
          font-style: normal;
          color: var(--White);
          text-decoration: none;
        }
      }
      div.phone {
        p {
          font-family: "Ubuntu", sans-serif;
          font-weight: 500;
          font-style: normal;
          color: var(--White);
        }
      }
    }
  }

  /* menu */
  section#top-menu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--Gold);
    padding: 10px 15px;
    ul.desktop {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 22px;
      @media (max-width: 1280px) {
        column-gap: 15px;
      }
      @media (max-width: 1024px) {
        display: none;
      }
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        height: auto;
        &.logo {
          margin-right: 40px;
          @media (max-width: 1280px) {
            margin-right: 20px;
          }
          @media (max-width: 1024px) {
            margin-right: 0px;
          }
        }
        a {
          font-family: "Ubuntu", sans-serif;
          font-size: 16px;
          font-weight: 600;
          color: var(--White);
          text-decoration: none;
          &.cta_whats {
            @media (max-width: 1280px) {
              position: relative;
              width: 45px;
              height: 45px;
              border-radius: 50%;
              span {
                display: none;
              }
              img {
                position: absolute;
                z-index: 2;
              }
            }
          }

          &:hover {
            color: var(--BlackOne);
          }
        }
      }
    }
    ul.tablet {
      position: relative;
      width: 100%;
      display: none;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      @media (max-width: 1024px) {
        display: flex;
      }
      li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 15px;
        padding: 0 10px;
        &.links {
          position: relative;
          div.submenu {
            position: absolute;
            right: 75px;
            top: 86px;
            display: flex;
            width: max-content;
            padding: 10px;
            flex-direction: column;
            padding: 15px;
            background: var(--DarkGreen);
            list-style: none;
            z-index: 10;

            @media (max-width: 580px) {
              top: 65px;
              right: 0;
            }

            a {
              color: var(--White);
              text-decoration: none;
              margin: 10px 0;
              font-weight: 600;
            }
            &.hidden {
              display: none;
            }
          }
        }
        a {
          position: relative;
          font-family: "Ubuntu", sans-serif;
          font-weight: 300;
          font-style: normal;
          text-decoration: none;
          cursor: pointer;
        }
        div.wp {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: var(--GreenWhats);
          @media (max-width: 580px) {
            display: none;
          }
        }
      }
    }
  }

  /* top-banner */
  section#top-banner {
    position: relative;
    display: flex;

    align-items: center;
    justify-content: space-between;
    padding: 20px 100px;
    column-gap: 50px;
    width: 100%;
    min-height: 950px;
    background: url("../assets/images/banners/banner-small-blur.jpg");
    background-size: cover;
    @media (max-width: 1120px) {
      flex-direction: column;
    }
    @media (max-width: 580px) {
      padding: 50px 15px;
      min-height: 550px !important;
    }

    h2 {
      font-size: 60px;
      color: #fff;
      line-height: 1em;
      max-width: 680px;
      margin-bottom: 20px;
      @media (max-width: 1120px) {
        text-align: center;
      }
      @media (max-width: 580px) {
        font-size: 35px;
      }
    }
    h3 {
      color: #fff;
      font-size: 40px;
      max-width: 650px;
      @media (max-width: 580px) {
        font-size: 18px;
      }
    }
    video#video-top {
      width: 100%;
      max-width: 848px;
      height: 480px;
      @media (max-width: 1580px) {
        max-width: 50%;
        height: auto;
      }
      @media (max-width: 1120px) {
        max-width: 80%;
        height: auto;
      }
      @media (max-width: 580px) {
        max-width: 100%;
        height: auto;
      }
    }
    div.groupText {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      @media (max-width: 1120px) {
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 50px;
      }
    }
  }

  /* form contanct */
  form.form_contact {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    background: var(--Gold);
    &.dark {
      background: var(--BlackOne);
    }
    div.resp-api {
      width: 100%;
      height: auto;
      color: var(--DarkGreen);
      font-size: 20px;
      font-weight: 600;
    }
    div.group_content {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 50px;
      width: 100%;
      @media (max-width: 580px) {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
      }

      h2 {
        font-size: 40px;
        color: var(--DarkGreen);
        line-height: 1.1em;
        text-align: center;
        margin-bottom: 50px;
        &.dark {
          color: var(--Gold);
        }
        @media (max-width: 580px) {
          width: 100%;
          font-size: 30px;
          text-align: left;
          margin-bottom: 25px;
        }
      }

      div.group-fields {
        width: 100%;
        max-width: 600px;

        input.field {
          position: relative;
          width: 100%;
          padding: 15px;
          background: var(--White);
          border: 1px solid #a9b6c9;
          margin-bottom: 15px;
          &::placeholder {
            position: absolute;
            top: 5px;
            left: 5px;
            font-size: 12px;
            color: #a9b6c9;
          }
        }
        div.sbmt_field {
          width: 100%;
          min-height: 50px;
          button.sbmt {
            display: flex;
            width: max-content;
            column-gap: 10px;
            padding: 10px 20px;
            color: var(--White);
            background: var(--DarkGreen);
            border: 1px solid #707070;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 15px;
            cursor: pointer;
            transition: 0.5s;
            &:hover {
              background: #16293c;
            }
            &.dark {
              background: var(--Gold);
                img.loading {
              display: none;
              width: 15px;
              height: 15px;
              margin: 0;
              margin-top: 5px;
            }
            }
            svg {
              max-width: 15px;
            }
            img.loading {
              display: none;
              width: 15px;
              height: 15px;
              margin: 0;
              margin-top: 5px;
            }
          }
        }
      }
    }
  }
  form.form_contact_black {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    background: var(--BgDark);

    div.resp-api {
      width: 100%;
      min-height: 40px;
      color: var(--Gold);
      font-size: 20px;
      font-weight: 600;
    }
    div.group_content {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 50px;
      width: 100%;
      @media (max-width: 580px) {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
      }

      h2 {
        font-size: 40px;
        line-height: 1.1em;
        text-align: center;
        margin-bottom: 50px;
        color: var(--Gold);

        @media (max-width: 580px) {
          width: 100%;
          font-size: 30px;
          text-align: left;
          margin-bottom: 25px;
        }
      }

      div.group-fields {
        width: 100%;
        max-width: 600px;

        input.field {
          position: relative;
          width: 100%;
          padding: 15px;
          background: var(--White);
          border: 1px solid #a9b6c9;
          margin-bottom: 15px;
          &::placeholder {
            position: absolute;
            top: 5px;
            left: 5px;
            font-size: 12px;
            color: #a9b6c9;
          }
        }
        div.sbmt_field {
          width: 100%;
          min-height: 50px;
          button.sbmt {
            display: flex;
            width: max-content;
            column-gap: 10px;
            padding: 10px 20px;
            color: var(--White);
            background: var(--DarkGreen);
            border: 1px solid #707070;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 15px;
            &.dark {
              background: var(--Gold);
            }
            svg {
              max-width: 15px;
            }
              img.loading {
              display: none;
              width: 15px;
              height: 15px;
              margin: 0;
              margin-top: 5px;
            }
          }
        }
      }
    }
  }

  /* about me */
  section#about_me {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--White);
    padding: 100px 15px;
    align-items: center;
    justify-content: center;
    @media (max-width: 580px) {
      padding: 50px 15px 0px 15px;
    }
    h2 {
      font-size: 56px;
      color: var(--BgDark);
      line-height: 1.1em;
      margin-bottom: 50px;
      text-align: center;
      @media (max-width: 580px) {
        font-size: 40px;
      }
    }
    div.card {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 95%;
      max-width: 550px;
      align-items: center;
      justify-content: center;
      background: var(--Gold);
      padding: 30px 30px 35px 30px;
      border-radius: 15px;
      @media (max-width: 580px) {
        width: 100%;
        padding: 15px;
      }
      div.group_thumb {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        min-height: 430px;
        height: auto;
        margin-bottom: 30px;
        background: url(../assets/images/general/thumb_video.jpg) no-repeat
          center center;
        background-size: cover;
        img.play {
          width: max-content;
          height: auto;
          margin-top: 100px;
          z-index: 1;
          cursor: pointer;
        }
      }
    }
    div.group_text {
      display: flex;
      flex-direction: column;
      width: 100%;
      p {
        font-size: 24px;
        line-height: 1.3em;
        margin-bottom: 15px;
        &:last-child {
          margin-bottom: 50px;
        }
      }
    }
    a.whats {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      column-gap: 10px;
      background: var(--BgDark);
      color: var(--White);
      border-radius: 25px;
      text-decoration: none;
      font-weight: 600;
      bottom: -30px;
      &:hover {
        background: var(--HoverWhats);
      }
    }
  }

  /* tratamentos */
  section#treatments,
  section#treatments2 {
    display: flex;
    flex-direction: column;
    background: var(--BgTraramentos);
    padding: 100px 15px;
    align-items: center;
    justify-content: center;
    @media (max-width: 580px) {
      padding: 80px 15px 0 15px;
    }
    h2 {
      font-size: 42px;
      font-weight: 600;
      color: var(--DarkGreen);
      margin-bottom: -35px;
      line-height: 1em;
      @media (max-width: 580px) {
        font-size: 35px;
        margin-bottom: -20px;
      }
    }
    h5 {
      color: var(--DarkGreen);
      font-size: 22px;
      margin-bottom: 50px;
      font-weight: 400;
    }
    div.group-cards {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      width: 100%;
      max-width: 1100px;
      div.card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        column-gap: 25px;
        margin-bottom: 100px;
        img.timg {
          width: 100%;
          max-width: 400px;
          height: auto;
          @media (max-width: 580px) {
            margin-bottom: 30px;
          }
        }
        div.group-text {
          display: flex;
          width: 100%;
          max-width: 650px;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          h2.title {
            line-height: 1em;
            margin-bottom: 20px;
            color: var(--DarkGreen);
            font-size: 42px;
            font-weight: 600;
            @media (max-width: 580px) {
              font-size: 35px;
            }
          }
          p {
            color: var(--DarkGreen);
            font-size: 25px;
            line-height: 1.4em;
            margin-bottom: 25px;
            font-weight: 300;
            span {
              font-weight: 600;
            }
            @media (max-width: 580px) {
              font-size: 20px;
              line-height: 1.5em;
            }
          }
          a.wp {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--BgDark);
            color: var(--White);
            border-radius: 20px;
            padding: 15px 20px;
            text-decoration: none;
            column-gap: 15px;
            &:hover {
              background: var(--GreenWhats);
            }
          }
        }
      }
    }
  }

  /* social proof */
  section#social {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 50px 15px;
    background: var(--DarkGreen);

    div.yellowbar {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90%;
      max-width: 1170px;
      padding: 50px 20px;
      margin-bottom: 50px;
      background: var(--Gold);
      @media (max-width: 580px) {
        width: 100%;
        margin-bottom: 15px;
      }
      h2 {
        font-size: 45px;
        color: var(--White);
        line-height: 1.1em;
        font-weight: 600;
        text-align: center;
        span {
          color: var(--DarkGreen);
        }
        @media (max-width: 580px) {
          font-size: 25px;
        }
      }
    }
    div.group-cards {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
      column-gap: 20px;
      width: 90%;
      max-width: 1170px;
      padding: 50px 20px;
      @media (max-width: 580px) {
        flex-direction: column;
      }
      div.card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: 350px;
        @media (max-width: 580px) {
          margin-bottom: 50px;
        }
        img.user {
          width: 183px;
          height: 183px;
          border-radius: 50%;
          margin-bottom: 15px;
        }
        h4 {
          font-size: 31px;
          color: var(--Gold);
          margin-bottom: 20px;
          font-weight: 600;
          text-align: center;
        }
        p {
          font-size: 21px;
          font-weight: 300;
          color: var(--White);
          line-height: 1.2em;
          margin-bottom: 15px;
          text-align: left;
          @media (max-width: 580px) {
            text-align: center;
          }
        }
      }
    }
  }

  /* social location */
  section#location {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--White);
    padding: 50px 15px;
    div.group-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 850px;

      h2 {
        font-size: 65px;
        color: var(--BgDark);
        margin-bottom: -10px;
        @media (max-width: 580px) {
          font-size: 40px;
          text-align: center;
          line-height: 1.1em;
        }
      }
      h3 {
        font-size: 45px;
        color: var(--BgDark);
        margin-bottom: 50px;
        font-weight: 600;
        margin-bottom: 20px;
        @media (max-width: 580px) {
          font-size: 30px;
        }
      }
      h4 {
        font-size: 30px;
        font-weight: 400;
        text-align: center;
        line-height: 1.1em;
        margin-bottom: 50px;
      }
      h4.address {
        font-size: 30px;
        color: var(--BgDark);
        font-weight: 300;
        margin-bottom: 15px;
        line-height: 1.1em;
        text-align: center;
        @media (max-width: 580px) {
          font-size: 30px;
          line-height: 1.2em;
        }
      }
      a.wp {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--BgDark);
        color: var(--White);
        border-radius: 25px;
        padding: 15px 20px;
        text-decoration: none;
        column-gap: 15px;
        margin-bottom: 100px;
        &:hover {
          background: var(--HoverWhats);
        }
      }
    }
    div.map {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: auto;
      margin-bottom: 40px;
    }
    div.sign {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      p {
        font-size: 13px;
        font-weight: 200;
      }
      a {
        font-size: 13px;
        text-decoration: none;
        font-weight: 600;
      }
    }
  }

  /* -------------------------general settings------------------------- */
}
a {
  transition: 0.5s;
}
img.responsive {
  width: 100%;
  height: auto;
}
.shadow {
  -webkit-box-shadow: 10px 10px 6px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 6px -11px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 6px -11px rgba(0, 0, 0, 0.75);
}

/* Estilos para o modal */
.modal {
  display: none; /* Escondido por padrão */
  position: fixed; /* Fica fixo na tela */
  z-index: 1; /* Fica sobre outros elementos */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Habilita scroll se necessário */
  background-color: rgb(0, 0, 0); /* Fundo preto */
  background-color: rgba(0, 0, 0, 0.4); /* Fundo preto com opacidade */
  .modal-content {
    background-color: #fff;
    margin: 15% auto; /* Centralizado verticalmente e horizontalmente */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largura do modal */
    max-width: 600px; /* Largura máxima */
  }
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
}