:root {
  --standard-sides-paddings: calc(1.5 * (4vw + 1.5vh));
  --standard-p-size: calc(0.6 * (1rem + 0.5vw + 0.5vh));
  --standard-color: #bd1398;
  --secundary-color: #64024fd8;
  --identity-font-family: "Playfair Display", serif;
}

::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: "Playfair Display";
  src: url(./fonts/PlayfairDisplay-VariableFont_wght.ttf) format("truetype");
  src: url(./fonts/Playfair\ Display\ Regular.otf);
  src: url(./fonts/Playfair\ Display\ Regular.svg) format("svg");
  src: url(./fonts/Playfair\ Display\ Regular.woff) format("woff");
  src: url(./fonts/Playfair\ Display\ Regular.woff2) format("woff2");
}

@font-face {
  font-family: "montserrat-700";
  src: url(./Fonts/montserrat/Montserrat-Bold.ttf);
}

@font-face {
  font-family: "montserrat-600";
  src: url(./Fonts/montserrat/Montserrat-SemiBold.ttf);
}

@font-face {
  font-family: "montserrat-500";
  src: url(./Fonts/montserrat/Montserrat-Medium.ttf);
}

@font-face {
  font-family: "montserrat-400";
  src: url(./Fonts/montserrat/Montserrat-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  list-style: none;
  text-decoration: none;
  font-family: "montserrat-400", sans-serif;
  color: var(--secundary-color);
  font-size: var(--standard-p-size);
}

*::selection {
  background: transparent;
}

body {
  position: relative;
  overflow-x: hidden;
}

html {
  width: 100vw;
  overflow-x: hidden;
}

body {
  background: #f3f3f3;
}

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: calc(1 * (1rem + 8vh - 1vw));
  top: 0;
  left: 0;
  margin: auto;
  z-index: 10;
  padding: 0 var(--standard-sides-paddings);
  text-align: center;
  font-size: var(--standard-p-size);
  background: rgb(243, 243, 243, 0.8);
  backdrop-filter: blur(9px);
}

header a {
  background: -webkit-linear-gradient(
    45deg,
    rgba(104, 9, 83, 0.849),
    var(--secundary-color),
    rgba(189, 19, 152, 0.849)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

header p {
  opacity: inherit;
}

header a:hover {
  opacity: 50%;
}

.secundary-header-logo-content {
  background: -webkit-linear-gradient(
    45deg,
    rgba(71, 2, 56, 0.849),
    rgba(100, 2, 79, 0.849),
    rgba(51, 2, 40, 0.849)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: calc(0.6 * var(--standard-p-size));
  letter-spacing: 2px;
  font-weight: 600;
}

.main-header-logo-content {
  background: -webkit-linear-gradient(
    45deg,
    rgba(104, 9, 83, 0.849),
    rgba(207, 53, 174, 0.849),
    rgba(189, 19, 152, 0.849)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  font-family: "Playfair Display", serif;
  font-size: calc(1.3 * var(--standard-p-size));
}

.product-page-background {
  background: transparent;
  min-height: 100vh;
  width: 100vw;
  position: absolute;
  display: flex;
  bottom: 250vh;
  right: -150px;
  justify-content: center;
}

.product-page-background svg {
  display: block;
  transform: scale(6);
  opacity: 15%;
  align-self: flex-end;
}

.section {
  width: 100vw;
  min-height: 100vh;
}

.product-page-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1.5 * var(--standard-sides-paddings))
    calc(0.5 * var(--standard-sides-paddings)) 0
    calc(0.5 * var(--standard-sides-paddings));
}

.product-page {
  /*min-width: 20rem;
  max-width: 90vw;*/
  width: 100%;
  min-width: 250px;
  max-width: 50rem;
  background: rgb(255, 255, 255, 0.1);
  backdrop-filter: blur(15px) brightness(100%);
  border-radius: 25px;
  border: solid 1px rgb(255, 255, 255);
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.263);
  padding: calc(1.5vh + 1vw) calc(1.5vh + 1vw);
  /*margin: 0 var(--standard-sides-paddings);
  height: 70vh;
  width: 90vw;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 17px;
  backdrop-filter: blur(20px) brightness(120%);
  border: solid 1.5px rgba(177, 177, 177, 0.8);
  box-shadow: 0px 0px 75px rgba(39, 18, 38, 0.919), 0 0 7px white;*/
  z-index: 5;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  position: relative;
}

.product-page button {
  background: transparent;
  border: none;
  position: absolute;
  top: calc(1.5 * var(--standard-p-size));
  right: calc(1.5 * var(--standard-p-size));
  transform: scale(1.7);
  display: block;
  cursor: pointer;
  transition: 15ms ease-in;
}

.product-page button:hover {
  transform: scale(1.8);
}

.content-card {
  /*width: 90%;*/
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  align-content: center;
}

.card {
  /*min-width: 135px;
  width: 29%;
  min-height: 168px;*/
  height: 100%;
  background: #f3f3f3;
  /*margin: calc(0.2 * var(--standard-sides-paddings)) auto;*/
  object-fit: cover;
  position: relative;
  flex-grow: 2;
  margin: auto;
  display: flex;
  margin: calc(2 * var(--standard-p-size)) 0;
}

.card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 17px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.363);
}

.ref {
  /*position: absolute;*/
  top: 0;
  right: -7px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1px;
  color: white;
  padding: calc(0.5 * var(--standard-p-size)) calc(1 * var(--standard-p-size));
  background: linear-gradient(
    45deg,
    var(--secundary-color),
    var(--standard-color)
  );
  border-radius: 17px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.363);
}

/*.product-page img {
  height: 50vh;
  width: 50vw;
}*/
.product-info {
  flex-grow: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.product-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: auto;
}

