.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  color: #fff;
  background-color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

a {
  text-decoration: underline;
}

.hero-section {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-image: url('../images/photo-bg-site-hero.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  min-width: auto;
  max-width: none;
  height: 100vh;
  min-height: auto;
  max-height: none;
  padding: 3.9rem 3rem 20rem;
  display: flex;
  position: static;
}

.nav-wrapper {
  z-index: 2147483647;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3rem;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.hero-content {
  cursor: default;
  justify-content: center;
  align-items: stretch;
  max-width: 90vw;
  max-height: 40vh;
  margin-top: 17px;
  font-size: 10.9375rem;
  display: flex;
  position: static;
  top: 0%;
}

.nav-buttons-wrapper {
  z-index: 99999999;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  white-space: nowrap;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  margin-right: 3rem;
  padding: .5rem;
  display: flex;
  position: fixed;
  inset: 0% 0% auto auto;
  overflow: visible;
}

.logo {
  padding: .5px;
  font-size: 1rem;
}

.heading {
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  font-family: Montserrat, sans-serif;
  font-size: 10.9375rem;
  font-weight: 700;
  line-height: 100%;
}

.text-block {
  color: #fff;
  max-width: 400px;
  max-height: 61px;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
}

.text-span {
  color: #f80;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  position: absolute;
  inset: 59% 0% 0% 4.5%;
}

.me-contacter-link {
  color: #ff8000;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.text-span-2 {
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.link-block {
  border: 2px solid #fff;
  border-radius: 5px;
  padding: .5rem;
}

.menu {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}

.menu-button {
  z-index: 999999999;
  cursor: pointer;
  border: 1.5px solid #fff;
  border-radius: 5px;
  padding: .3rem;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  position: absolute;
  inset: 0% auto auto -4.9rem;
  overflow: visible;
}

.about-section {
  opacity: 1;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: block;
  position: sticky;
  top: 0%;
  bottom: auto;
}

.marquee-wrapper {
  width: 100%;
  font-size: 1rem;
  overflow: hidden;
}

.presentation {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  max-width: 734px;
  height: 80vh;
  max-height: 340px;
  margin: 10rem 40rem -22rem 1rem;
  padding: 1rem 1rem 1rem 0;
  display: flex;
}

.marquee-list {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  display: flex;
  overflow: visible;
}

.text-block-3 {
  text-transform: uppercase;
  word-break: normal;
  overflow-wrap: normal;
  flex: none;
  padding: 3rem 2rem;
  font-family: Roboto, sans-serif;
  font-size: 101px;
}

.presentation-texte {
  font-family: Roboto, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 39px;
}

.about-text {
  opacity: 1;
  color: #f5f5f7;
  width: auto;
  height: auto;
  margin: 0;
  padding-top: 0;
  font-family: Roboto, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 3.2rem;
}

.discovery-section {
  background-image: url('../images/photo-hero-2-touch.jpeg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0%;
  bottom: auto;
}

.discovey-wrapper {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.grid {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 1rem 2rem 1rem 3rem;
  display: grid;
}

.baseline-wrapper {
  opacity: 1;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.paragraph {
  max-width: none;
  max-height: none;
  font-size: 3rem;
  line-height: 3rem;
}

.icon-embed-xxsmall {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: flex;
}

.icone {
  width: 21rem;
  display: inline-block;
}

.icone-container {
  backface-visibility: visible;
  transform: rotate(15deg);
}

.footer-section {
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  background-color: #000;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 85vh;
  display: flex;
  position: sticky;
  top: 75%;
  bottom: auto;
  right: 50%;
  overflow: hidden;
}

.footer-wrapper {
  grid-column-gap: 24.6rem;
  grid-row-gap: 24.6rem;
  background-color: #000;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  max-width: 100%;
  max-height: 100%;
  margin: 1rem 0 0;
  padding: 1rem 0;
  font-size: 20rem;
  display: flex;
}

.footer-main-text {
  cursor: default;
  background-color: #0000;
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding: 10rem 0 3rem;
  font-size: 20rem;
  line-height: 2rem;
  transition: filter .4s;
  display: flex;
}

.footer-propertise {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin: -10rem 3rem 1rem;
  padding: .3rem;
  font-size: 201rem;
  display: flex;
}

.text-block-5 {
  font-size: 12rem;
}

.text-footer {
  aspect-ratio: auto;
  object-fit: cover;
  transform-style: preserve-3d;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
  transition: all .4s;
  display: flex;
  transform: scale3d(1, 2.5, 1);
}

.text-footer:hover {
  filter: drop-shadow(0 .8rem 2.1rem #ff8001);
}

.bold-text {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 15rem;
  line-height: 3rem;
  display: flex;
}

.bold-text:hover {
  filter: drop-shadow(-2px -4px 64px #ff8001);
  -webkit-backdrop-filter: drop-shadow(0 2px 5px #ff8001);
  backdrop-filter: drop-shadow(0 2px 5px #ff8001);
  outline-offset: 0px;
  backface-visibility: visible;
  mix-blend-mode: screen;
  outline: 3rem #fff;
  min-height: 1vh;
  transform: perspective(1000px);
}

.text-block-6 {
  cursor: default;
  font-size: 1rem;
}

.text-block-7 {
  text-transform: uppercase;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  max-width: 15rem;
  max-height: 10vh;
  font-size: 1rem;
  display: block;
}

.copyright-wrapper {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  cursor: default;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 14.3rem;
  font-size: 2rem;
  display: flex;
}

.image-copyright {
  color: #fff;
  width: 1.5rem;
}

.menu-items-wrapper {
  z-index: 0;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  white-space: nowrap;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  margin-right: auto;
  padding: .5rem;
  text-decoration: none;
  display: none;
  position: relative;
  inset: 0 auto auto .5rem;
  overflow: visible;
}

.menu-link {
  z-index: 2;
  color: #fff;
  text-transform: uppercase;
  padding: .5rem;
  font-size: 1.1rem;
  font-weight: 400;
  text-decoration: none;
  display: block;
  position: relative;
}

.menu-link.photo {
  color: #fff;
  text-decoration: none;
}

.menu-link.projet, .menu-link.apropos {
  text-decoration: none;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.global-wrapper {
  background-color: #000;
  width: 100%;
  height: 90vh;
  padding-top: 3rem;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.photo-hero-section {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  text-align: left;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-width: 100vw;
  min-height: 100vh;
  padding: 1rem;
  font-size: 6vw;
  display: flex;
  position: static;
  top: 0%;
}

.gallery-section {
  min-height: 200vh;
  position: relative;
  overflow: hidden;
}

.container-text {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  text-align: center;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  max-width: 100rem;
  margin-left: 0;
  font-size: 4vw;
  display: block;
  overflow: visible;
}

.hero-heading {
  overflow-wrap: normal;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100vw;
  font-size: 5rem;
  font-weight: 700;
  display: flex;
  overflow: visible;
}

.hero-sub {
  text-align: left;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 40rem;
  font-size: 3.6rem;
  line-height: 3.6rem;
  display: flex;
}

.heading-2 {
  text-align: center;
  text-transform: uppercase;
  text-overflow: clip;
  word-break: break-all;
  font-size: 5.2rem;
  line-height: 5.5rem;
}

.paragraph-2 {
  justify-content: center;
  display: flex;
}

.gallery-wrapper {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  pointer-events: auto;
  perspective: 1500px;
  flex-flow: wrap;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  min-height: auto;
  display: grid;
  position: sticky;
  top: 0;
  transform: rotate(0);
}

.gallery-item {
  opacity: .6;
  width: 22vw;
  height: 22vw;
  padding-top: 5%;
  position: relative;
  overflow: hidden;
  transform: rotate(0);
}

.gallery-item._2 {
  background-image: url('../images/IMG_1791.webp');
  background-repeat: no-repeat;
  background-attachment: scroll;
  width: 25%;
  height: 410px;
}

.gallery-item._3 {
  background-image: url('../images/IMG_3271.webp');
  width: 25%;
  height: 250px;
}

.gallery-item._4 {
  background-image: url('../images/IMG_3954.webp');
  width: 30%;
  height: 270px;
}

.gallery-item._5 {
  background-image: url('../images/IMG_3385.webp');
  width: 45%;
  height: 180px;
}

.gallery-item._6 {
  background-image: url('../images/IMG_3762.webp');
  width: 35%;
  height: 220px;
}

.gallery-item.var1 {
  opacity: .6;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -400px)rotateX(-40deg)rotateY(-20deg)rotateZ(0);
}

.gallery-item.var2 {
  opacity: .6;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -320px)rotateX(35deg)rotateY(15deg)rotateZ(0);
}

.gallery-item.var3 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -280px)rotateX(-25deg)rotateY(30deg)rotateZ(0);
}

.gallery-item.var4 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -200px)rotateX(15deg)rotateY(-35deg)rotateZ(0);
}

.gallery-item.var5 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -120px)rotateX(0)rotateY(5deg)rotateZ(0);
}

.gallery-item.var6 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -400px)rotateX(-40deg)rotateY(-20deg)rotateZ(0);
}

.gallery-item.var7 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -320px)rotateX(35deg)rotateY(15deg)rotateZ(0);
}

