:root {
  --_bravarija-arsic---white: #f5f6f4;
  --_bravarija-arsic---paragraphs: Inter, sans-serif;
  --_bravarija-arsic---black: #1e1e1e;
  --_bravarija-arsic---headers: Tinos, sans-serif;
  --_bravarija-arsic---dark-orange: #c47a47;
}


.contactPopUp {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;

  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 30vw;
  height: fit-content;
  padding-block: 5%;
  background-color: rgba(196, 122, 71, 0.9);
  color: var(--_bravarija-arsic---white);
  border-radius: 6px;
}
.contactPopUp p:first-child {
  color: var(--_bravarija-arsic---white);
  position: absolute;
  top: 5%;
  right: 3%;
  font-size: 2em;
  cursor: pointer;
}
.contactPPButton {
  background-color: var(--_bravarija-arsic---white);
  border-radius: 6px;
  padding: .75em 2em;
  font-size: 1.25em;
  font-weight: 300;
  text-decoration: none;
  color: var(--_bravarija-arsic---dark-orange);
}
.contactinformations {
  font-family: 'Inter';
  line-height: 130%;
  text-align: center;
  font-size: 1em;
}


/*  Responsive  */

@media screen and (min-width: 1440px) {
  .contactPopUp {
  width: 40vw;
  height: 35vh;
  }
  .contactPopUp p:first-child {
    font-size: 2.5em;
    line-height: 150%;
  }
  .contactPPButton {
    font-size: 1.4em;
  }
  
}

@media screen and (min-width: 1920px) {
  .contactPopUp {
    width: 40vw;
    height: 35vh;
  }
  .contactPopUp p:first-child {
    font-size: 3em;
    line-height: 150%;
  }
  .contactPPButton {
    font-size: 1.5em;
    padding: 1em 2.25em;
  }
  .contactinformations {
    font-size: 1.1em;
  }
}

@media screen and (max-width: 991px) {
  .contactPopUp {
    display: none;
    width: 50svw;
    height: 35svh;
  }
  .contactPopUp p:first-child {
    font-size: 2em;
    line-height: 150%;
  }
  .contactPPButton {
    font-size: 1.25em;
    padding: .75em 2em;
  }
  .contactinformations {
    font-size: 1em;
  }
}

@media screen and (max-width: 767px) {
  .contactPopUp {
    width: 80svw;
    height: 40svh;
    padding-block: 10%;
  }
  .contactPopUp p:first-child {
    font-size: 1.75em;
    line-height: 150%;
    top: 3%;
  }
  .contactPPButton {
    font-size: 1.25em;
    padding: .75em 2em;
    margin-top: 5%;
  }
  .contactinformations {
    font-size: .9em;
    font-weight: 200;
    line-height: 150%;
  }
}

@media screen and (max-width: 479px) {
  .contactPopUp {
    width: 90svw;
    height: 35svh;
    padding-block: 10%;
  }
  .contactPopUp p:first-child {
    font-size: 1.75em;
    line-height: 150%;
    top: 3%;
  }
  .contactPPButton {
    font-size: 1.25em;
    padding: .75em 2em;
    margin-top: 10%;
  }
  .contactinformations {
    font-size: 0.9em;
    font-weight: 200;
    line-height: 150%;
  }
}