.product-details h2 {
  font-size: calc(2 * var(--standard-p-size));
  width: calc(20 * var(--standard-p-size));
  padding: var(--standard-p-size) 0;
}

.whatsapp-button-product {
  min-width: calc(21 * var(--standard-p-size));
  width: 30%;
}

.grupo-de-ofertas {
  position: relative;
  min-height: 100vh;
}

.grupo-de-ofertas-background {
  background: transparent;
  min-height: 100vh;
  width: 100vw;
  position: absolute;
  display: flex;
  bottom: 120vh;
}

.grupo-de-ofertas-background svg {
  display: block;
  transform: scale(6);
  left: -40px;
  opacity: 5%;
  align-self: flex-end;
}

.grupo-de-ofertas-content {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: 0 var(--standard-sides-paddings);
  overflow-x: hidden;
  min-height: 100vh;
  top: 0;
  width: 100%;
}

.grupo-de-ofertas-svg img {
  margin-left: calc(-5vw - 15vh);
  display: block;
  min-width: 220px;
  width: 30rem;
}

.grupo-de-ofertas-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 60%;
}

.acesse {
  font-size: calc(1.5 * var(--standard-p-size));
}

.grupo {
  font-size: calc(2 * calc(0.6 * (1rem + 1.5vw + 0.5vh)));
  font-weight: 600;
  text-transform: uppercase;
  background: -webkit-linear-gradient(
    45deg,
    rgba(104, 9, 83, 0.847),
    rgba(207, 53, 174, 0.847),
    rgba(189, 19, 152, 0.849)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ofertas {
  font-size: calc(3 * calc(0.6 * (1rem + 2vw + 0.5vh)));
  margin-top: calc(-1.2 * calc(0.6 * (1rem + 2vw + 0.5vh)));
  font-weight: 1000;
  text-transform: uppercase;
  background: -webkit-linear-gradient(
    45deg,
    rgba(104, 9, 83, 1),
    rgba(207, 53, 174, 1),
    rgba(189, 19, 152, 1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

.ofertas-text p {
  font-size: calc(1.15 * var(--standard-p-size));
  font-weight: 600;
  width: calc(16 * calc(0.6 * (1rem + 2vw + 0.5vh)));
}

.grupo-de-ofertas-text a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: calc(1 * var(--standard-p-size));
  font-weight: 600;
  letter-spacing: 1px;
  color: white;
  background: -webkit-linear-gradient(
    45deg,
    rgba(189, 5, 149, 0.849),
    rgba(190, 31, 156, 0.849),
    rgba(150, 3, 118, 0.849)
  );
  text-align: center;
  border-radius: 13px;
  margin: calc(1 * var(--standard-p-size)) 0 calc(2 * var(--standard-p-size)) 0;
  line-height: calc(3 * var(--standard-p-size));
  border-top: solid 2px violet;
  border-bottom: solid 2px violet;
}

.grupo-de-ofertas-text a:hover {
  background: linear-gradient(
    45deg,
    rgba(189, 5, 149, 0.749),
    rgba(190, 31, 156, 0.749),
    rgba(150, 3, 118, 0.749)
  );
}

.grupo-de-ofertas-text a svg {
  height: 15px;
  width: 15px;
  fill: white;
  margin: 0 5px;
}

.section-three {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: 0 var(--standard-sides-paddings);
  min-height: 90vh;
}

.section-three h2 {
  font-size: calc(2.5 * var(--standard-p-size));
  padding: calc(2.5 * var(--standard-p-size)) 0;
  font-family: var(--identity-font-family);
  background: -webkit-linear-gradient(
    45deg,
    rgba(104, 9, 83, 0.849),
    rgba(207, 53, 174, 0.849),
    rgba(189, 19, 152, 0.849)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-three p {
  font-size: calc(1.1 * var(--standard-p-size));
  padding: 10px;
  font-weight: 600;
}

.phone-number,
.address-details,
.horario-de-funcionamento {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.phone-number p {
  font-size: calc(1.1 * var(--standard-p-size));
  padding: 10px;
  font-weight: 600;
}

.phone-number svg {
  height: calc(1.5 * var(--standard-p-size));
  width: calc(1.5 * var(--standard-p-size));
  fill: var(--secundary-color);
}

.whatsapp-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: calc(1 * var(--standard-p-size));
  font-weight: 600;
  letter-spacing: 1px;
  color: white;
  background: -webkit-linear-gradient(
    45deg,
    rgba(189, 5, 149, 0.849),
    rgba(190, 31, 156, 0.849),
    rgba(150, 3, 118, 0.849)
  );
  text-align: center;
  border-radius: 13px;
  margin: calc(1 * var(--standard-p-size)) 0 calc(2 * var(--standard-p-size)) 0;
  line-height: calc(3 * var(--standard-p-size));
  border-top: solid 2px violet;
  border-bottom: solid 2px violet;
}

.whatsapp-button:hover {
  background: linear-gradient(
    45deg,
    rgba(189, 5, 149, 0.749),
    rgba(190, 31, 156, 0.749),
    rgba(150, 3, 118, 0.749)
  );
}

.whatsapp-button svg {
  height: 15px;
  width: 15px;
  fill: white;
  margin: 0 5px;
}

.address-details svg {
  height: calc(2 * var(--standard-p-size));
  width: calc(2 * var(--standard-p-size));
  align-self: flex-start;
}

.horario-de-funcionamento svg {
  height: calc(2 * var(--standard-p-size));
  width: calc(2 * var(--standard-p-size));
  fill: var(--secundary-color);
}

.iframe {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0.5;
}

iframe {
  border-radius: 17px;
  width: 100%;
}

footer {
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--standard-sides-paddings);
}

footer p {
  padding: var(--standard-p-size) 0;
  text-align: center;
}