.gallery-item.var8 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -320px)rotateX(-25deg)rotateY(30deg)rotateZ(0);
}

.gallery-item.var9 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -200px)rotateX(15deg)rotateY(-35deg)rotateZ(0);
}

.gallery-item.var10 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -120px)rotateX(0)rotateY(5deg)rotateZ(0);
}

.gallery-item.var11 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -400px)rotateX(-40deg)rotateY(-20deg)rotateZ(0);
}

.gallery-item.var12 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -320px)rotateX(35deg)rotateY(15deg)rotateZ(0);
}

.gallery-item.var13 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -280px)rotateX(-25deg)rotateY(30deg)rotateZ(0);
}

.gallery-item.var14 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -200px)rotateX(15deg)rotateY(-35deg)rotateZ(0);
}

.gallery-item.var15 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -120px)rotateX(0)rotateY(5deg)rotateZ(0);
}

.gallery-item.var16 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -400px)rotateX(-40deg)rotateY(-20deg)rotateZ(0);
}

.gallery-item.var17 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -320px)rotateX(35deg)rotateY(15deg)rotateZ(0);
}

.gallery-item.var18 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -280px)rotateX(-25deg)rotateY(35deg)rotateZ(0);
}

.gallery-item.var19 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -200px)rotateX(15deg)rotateY(-35deg)rotateZ(0);
}

.gallery-item.var20 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -120px)rotateX(0)rotateY(5deg)rotateZ(0);
}

.gallery-item.var21 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -400px)rotateX(-40deg)rotateY(-20deg)rotateZ(0);
}

.gallery-item.var22 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -320px)rotateX(35deg)rotateY(15deg)rotateZ(0);
}

.gallery-item.var23 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -280px)rotateX(-25deg)rotateY(30deg)rotateZ(0);
}

.gallery-item.var24 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -200px)rotateX(15deg)rotateY(-35deg)rotateZ(0);
}

.gallery-item.var25 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -120px)rotateX(0)rotateY(5deg)rotateZ(0);
}

.gallery-media {
  width: 100%;
  height: 100%;
}

