:root {
  --accent: #e27ca3;
  --bg: #fff5e8;
  --gris: #353535;
  --losangeGaucheRight: calc(47vw - 25rem);
  --losangeDroiteSize: calc(33vw + 5rem);
  --blurbImageSize: calc(9vw + 14rem);
  --losangeGaucheMult: (0.7rem + 0.3vw);
}

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

html,
body {
  overflow-x: hidden;
}
section {
  position: relative;
}
body {
  position: relative;
}

@media only screen and (max-width: 690px) {
  .losangeGaucheWrapper {
    display: none !important;
  }

  .imageGaucheWrapper {
    display: none !important;
  }
}

.headSection {
  min-height: 200px;
}

.path {
  overflow: hidden;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("images/dog-walker-10-3.png");
}

.mainWrapper {
  background: var(--bg);
  font-family: "open sans";
}

.headerWrap {
  position: relative;
  max-width: calc(76vw + 2rem);
  z-index: 1;
  padding: 25vh calc(25vw - 3rem);
}

.amatic {
  font-family: "Amatic SC", cursive;
}

.titre {
  color: #222;
  margin: 0;
  font-size: calc(5vw + 4rem);
}

.sousTitre {
  font-size: calc(1vw + 1rem);
  letter-spacing: 0.3rem;
  color: #666;
  font-weight: 200;
}

.landingButton {
  padding: 1.3rem 2.6rem;
  font-size: calc(0.4vw + 0.8rem);
  font-weight: 700;
  max-width: 80vw;
  color: white;
  border-radius: 3rem;
  background: var(--accent);
  box-shadow: 5 3 3 3 #ff0000;
  border: none;
  margin: 2rem 0;
}

.losangeDroite {
  position: absolute;
  top: -6vh;
  right: -8vw;
}

.losangeDroite .imageInterieur {
  transform: rotateZ(45deg);
  border-radius: 8vw;
  border: solid 5vw var(--bg);
  overflow: hidden;
  box-shadow: 0 0 6rem rgba(0, 0, 0, 0.26);
  width: var(--losangeDroiteSize);
  height: var(--losangeDroiteSize);
  background-image: url(images/dog-walker-18.jpg);
  background-size: cover;
}

.losangeGaucheWrapper {
  display: block;
  position: absolute;
  top: 37vh;
  right: var(--losangeGaucheRight);
  z-index: 3;
}

.losangeGauche {
  background: var(--accent);
  border-radius: 6rem;
  transform: rotateZ(45deg);
  box-shadow: 0 0 6rem rgba(0, 0, 0, 0.397);
  width: calc(20 * var(--losangeGaucheMult));
  height: calc(26 * var(--losangeGaucheMult));
}

.imageGaucheWrapper {
  display: block;
  position: absolute;
  top: 42vh;
  right: var(--losangeGaucheRight);
  z-index: 4;
}

.imageGauche {
  /* overflow: hidden; */
  transform: rotateZ(35deg);
  border-radius: 7rem;
  box-shadow: 0 0 1rem 2px rgba(0, 0, 0, 0.12);
  width: calc(20 * var(--losangeGaucheMult));
  height: calc(20 * var(--losangeGaucheMult));
  background-image: url("images/dog-walker-17.jpg");
  background-size: cover;
  background-position: 100% 100%;
}

.section2 {
  /* box-shadow: 0 0 3rem 50px #efebdc; */
  background: var(--bg);
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  align-items: center;
}

.section2 .paragraphe {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem;
  text-align: center;
  max-width: 90%;
}

.section2 .paragraphe h3 {
  font-size: 4rem;
  margin-bottom: 2rem;
}

.section2 .services .blurb {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem;
  margin: 3rem;
  background: white;
  border-radius: 5rem;
  max-width: 90%;
  width: calc(6vw + 18rem);
  margin-bottom: 3rem;
}

.blurbImage {
  margin-bottom: -4rem;
}

.services {
  max-width: 90%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.blurb:nth-child(1) .blurbImage {
  background: url("images/dog-walker-25.jpg");
  transform: rotateZ(16deg) translate(-1rem, -3rem);
}

.blurb:nth-child(2) .blurbImage {
  background: url("images/dog-walker-24.jpg");
  transform: rotateZ(-10deg) translate(0, -3rem);
}

.blurb:nth-child(3) .blurbImage {
  background: url("images/dog-walker-23.jpg");
  transform: rotateZ(11deg) translate(-1rem, -3rem);
}

@media only screen and (max-width: 984px) {
  .blurb:nth-child(2) .blurbImage {
    transform: rotateZ(11deg) translate(0rem, 2rem);
  }
  .blurb:nth-child(3) .blurbImage {
    transform: rotateZ(11deg) translate(1rem, 5rem);
  }
}

@media only screen and (max-width: 1599px) {
  .blurb:nth-child(3) .blurbImage {
    transform: rotateZ(11deg) translate(1rem, 1rem);
  }
}

.blurbImage {
  box-shadow: 0px 0px 49px 0px rgba(0, 0, 0, 0.31);
  background-size: cover;
  background-repeat: no-repeat;
  height: var(--blurbImageSize);
  width: var(--blurbImageSize);
  border-radius: 3rem;
}

.blurbTitre {
  font-size: 2.5rem;
  color: rgb(58, 58, 58);
  font-weight: 200;
}

.blurbPrix {
  font-weight: 900;
  font-size: 2rem;
}

.blurb > div {
  margin: 0.4rem 0;
}

.blurbButton {
  cursor: pointer;
  border-radius: 3rem;
  background: var(--accent);
  color: white;
  padding: 1rem 2rem;
  font-weight: 500;
}

.straight {
  transform: rotateZ(-45deg);
}

.boite {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  padding: 5vw;
  width: 80%;
  max-width: 1080px;
  margin: 5vw auto;
  box-shadow: 1px 1px 40px 6px #00000029;
  border-radius: 2.5rem;
}

.boite h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.boite p {
  line-height: 2rem;
  color: #666;
}

.section3 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.section3 > div {
  margin: 5rem;
}

.contactImage {
  background: url("images/dog-walker-21.jpg");
  background-repeat: no-repeat;
  box-shadow: 18px 13px 1px 1px #ded6cb, -13px -13px 1px 20px #ded6cb8c;
  border-radius: 0.6rem;
  height: 25rem;
  width: 25rem;
}

.contactText h4 {
  color: var(--gris);
  font-size: 3rem;
  color: var(--accent);
}

.contactText h5 {
  font-size: 1rem;
}

.contactText p {
  margin-bottom: 2rem;
}

.contactText * {
  margin-bottom: 1rem;
}

.flexWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}