@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700;900&display=swap");

:root {
  --white: #fff;
  --black: #000;
  --pallete1: #6a1e1e;
  --pallete2: #ffb22b;
  --pallete3: #f2f2f2;
}
* {
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  list-style: none;
  border: 0;
  box-sizing: border-box;
  color: inherit;
}
a:hover,
a:focus {
  text-decoration: none;
}

.explore_profissional__floatbar {
  display: none !important;
}

@media screen and (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

img {
  width: 100%;
  height: auto;
}

body {
  background: #fff;
  font-family: "Montserrat", sans-serif;
}

.cta__btn {
  display: inline-block;
  padding: 12px 34px;
  min-width: 170px;
  border-radius: 5px;
  font: normal normal 600 16px/19px Montserrat;

  @media screen and (max-width: 768px) {
    padding: 8px 12px;
    min-width: 0;
    font: normal normal 600 12px/15px Montserrat;
  }
}

.callout {
  text-align: center;
  margin: 65px auto;

  @media screen and (max-width: 768px) {
    margin: 40px auto;
  }

  h1 {
    color: inherit;
    font: normal normal bold 22px/34px Montserrat;

    @media screen and (max-width: 768px) {
      font: normal normal bold 18px/28px Montserrat;
    }
  }
  p {
    font: normal normal normal 20px/24px Montserrat;
    margin: 40px auto;

    @media screen and (max-width: 768px) {
      font: normal normal normal 14px/18px Montserrat;
      margin: 20px auto;
    }
  }
  ul > li {
    font: normal normal normal 20px/24px Montserrat;
    @media screen and (max-width: 768px) {
      font: normal normal normal 14px/18px Montserrat;
    }
  }
}

.highlight {
  background: var(--pallete3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 5px;
  margin-bottom: 55px;
  @media screen and (max-width: 768px) {
    display: none;
  }

  .cta__btn {
    background-color: var(--pallete1);
    color: var(--white);
  }

  .highlight__text {
    color: #707070;
    padding: 60px 74px;

    h2 {
      color: inherit;
      font: normal normal bold 25px/30px Montserrat;
    }
    p {
      font: normal normal normal 18px/22px Montserrat;
    }
    p.highlight__description {
      max-width: 390px;
    }
    p.price {
      font: normal normal bold 22px/27px Montserrat;
      margin: 20px 0;
    }
  }

  .highlight__image {
    @media screen and (min-width: 768px) {
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    img {
      @media screen and (min-width: 768px) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
      }
    }
  }
}

.product__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto 55px;

  @media screen and (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 5px;
    margin: 0 auto 20px;
  }

  h3 {
    color: inherit;
    font: normal normal bold 20px/24px Montserrat !important;
    text-transform: uppercase;
    margin-bottom: 0.85rem;

    @media screen and (max-width: 768px) {
      font: normal normal bold 14px/18px Montserrat !important;
      margin-bottom: 0.5rem;
    }

    &.text-md {
      font-size: 19px !important;

      @media screen and (max-width: 768px) {
        font-size: 13px !important;
      }
    }
  }
  p {
    font: normal normal normal 16px/19px Montserrat;
    min-height: 60px;

    @media screen and (max-width: 768px) {
      min-height: 75px;
      font: normal normal normal 12px/13px Montserrat;
    }
  }
  p.price {
    font: normal normal bold 22px/27px Montserrat;
    min-height: unset;
    margin: 20px 0;

    @media screen and (max-width: 768px) {
      font: normal normal bold 12px/15px Montserrat;
    }
  }
  .product__card {
    color: var(--white);
    background-color: var(--pallete1);
    border-radius: 12px;

    .product__card--txt {
      padding: 20px 30px;

      @media screen and (max-width: 768px) {
        padding: 10px;
      }

      .cta__btn {
        background-color: var(--white);
        color: var(--pallete1);
      }
    }
  }
}

.contact {
  background-color: var(--pallete3);
  text-align: center;
  padding: 55px 0;
  margin: 50px auto;

  h2 {
    color: var(--pallete1);
    font: normal normal bold 25px/30px Montserrat;

    @media screen and (max-width: 768px) {
      font: normal normal bold 22px/25px Montserrat;
    }
  }
  p {
    font: normal normal normal 18px/40px Montserrat;
    margin: 20px auto;

    @media screen and (max-width: 768px) {
      font: normal normal normal 16px/20px Montserrat;
    }
  }
  .cta__btn {
    background-color: var(--pallete1);
    color: var(--white);

    @media screen and (max-width: 768px) {
      padding: 12px 18px;
      min-width: 0;
      font: normal normal 500 18px/21px Montserrat;
    }
  }
}

.footer__container {
  max-width: 820px;
  margin: auto;
  text-align: left;

  @media screen and (max-width: 768px) {
    max-width: 90dvw;
    margin: auto;
  }
}