.second-grid {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.true-gallery-wrapper {
  perspective: 1500px;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.grid-wrap {
  position: absolute;
}

.true-grid {
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.grid__item {
  position: relative;
  overflow: hidden;
}

.grid__item-inner {
  filter: drop-shadow(0 0 5px #00000080) blur();
  width: 100%;
  height: 100%;
  transition: transform .4ms;
}

.img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero-gallery-wrapper {
  perspective: 1500px;
  background-color: #000;
  width: 100vw;
  min-height: 180vh;
  position: relative;
  overflow: hidden;
}

.hero-gallery-cloud {
  perspective: 1500px;
  cursor: auto;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
}

.cloud-img {
  z-index: 1;
  object-fit: cover;
  border-radius: 14px;
  width: 200px;
  height: 240px;
  position: absolute;
  top: 50%;
  left: 30%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 30px #0003;
}

.cloud-img._1 {
  z-index: 1;
  width: 150px;
  height: 170px;
  top: 62%;
  left: 13%;
}

.cloud-img._2 {
  z-index: 2;
  top: 23%;
  bottom: auto;
  left: 78%;
}

.cloud-img._3 {
  z-index: 3;
  inset: auto 1% -33% auto;
}

.cloud-img._4 {
  z-index: 5;
  width: 190px;
  height: 220px;
  top: 15%;
  left: 28%;
}

.cloud-img._5 {
  width: 120px;
  height: 130px;
  top: 91%;
  left: 31%;
}

.cloud-img._6 {
  width: 100px;
  height: 110px;
  top: 90%;
  left: 28%;
}

.cloud-img._7 {
  z-index: 6;
  width: 190px;
  height: 200px;
  inset: auto auto -27% 11%;
}

.cloud-img._8 {
  z-index: 2;
  width: 180px;
  height: 190px;
  top: 90%;
  left: 66%;
}

.cloud-img._9 {
  z-index: 3;
  width: 160px;
  height: 170px;
  top: 47%;
  left: 89%;
}

.cloud-img._10 {
  z-index: 4;
  width: 150px;
  height: 160px;
  top: 43%;
  left: 71%;
}

.cloud-img._11 {
  width: 135px;
  height: 145px;
  top: 8%;
  left: 61%;
}

.cloud-img._12 {
  width: 120px;
  height: 140px;
  top: 27%;
  left: 31%;
}

.cloud-img._13 {
  z-index: 5;
  width: 130px;
  height: 150px;
  left: 65%;
}

.cloud-img._14 {
  z-index: 2;
  width: 140px;
  height: 155px;
  top: 90%;
  left: 55%;
}

.cloud-img._15 {
  width: 190px;
  height: 200px;
  top: 45%;
  left: 31%;
}

.cloud-img._16 {
  z-index: 8;
  width: 190px;
  height: 210px;
  top: 59%;
  left: 67%;
}

.cloud-img._17 {
  z-index: 6;
  width: 150px;
  height: 170px;
  top: 18%;
  left: 85%;
}

.cloud-img._18 {
  z-index: 9;
  top: 64%;
  left: 90%;
}

.cloud-img._19 {
  z-index: 6;
  top: 32%;
  left: 19%;
}

.cloud-img._20 {
  z-index: 7;
  top: 17%;
  left: 53%;
}

.cloud-img._21 {
  z-index: 15;
  width: 210px;
  top: 60%;
  left: 51%;
}

.cloud-img._22 {
  z-index: 7;
  width: 160px;
  height: 180px;
  top: 29%;
  left: 50%;
}

.cloud-img._23 {
  width: 160px;
  height: 190px;
  top: 71%;
  left: 40%;
}

.cloud-img._24 {
  z-index: 9;
  top: 94%;
  left: 51%;
}

.hero-quote {
  z-index: 10;
  color: #e7dab0;
  text-align: center;
  cursor: none;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 70vw;
  height: 22vh;
  font-size: 10vw;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 32px #0000002e;
}

.demo-wrapper {
  min-height: 100vh;
  overflow: hidden;
}

.header {
  justify-content: center;
  align-items: center;
  display: flex;
}

.demo-text {
  letter-spacing: 1px;
  overflow-wrap: normal;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  font-family: Roboto, sans-serif;
  font-size: 8rem;
  font-weight: 900;
  line-height: 5rem;
  display: flex;
  overflow: hidden;
}

.wrapper-text {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  white-space: nowrap;
  font-size: 2.5rem;
  line-height: 4.5rem;
  display: flex;
}

.demo-gallery {
  object-fit: cover;
  flex-flow: row;
  height: 50vh;
  padding: 0;
  display: block;
}

.demo-gallery._2 {
  object-fit: cover;
  height: 50vh;
}

.demo-gallery._3 {
  object-fit: cover;
  height: 50vh;
  padding: 0;
}

.heading-3 {
  text-align: center;
}

.list {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  object-fit: cover;
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  list-style-type: none;
  display: flex;
}

.list-2, .list-3 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  object-fit: cover;
  justify-content: space-between;
  height: 100%;
  list-style-type: none;
  display: flex;
}

.list-item, .list-item-2, .list-item-3, .list-item-4, .list-item-5, .list-item-6, .list-item-7, .list-item-8 {
  width: 500px;
}

.list-item-9 {
  object-fit: cover;
  width: 500px;
}

.image-2 {
  object-fit: cover;
}

.image-3 {
  aspect-ratio: auto;
  object-fit: cover;
}

.list-item-10, .list-item-11, .list-item-12, .list-item-13, .list-item-14, .list-item-15, .list-item-16, .list-item-17, .list-item-18, .list-item-19, .list-item-20, .list-item-21, .list-item-22 {
  width: 500px;
}

.list-item-23 {
  object-fit: cover;
  width: 500px;
}

.list-item-24, .list-item-25 {
  width: 500px;
}

.div-block-2 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.section {
  width: 100vw;
  height: 100vh;
}

.sidebar-projects {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  width: 100vw;
  height: 50vh;
  display: flex;
  position: relative;
}

.project-link {
  color: #888;
  object-fit: fill;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3rem;
  transition: color .3ms;
  display: flex;
  position: relative;
  overflow: visible;
}

.project-link:hover {
  color: #fff;
}

.text-block-8 {
  border-radius: 0;
  font-family: Roboto, sans-serif;
  font-size: 2rem;
}

.text-block-8:hover {
  color: #fff;
}

.years-project:hover {
  transform: none;
}

.image-4 {
  width: 50px;
  display: block;
}

.image-4:hover {
  transform: rotate(45deg);
}

.project-preview {
  z-index: 15;
  opacity: 1;
  position: relative;
  top: auto;
  left: 50%;
}

.project-preview:hover {
  opacity: 1;
}

.project-title-wrapper {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100vw;
  height: 30vh;
  padding-top: 3rem;
  padding-bottom: 2rem;
  display: flex;
  position: static;
  top: 0%;
  overflow: hidden;
}

.image-5 {
  z-index: 20;
  opacity: 0;
  width: 300px;
  transition: opacity .5ms;
  display: block;
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translate(-50%);
}

.image-6 {
  width: 120px;
  display: block;
  position: absolute;
  left: 50%;
}

.image-portrait {
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 70%;
  padding-top: 5rem;
  padding-left: 10rem;
  display: flex;
  position: absolute;
  overflow: visible;
}

.image-portrait:hover {
  color: #fff;
  display: flex;
}

.portrait-image {
  object-fit: fill;
  border-radius: .5rem;
  width: 8vw;
  height: 10vw;
  padding: .5rem;
  display: block;
  position: relative;
  overflow: visible;
}

.portrait-bg {
  opacity: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: static;
  inset: 0%;
  overflow: visible;
}

.portrait-bg:hover {
  opacity: 100;
}

.link-block-2 {
  color: #888;
  text-decoration: none;
}

.link-block-2:hover {
  color: #fff;
}

.link-block-3 {
  flex-flow: column;
  align-items: stretch;
  display: flex;
}

.project-text {
  justify-content: space-between;
  width: 100vw;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1.2rem;
  display: flex;
  overflow: hidden;
}

.line {
  background-color: #fff;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 90%;
  height: .2vh;
  margin-bottom: 2.5rem;
  margin-left: 3rem;
  margin-right: 3rem;
  display: flex;
  position: static;
  top: 0%;
  overflow: hidden;
}

.all-project {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: space-between;
  align-items: center;
  width: 52vw;
  margin-left: 3rem;
  padding-top: .1rem;
  display: flex;
}

.all-projects-text {
  padding-left: 3rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
}

.about-container {
  justify-content: space-between;
  height: 90vh;
  margin: 3rem;
  display: flex;
  position: relative;
  top: 0%;
}

.about-wrapper-right {
  perspective: 1000px;
  cursor: auto;
  width: 60vw;
  position: sticky;
  top: 3rem;
}

.about-wrapper-left {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  width: 30vw;
  height: 100vh;
  padding: 0 1rem 1rem;
  display: flex;
  overflow: auto;
}

.about-skils {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  cursor: default;
  background-color: #eae7dc;
  border-radius: 10px;
  justify-content: space-between;
  width: 100%;
  height: 65vh;
  margin-top: 0;
  padding: 1rem;
  display: flex;
}

.about-cta {
  perspective: 1000px;
  background-color: #d9cbb3;
  border-radius: 10px;
  justify-content: flex-start;
  height: 28vh;
  margin-top: 1rem;
  margin-bottom: 0;
  display: flex;
}

.chat-wrapper {
  flex-flow: column;
  display: flex;
}

.message-row {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.bubble {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  cursor: pointer;
  background-color: #f4f4f2;
  border-radius: 20px 20px 20px 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 70%;
  padding: .6rem .5rem 1.3rem;
  display: flex;
  position: relative;
}

.bubble.gradient {
  cursor: pointer;
}

.cta-text-gradient {
  color: #000;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  display: block;
}

.img-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  opacity: 1;
  cursor: pointer;
  object-fit: cover;
  background-color: #f4f4f2;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  min-height: 35vh;
  display: flex;
  overflow: visible;
}

.image-7 {
  opacity: 1;
  object-fit: cover;
  border-radius: 15px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 32vh;
  margin-left: .875rem;
  margin-right: -1.8125rem;
  display: inline-flex;
  overflow: hidden;
}

.about-title-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  width: 50vw;
  margin: 3rem 3rem 3rem 4rem;
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
}

.about-title {
  cursor: default;
}

.icon-about {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 15vw;
  padding: 2rem;
  display: flex;
}

.skills-wrapper {
  color: #000;
  text-transform: uppercase;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 30vw;
  padding: 1rem;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 1.2rem;
  font-weight: 400;
  display: flex;
}

.title-skills-text {
  font-weight: 700;
}

.skills-title {
  display: flex;
}

.skills-body {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  justify-content: space-between;
  margin-top: -2rem;
  font-size: 1rem;
  font-weight: 400;
  display: flex;
}

.tools-wrapper {
  grid-column-gap: .2rem;
  grid-row-gap: .2rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.text-block-11 {
  font-size: 1rem;
}

.text-block-12 {
  font-weight: 400;
}

.adb-tools {
  font-size: 1rem;
  font-weight: 400;
  transition: color .3s;
}

.adb-tools:hover {
  color: #ff8001;
}

.image-8 {
  width: 60px;
}

.img-flash {
  width: 60px;
  transform: rotate(25deg);
}

.design-skills {
  transition: color .3s;
}

.design-skills:hover {
  color: #ff8001;
}

.communication-skills {
  transition: color .3s;
}

.communication-skills:hover {
  color: #ff8001;
}

.ad-skills {
  transition: color .3s;
}

.ad-skills:hover {
  color: #ff8001;
}

.content-skills {
  transition: color .3s;
}

.content-skills:hover {
  color: #ff8001;
}

.management-project-skills {
  transition: opacity .3s;
}

.management-project-skills:hover {
  color: #ff8001;
}

.fig-tools {
  font-size: 1rem;
  font-weight: 400;
  transition: color .3s;
}

.fig-tools:hover {
  color: #ff8001;
}

.web-tools {
  font-size: 1rem;
  font-weight: 400;
  transition: color .3s;
}

.web-tools:hover {
  color: #ff8001;
}

.not-tools {
  transition: color .3s;
}

.not-tools:hover {
  color: #ff8001;
}

.text-block-13 {
  font-weight: 700;
}

.stay-in-boucle {
  color: #f4f4f2;
  cursor: pointer;
  background-color: #f4f4f2;
  border-radius: 20px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 35%;
  padding: .5rem;
  display: flex;
}

.arrow-cta {
  color: #f4f4f2;
  background-color: #f4f4f2;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 22%;
  display: flex;
}

.linkedin-cta {
  cursor: pointer;
  background-color: #3892ec;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 22%;
  display: flex;
}

.linkedin-cta.link {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.github-cta {
  cursor: pointer;
  background-color: #3892ec;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 22%;
  display: flex;
}

.image-10 {
  width: 90px;
  display: block;
}

.image-11, .img-arrow-cta {
  width: 90px;
}

.text-block-14 {
  color: #ff8001;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.bold-text-2 {
  justify-content: center;
  align-items: center;
  font-family: Montserrat, sans-serif;
  font-size: 5.6rem;
  font-weight: 700;
  display: flex;
}

.heading-4 {
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-family: Roboto, sans-serif;
  font-size: 5.2vw;
  line-height: 1;
  display: flex;
}

.nav-blur {
  z-index: 1;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: none;
  background-color: #4b4b4b99;
  border-radius: 15px;
  position: absolute;
  inset: 0%;
}

.text-effect-wrapper {
  background-color: #0000;
  max-width: 70vw;
  height: auto;
  margin-top: 4rem;
  margin-bottom: 0;
  padding: 3rem;
  font-size: 1rem;
  line-height: 1.2;
  display: flex;
}

.text-effect-sticky-element {
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding-bottom: 0;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.container-w3.gutter-outside {
  color: #333;
  width: 100%;
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
  font-size: 1rem;
  line-height: 1.2rem;
}

.text-effect-overflow-hidden {
  overflow: visible;
}

.text-effect-inner {
  background-color: #000;
  position: relative;
  overflow: hidden;
}

.text-effect-gradient {
  mix-blend-mode: darken;
  height: 100vh;
  padding-top: 0;
  font-size: 3.5rem;
  position: absolute;
  inset: -38% 0% 0%;
}

.link {
  color: #ff8001;
  font-size: 1rem;
  text-decoration: none;
}

.div-block-7 {
  z-index: 50;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
  padding-top: .5rem;
  display: flex;
  position: sticky;
  top: 0%;
}

.who-is-section {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: block;
}

.detail-who-is {
  width: 70vw;
  margin-top: 6.5rem;
  padding: 3rem;
  font-size: 2rem;
  line-height: 1.2;
}

.about-descript-cta {
  font-size: 2.6rem;
  line-height: 1.2;
}

.section-2 {
  width: 100vw;
  height: 100vh;
}

.code {
  color: #ff8001;
  border: 1px #ff8001;
  border-bottom: 2px solid #ff8001;
}

.text-block-15 {
  font-size: 1.7rem;
}

.text-block-16 {
  font-size: 2rem;
}

.bubble-hello {
  padding: .5rem;
  font-size: 1.4rem;
  position: absolute;
  inset: auto 0% 0% auto;
  overflow: hidden;
}

.bubble-star {
  font-size: 1.4rem;
  line-height: 1.2;
  position: absolute;
  inset: auto 3% 0% auto;
  overflow: hidden;
}

.bubble-work {
  font-size: 1.4rem;
  line-height: 1.2;
  position: absolute;
  inset: auto 3% 4% auto;
  overflow: hidden;
}

.buble-power {
  font-size: 1.4rem;
  line-height: 1.2;
  position: absolute;
  inset: auto 4% 0% auto;
}

.bubble-flex {
  font-size: 1.4rem;
  line-height: 1.2;
  position: absolute;
  inset: auto 0% 0% auto;
  overflow: hidden;
}

.bubble-heart-wrapper {
  color: #e9e7dc;
  background-color: #f4f4f2;
  border: 1px solid #000;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: .2rem;
  display: flex;
  position: relative;
  top: 8.6875rem;
  left: -1.75rem;
  overflow: hidden;
}

.bubble-heart {
  font-size: 1.4rem;
  line-height: 1.2;
}

.div-block-8 {
  margin-top: 0;
  position: relative;
}

.div-block-9, .div-block-10, .div-block-11 {
  position: relative;
}

.bubble-flex-wrapper {
  background-color: #e9e7dc;
  border: 1px solid #000;
  max-width: 50px;
  position: relative;
  top: 32px;
  left: 89px;
}

.bubble-meet {
  font-size: 1.4rem;
  line-height: 1.2;
  position: absolute;
  inset: auto 0% 0% auto;
}

.image-12 {
  object-fit: cover;
}

.italic-text {
  justify-content: center;
  align-items: center;
  display: flex;
}

.confetti {
  width: 100vw;
  height: 250px;
}

.link-block-4 {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.copyright {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 2rem;
  display: flex;
}

.navbar-logo-left-container {
  z-index: 5;
  background-color: #0000;
  width: 1030px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 20px;
}

.navbar-logo-left-container.shadow-three {
  width: 100%;
  max-width: 1140px;
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

.container {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nav-menu-two {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.nav-link {
  color: #1a1b1f;
  letter-spacing: .25px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}

.nav-link:hover {
  color: #1a1b1fbf;
}

.nav-link:focus-visible, .nav-link[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.nav-dropdown {
  margin-left: 5px;
  margin-right: 5px;
}

.nav-dropdown-toggle {
  letter-spacing: .25px;
  padding: 5px 30px 5px 10px;
  font-size: 14px;
  line-height: 20px;
}

.nav-dropdown-toggle:hover {
  color: #1a1b1fbf;
}

.nav-dropdown-toggle:focus-visible, .nav-dropdown-toggle[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.nav-dropdown-icon {
  margin-right: 10px;
}

.nav-dropdown-list {
  background-color: #fff;
  border-radius: 12px;
}

.nav-dropdown-list.w--open {
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav-dropdown-link {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
}

.nav-dropdown-link:focus-visible, .nav-dropdown-link[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.nav-divider {
  background-color: #e4ebf3;
  width: 1px;
  height: 22px;
  margin-left: 15px;
  margin-right: 15px;
}

.nav-link-accent {
  color: #1a1b1f;
  letter-spacing: .25px;
  margin-left: 5px;
  margin-right: 20px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
}

.nav-link-accent:hover {
  color: #1a1b1fbf;
}

.button-primary {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #1a1b1f;
  padding: 12px 25px;
  font-size: 12px;
  line-height: 20px;
  transition: all .2s;
}

.button-primary:hover {
  color: #fff;
  background-color: #32343a;
}

.button-primary:active {
  background-color: #43464d;
}

.menu-bar.is-top {
  background-color: #ff8000;
  width: 40px;
  height: 3px;
  margin-bottom: 5px;
}

.menu-bar.is-bottom {
  background-color: #ff8000;
  width: 40px;
  height: 3px;
}

.nav-link-parent {
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 80vw;
  height: 100vh;
  padding: 3rem;
  display: flex;
}

.burger-menu-parent {
  z-index: 998;
  grid-column-gap: .2rem;
  grid-row-gap: .2rem;
  cursor: pointer;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 8vw;
  height: 7vh;
  margin-top: 3rem;
  margin-right: 3rem;
  display: flex;
  position: fixed;
  inset: 0% 0% auto auto;
}

.menu-overlay-parent {
  z-index: 997;
  background-color: #000;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.nav-link-home {
  color: #fff;
  text-transform: uppercase;
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 6vw;
  line-height: 120%;
  text-decoration: none;
  list-style-type: none;
  display: flex;
}

.link-home {
  color: #fff;
  text-decoration: none;
  transition: all .3s;
}

.link-home:hover {
  color: #ff8001;
  font-family: Lobster, sans-serif;
}

.link-home.w--current {
  color: #fff;
  font-size: 6vw;
  text-decoration: none;
}

.link-home.w--current:hover {
  color: #ff8001;
}

.link-photo {
  color: #fff;
  font-size: 6vw;
  text-decoration: none;
  transition: all .3s;
}

.link-photo:hover {
  color: #ff8001;
  font-family: Lobster, sans-serif;
}

.link-photo.w--current {
  transition: all .3s;
}

.link-photo.w--current:hover {
  color: #ff8001;
  font-family: Lobster, sans-serif;
}

.link-projets {
  color: #fff;
  font-size: 6vw;
  line-height: 120%;
  text-decoration: none;
  transition: all .3s;
}

.link-projets:hover {
  color: #ff8001;
  font-family: Lobster, sans-serif;
}

.link-contact {
  color: #ff8000;
  text-transform: uppercase;
  font-size: 6vw;
  line-height: 120%;
  text-decoration: none;
  transition: all .3s;
}

.link-contact:hover {
  color: #fff;
  font-family: Lobster, sans-serif;
}

.link-about {
  color: #fff;
  text-transform: uppercase;
  line-height: 120%;
  text-decoration: none;
  transition: all .3s;
}

.link-about:hover {
  color: #ff8001;
}

.logo-wrapper {
  width: 30vw;
}

.logo-paragraph {
  color: #ff8001;
  text-shadow: 0 .5px #fff;
  border-radius: 17px;
  font-family: Lobster, sans-serif;
  font-size: 2vw;
  line-height: 100%;
}

.code-2 {
  color: #fff;
  font-family: Georgia, Times, Times New Roman, serif;
}

.header-home {
  justify-content: center;
  align-items: center;
  padding-top: 4.2rem;
  padding-bottom: 0;
  display: flex;
}

.list-item-26 {
  color: #fff;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 7vw;
  line-height: 140%;
}

.legacy {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.loader-overlay {
  z-index: 999;
  background-color: #000;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: visible;
}

.loader-inner {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100vh;
  padding: 3rem;
  display: flex;
  position: relative;
}

.loader-bar {
  justify-content: center;
  align-items: center;
  padding-top: 26rem;
  display: flex;
}

.loader-number {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 1rem;
  display: flex;
}

.loader-bar-inside {
  width: 50vw;
  height: 4vh;
}

.loader-bar-bg {
  background-color: #ff8000;
  width: 20%;
  height: 100%;
}

.loader-number-inside {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 30vw;
  height: 14vh;
  padding: 1rem;
  display: flex;
}

.loader-number-start {
  z-index: 999;
  color: #ff8001;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  font-family: Times New Roman, TimesNewRoman, Times, Baskerville, Georgia, serif;
  font-size: 6.5rem;
  font-weight: 700;
  line-height: 100%;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
}

@media screen and (max-width: 991px) {
  .text-footer {
    flex-flow: column;
    font-size: 10rem;
    transform: scale3d(.6, 2.5, 1);
  }

  .container {
    max-width: 728px;
  }

  .nav-menu-wrapper {
    background-color: #0000;
  }

  .nav-menu-two {
    background-color: #fff;
    border-radius: 50px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    padding: 20px;
    display: flex;
    box-shadow: 0 8px 50px #0000000d;
  }

  .nav-link {
    padding-left: 5px;
    padding-right: 5px;
  }

  .nav-dropdown-list.shadow-three.w--open {
    position: absolute;
  }

  .menu-button-2 {
    padding: 12px;
  }

  .menu-button-2.w--open {
    color: #fff;
    background-color: #a6b1bf;
  }

  .menu-overlay-parent {
    display: flex;
  }

  .logo-wrapper {
    width: 60vw;
    height: 30%;
  }

  .logo-paragraph {
    text-shadow: -1px 0 #f3f3f3;
    word-break: normal;
    font-size: 4vw;
  }

  .loader-overlay {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .hero-content {
    margin-top: 0;
    font-size: 10.2rem;
  }

  .heading {
    font-size: 9rem;
  }

  .text-footer {
    transform: scale3d(.4, 2.5, 1);
  }

  .detail-who-is {
    width: 75vw;
    margin-top: 3.5rem;
    padding-top: 2rem;
  }

  .about-descript-cta {
    font-size: 2rem;
  }

  .navbar-logo-left-container {
    max-width: 100%;
  }

  .navbar-brand {
    padding-left: 0;
  }

  .nav-menu-two {
    border-radius: 20px;
    flex-direction: column;
    padding-bottom: 30px;
  }

  .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
  }

  .nav-dropdown {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .nav-dropdown-toggle {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-dropdown-list.shadow-three {
    box-shadow: 0 8px 50px #0000000d;
  }

  .nav-dropdown-list.shadow-three.w--open {
    position: relative;
  }

  .nav-dropdown-list.shadow-three.mobile-shadow-hide {
    box-shadow: none;
  }

  .nav-divider {
    width: 200px;
    max-width: 100%;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .nav-link-accent {
    margin-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
  }

  .mobile-margin-top-10 {
    margin-top: 10px;
  }

  .burger-menu-parent {
    margin-right: 2rem;
  }

  .menu-overlay-parent {
    display: flex;
  }

  .loader-overlay {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .hero-section {
    justify-content: space-between;
    align-items: stretch;
    height: 100vh;
    margin-bottom: 0;
    padding: .5rem 1rem 23.1rem;
    display: flex;
    overflow: hidden;
  }

  .nav-wrapper {
    justify-content: space-between;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-content {
    justify-content: center;
    align-items: center;
  }

  .nav-buttons-wrapper {
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
    display: flex;
  }

  .logo {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    mix-blend-mode: normal;
    border-radius: 10px;
    padding-top: 11px;
    padding-bottom: 17px;
    padding-left: 10px;
    transition: all .3s;
    display: none;
  }

  .heading {
    font-size: 5rem;
  }

  .text-block {
    justify-content: center;
    align-items: center;
  }

  .about-section {
    position: sticky;
    bottom: auto;
    overflow: hidden;
  }

  .marquee-wrapper {
    font-size: .875rem;
  }

  .text-block-3 {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 40px;
  }

  .discovery-section {
    overflow: hidden;
  }

  .discovey-wrapper {
    justify-content: center;
    align-items: center;
  }

  .grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .icone-wrapper {
    display: none;
  }

  .footer-section {
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
  }

  .footer-wrapper {
    grid-column-gap: 12.5rem;
    grid-row-gap: 12.5rem;
    padding-top: 3rem;
    position: sticky;
    top: 0%;
    overflow: hidden;
  }

  .footer-main-text {
    overflow: visible;
  }

  .footer-propertise {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 1rem;
    font-size: 2rem;
  }

  .text-footer {
    transform: scale3d(.25, 1.9, 1);
  }

  .text-block-6 {
    text-transform: uppercase;
  }

  .text-block-7 {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  .copyright-wrapper {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1rem;
  }

  .image-copyright {
    width: 1rem;
  }

  .menu-items-wrapper {
    flex-flow: column;
    display: none;
  }

  .global-wrapper {
    padding-top: 1rem;
  }

  .photo-hero-section {
    min-height: 97vh;
    font-size: 3vw;
  }

  .container-text {
    justify-content: center;
    display: flex;
  }

  .hero-heading {
    justify-content: center;
    align-items: center;
    padding: 0 .5rem;
    font-size: 4rem;
  }

  .heading-2 {
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 4rem;
    display: flex;
  }

  .cloud-img._1 {
    width: 110px;
    height: 130px;
  }

  .cloud-img._2 {
    width: 160px;
    height: 200px;
  }

  .cloud-img._3 {
    width: 160px;
    height: 180px;
  }

  .cloud-img._4 {
    width: 150px;
    height: 180px;
  }

  .cloud-img._5 {
    width: 80px;
    height: 90px;
  }

  .cloud-img._7 {
    width: 150px;
    height: 170px;
  }

  .cloud-img._8 {
    width: 160px;
    height: 170px;
  }

  .cloud-img._9 {
    width: 110px;
    height: 130px;
  }

  .cloud-img._15 {
    width: 150px;
    height: 160px;
  }

  .cloud-img._16 {
    width: 150px;
    height: 170px;
  }

  .cloud-img._17 {
    width: 110px;
    height: 130px;
  }

  .cloud-img._18, .cloud-img._19 {
    width: 160px;
    height: 180px;
  }

  .cloud-img._20 {
    width: 160px;
    height: 210px;
  }

  .cloud-img._21 {
    width: 170px;
    height: 190px;
  }

  .cloud-img._22, .cloud-img._23 {
    width: 120px;
    height: 140px;
  }

  .cloud-img._24 {
    width: 160px;
    height: 180px;
  }

  .sidebar-projects {
    height: 35vh;
  }

  .project-link {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .text-block-8 {
    font-size: 1rem;
  }

  .project-title-wrapper {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    justify-content: center;
    align-items: center;
    height: 10vh;
    padding-top: 0;
    padding-bottom: 1rem;
  }

  .portrait-image {
    display: none;
    overflow: visible;
  }

  .project-text {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .line {
    justify-content: center;
    align-items: center;
    height: .1vh;
    margin-bottom: .5rem;
    margin-left: 1rem;
  }

  .all-project {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 65vw;
    margin-left: 1rem;
    padding-top: .7rem;
    overflow: hidden;
  }

  .all-projects-text {
    padding: 7rem 1rem 2rem;
    font-size: 1rem;
  }

  .about-container {
    flex-flow: row;
    margin: 2rem 1rem;
  }

  .about-wrapper-right {
    width: 100vw;
  }

  .about-wrapper-left {
    display: none;
  }

  .about-skils {
    grid-column-gap: .4rem;
    grid-row-gap: .4rem;
  }

  .about-cta {
    grid-column-gap: .2rem;
    grid-row-gap: .2rem;
    justify-content: center;
    align-items: center;
    height: 20vh;
    padding: .3rem;
  }

  .about-title-wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
    width: 65vw;
    margin-bottom: 1rem;
    margin-left: 2rem;
    margin-right: 2rem;
    font-size: 1rem;
  }

  .icon-about {
    padding: 1rem;
  }

  .skills-wrapper {
    width: 65vw;
    padding: 0;
  }

  .title-skills-text {
    padding-top: .6rem;
    font-size: 1rem;
  }

  .skills-title {
    font-size: 1rem;
  }

  .skills-body {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .tools-wrapper {
    font-size: 1rem;
  }

  .adb-tools {
    font-size: .875rem;
  }

  .img-flash {
    width: 40px;
  }

  .design-skills, .communication-skills, .ad-skills, .content-skills, .management-project-skills, .fig-tools, .web-tools, .not-tools {
    font-size: .875rem;
  }

  .stay-in-boucle {
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 33%;
    height: 97%;
    padding: .3rem;
  }

  .arrow-cta, .linkedin-cta, .github-cta {
    border-radius: 10px;
    height: 97%;
  }

  .image-10, .image-11, .img-arrow-cta {
    width: 60px;
  }

  .text-block-14 {
    padding: 0;
    font-size: .875rem;
  }

  .bold-text-2 {
    font-size: 2.1rem;
    line-height: 3.5rem;
  }

  .div-block-7 {
    margin-top: 2rem;
  }

  .detail-who-is {
    width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: .875rem;
  }

  .about-descript-cta {
    font-size: 1.4rem;
  }

  .italic-text {
    font-family: Times New Roman, TimesNewRoman, Times, Baskerville, Georgia, serif;
    font-size: 10vw;
    line-height: 110%;
  }

  .copyright {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    display: flex;
  }

  .text-block-17, .text-block-18 {
    font-size: 1rem;
  }

  .text-block-19 {
    color: #fff;
    font-family: Georgia, Times, Times New Roman, serif;
  }

  .dropdown-toggle {
    border: 1px solid #fff;
    border-radius: 5px;
    padding: .3rem .5rem;
  }

  .dropdown-list {
    background-color: #d6d0d0;
  }

  .dropdown-list.w--open {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    background-color: #4d4d4dc9;
  }

  .dropdown-link, .dropdown-link-2, .dropdown-link-3 {
    color: #fff;
  }

  .burger-menu-wrapper {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 3rem;
    display: flex;
  }

  .burger-menu-line {
    background-color: #fff;
    width: 100%;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .button {
    width: 100%;
    height: 100%;
  }

  .container {
    max-width: none;
  }

  .nav-menu-two {
    flex-direction: column;
  }

  .navbar {
    background-color: #fff0;
    justify-content: center;
    align-items: center;
    width: 100vw;
    display: block;
  }

  .menu-bar {
    width: 20px;
    height: 2px;
    padding: 0;
  }

  .menu-bar.is-top {
    background-color: #ff8000;
    width: 30px;
    height: 3px;
    margin-bottom: 3px;
  }

  .menu-bar.is-bottom {
    background-color: #ff8000;
    width: 30px;
    height: 3px;
  }

  .menu-button-3 {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    width: 20vw;
    height: 4vh;
    margin-top: 1rem;
    margin-right: 1rem;
    padding: 0;
    display: flex;
  }

  .menu-overlay {
    background-color: #000;
    width: 100%;
    height: 100vh;
    position: fixed;
    inset: 0% 0% auto;
  }

  .nav-link-parent {
    grid-column-gap: 6.3rem;
    grid-row-gap: 6.3rem;
    text-align: left;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 50vh;
    padding: 7.5rem 1rem 1rem 1.7rem;
    display: flex;
  }

  .burger-menu-parent {
    z-index: 998;
    cursor: pointer;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 25vw;
    height: 5vh;
    margin-top: 1rem;
    margin-right: 0;
    padding: .3rem 0 .3rem .3rem;
    display: flex;
    position: fixed;
    inset: 0% 0% auto auto;
  }

  .menu-overlay-parent {
    z-index: 997;
    background-color: #000;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    position: fixed;
    inset: 0% 0% auto;
    overflow: visible;
  }

  .link-2 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-family: Hedvig Letters Serif, sans-serif;
    font-size: 10vw;
    line-height: 130%;
    text-decoration: none;
  }

  .nav-link-home {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 0;
    padding-left: 0;
    font-size: 9vw;
    display: flex;
  }

  .link-home {
    color: #fff;
    text-align: center;
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: 9vw;
    line-height: 150%;
    text-decoration: none;
  }

  .link-home.w--current {
    text-transform: uppercase;
    font-size: 9vw;
    transition: all .3s;
  }

  .link-home.w--current:hover {
    color: #ff8001;
    border-bottom: 1px #000;
    font-family: Lobster, sans-serif;
  }

  .link-photo {
    color: #fff;
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: 9vw;
    line-height: 120%;
    text-decoration: none;
    transition: all .3s;
  }

  .link-photo:hover {
    color: #ff8001;
    font-family: Lobster, sans-serif;
  }

  .link-projets {
    color: #fff;
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: 9vw;
    line-height: 150%;
    text-decoration: none;
    transition: opacity .3s;
  }

  .link-projets:hover {
    color: #ff7f02;
    font-family: Lobster, sans-serif;
  }

  .link-contact {
    color: #ff8000;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 0;
    padding-left: 0;
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: 9vw;
    line-height: 106%;
    text-decoration: none;
    transition: all .3s;
  }

  .link-contact:hover {
    color: #fff;
    font-family: Lobster, sans-serif;
  }

  .link-about {
    color: #fff;
    font-size: 9vw;
    line-height: 150%;
    text-decoration: none;
    transition: all .3s;
  }

  .link-about:hover {
    color: #ff8001;
  }

  .logo-wrapper {
    width: 78vw;
    height: 34%;
    margin-top: 9.125rem;
  }

  .logo-paragraph {
    text-shadow: 0 .5px #fff;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: normal;
    -webkit-text-fill-color: inherit;
    cursor: default;
    background-clip: border-box;
    margin-bottom: 0;
    font-family: Lobster, sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 100%;
    transition: all .2s;
  }

  .code-2 {
    color: #fff;
    text-transform: uppercase;
    text-shadow: -1px -2px 1px #fff;
    border: 1px #000;
    font-family: Outfit, sans-serif;
    line-height: 89%;
  }

  .header-home {
    justify-content: center;
    align-items: center;
    width: 100vw;
    padding-top: .8rem;
    display: flex;
    overflow: hidden;
  }

  .loader-overlay {
    display: none;
  }

  .about-wrapper-all-element {
    z-index: 200;
    width: 100vw;
    height: 90%;
    position: sticky;
    top: 80px;
    bottom: auto;
  }
}

#w-node-_59cf4505-81fe-7ee5-6c48-b3da020eadf7-73e24fed {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: auto;
}

@media screen and (max-width: 479px) {
  #w-node-_59cf4505-81fe-7ee5-6c48-b3da020eadf7-73e24fed {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: auto;
  }
}