@charset "UTF-8";
@font-face {
  font-family: "Geist";
  src: url(../font/GeistVF.ttf);
}
@font-face {
  font-family: "New_Title";
  src: url(../font/NewTitle-Medium.otf);
}
@font-face {
  font-family: "Telma";
  src: url(../font/Telma-Regular.otf);
}
@font-face {
  font-family: "Belina";
  src: url(../font/Belina-Bold.ttf);
}
* {
  padding: 0;
  margin: 0;
  font-family: "Geist", sans-serif;
}

#cursor {
  width: 15px;
  aspect-ratio: 1/1;
  background-color: #252328;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: width 250ms ease-in-out, top 250ms ease-out, left 250ms ease-out, -webkit-transform 250ms ease-out;
  transition: width 250ms ease-in-out, top 250ms ease-out, left 250ms ease-out, -webkit-transform 250ms ease-out;
  transition: width 250ms ease-in-out, transform 250ms ease-out, top 250ms ease-out, left 250ms ease-out;
  transition: width 250ms ease-in-out, transform 250ms ease-out, top 250ms ease-out, left 250ms ease-out, -webkit-transform 250ms ease-out;
  z-index: 10000;
  display: none;
  pointer-events: none;
  left: -50px;
  top: 10px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  #cursor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 0px;
    top: 60px;
  }
}
#cursor svg {
  width: 25px;
}
#cursor svg polygon {
  fill: #E4E9EA;
  visibility: hidden;
}

.hover {
  cursor: none;
}

.curtain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.curtain-block {
  position: absolute;
  left: -101%;
  width: 100vw;
  height: 25vh;
  background: #252328;
}

.curtain-block:nth-child(1) {
  top: 0vh;
}

.curtain-block:nth-child(2) {
  top: 25vh;
}

.curtain-block:nth-child(3) {
  top: 50vh;
}

.curtain-block:nth-child(4) {
  top: 75vh;
}

header {
  width: 80.23vw;
  padding: 40px 9.885vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 10000;
}
header img {
  width: 100px;
}
header #header-nav {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding-top: 115px;
  visibility: hidden;
}
@media (min-width: 1024px) {
  header #header-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 80.23vw;
    padding: 200px 9.885vw 0;
  }
}
header #header-nav > img {
  display: none;
  width: 450px;
  margin-right: 240px;
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  will-change: transform, opacity;
}
@media (min-width: 1024px) {
  header #header-nav > img {
    display: block;
  }
}
header #header-nav #container-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 50px;
}
header #header-nav #container-nav a {
  text-decoration: none;
  overflow: hidden;
  display: inline-block;
}
header #header-nav #container-nav a:nth-child(3) {
  margin-bottom: 75px;
}
header #header-nav #container-nav {
  /* BIG LINKS (animés par GSAP) */
}
header #header-nav #container-nav .big-link {
  display: inline-block;
  font-size: 3rem;
  color: #FFFDF8;
  letter-spacing: -5%;
  /* masque clip-path */
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
@media (min-width: 1024px) {
  header #header-nav #container-nav .big-link {
    font-size: 5.25rem;
  }
}
header #header-nav #container-nav {
  /* SMALL LINKS */
}
header #header-nav #container-nav .tiny-link {
  font-size: 1rem;
  font-weight: lighter;
  color: #FFFDF8;
  opacity: 0.5;
  margin-bottom: 15px;
  overflow: visible;
  -webkit-transform: none;
          transform: none;
}
@media (min-width: 1024px) {
  header #header-nav #container-nav .tiny-link {
    font-size: 1.5rem;
  }
}
header #header-nav #nav-header-below {
  cursor: default;
  position: absolute;
  bottom: 40px;
  left: 9.885vw;
  width: 80.23vw;
  color: #FFFDF8;
  border-top: solid 1px #FFFDF8;
  font-size: 0.75rem;
  padding-top: 25px;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  will-change: transform, opacity;
}
header #burger {
  position: relative;
  z-index: 1100;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #252328;
}
header #burger p {
  margin-right: 10px;
}
header #burger #container-burger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: -webkit-transform 350ms ease-in-out;
  transition: -webkit-transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}
header #burger #container-burger .burger-slice {
  display: block;
  height: 1px;
  width: 20px;
  background-color: #252328;
  margin: 2px 0;
}
header #burger:hover #container-burger {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
header #container-bg-slice {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
header #container-bg-slice .bg-slice {
  width: 100vw;
  height: 14.2857142857vh;
  background-color: #252328;
  will-change: transform;
}

.base-input-style {
  background-color: #E2E7E8;
  padding: 20px 13px;
  font-size: 0.8125rem;
  color: #252328;
  margin: 5px;
  border: none;
  outline: none;
  border-radius: 10px;
}

#contact-modale {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(37, 35, 40, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}
#contact-modale #container-contact-modale {
  width: 75vw;
  max-width: 966px;
  padding: 40px 50px;
  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(65%, #E4E9EA));
  background: linear-gradient(90deg, #FFFFFF 0%, #E4E9EA 65%);
  border-radius: 15px;
  position: relative;
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
  -webkit-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}
#contact-modale #container-contact-modale a {
  text-decoration: none;
  color: #252328;
  font-size: 0.8125rem;
  position: absolute;
  top: 30px;
  right: 51px;
  opacity: 0.75;
  -webkit-transition: opacity 150ms ease-in-out;
  transition: opacity 150ms ease-in-out;
}
#contact-modale #container-contact-modale a::after {
  content: "";
  position: absolute;
  background: url("../img/assets/close-btn.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 18px;
  aspect-ratio: 1/1;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -21px;
}
#contact-modale #container-contact-modale a:hover {
  opacity: 1;
}
#contact-modale #container-contact-modale h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}
#contact-modale #container-contact-modale p {
  max-width: 660px;
  margin-bottom: 30px;
}
#contact-modale #container-contact-modale form {
  width: calc(100% - 100px);
  max-width: 542px;
}
#contact-modale #container-contact-modale form .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#contact-modale #container-contact-modale form .flex input {
  width: calc(50% - 10px);
}
#contact-modale #container-contact-modale form textarea {
  width: calc(100% - 35px);
  margin-bottom: 110px;
}
#contact-modale #container-contact-modale form #container-contact {
  width: 175px;
  height: 60px;
  position: absolute;
  bottom: 40px;
  right: 40px;
  border-radius: 120px;
  background-color: #252328;
  cursor: none;
}
#contact-modale #container-contact-modale form #container-contact #contact {
  width: 100%;
  height: 100%;
  border-radius: 120px;
  border: none;
  outline: none;
  background-color: #252328;
  color: #FFFDF8;
  text-indent: 30px;
  -webkit-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}
#contact-modale #container-contact-modale form #container-contact #circle-contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #E2E7E8;
  left: 5px;
  top: 5px;
  -webkit-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}
#contact-modale #container-contact-modale form #container-contact #circle-contact svg {
  width: 30%;
  fill: #252328;
  -webkit-transform: translateX(-1px);
          transform: translateX(-1px);
}
#contact-modale #container-contact-modale form #container-contact:hover #contact {
  text-indent: 0;
}
#contact-modale #container-contact-modale form #container-contact:hover #circle-contact {
  left: 120px;
  background-color: #252328;
}

#second-footer {
  color: #FFFDF8;
  background-color: #252328;
  padding: 30px 20px;
}
@media (min-width: 1024px) {
  #second-footer {
    padding: 60px 118px;
  }
}
#second-footer #contactme {
  margin: 100px 0 55px;
}
@media (min-width: 1024px) {
  #second-footer #contactme {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
#second-footer #contactme h3 {
  font-size: 1.875rem;
}
@media (min-width: 1024px) {
  #second-footer #contactme h3 {
    font-size: 3rem;
  }
}
#second-footer #contactme h3:nth-child(1) {
  text-transform: uppercase;
  cursor: default;
}
#second-footer #contactme h3:nth-child(2) {
  text-decoration: underline;
  cursor: pointer;
}
#second-footer #footer-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#second-footer #footer-nav a {
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Geist", sans-serif;
  color: #FFFDF8;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 5px 0;
}
#second-footer #footer-nav a:nth-child(1) {
  margin: 0 0 5px;
}
#second-footer #footer-nav a:nth-child(4) {
  margin: 25px 0 0;
}
#second-footer #big-logo {
  width: 230px;
  margin: 145px 0 15px;
}
@media (min-width: 1024px) {
  #second-footer #big-logo {
    width: 572px;
    margin: 145px 0 40px;
  }
}
#second-footer #nav-below {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: solid 1px #FFFDF8;
  padding-top: 15px;
}
#second-footer #nav-below p {
  font-size: 0.75rem;
}
@media (min-width: 1024px) {
  #second-footer #nav-below p {
    font-size: 0.9375rem;
  }
}
#second-footer #nav-below a {
  text-decoration: none;
  color: #FFFDF8;
  font-size: 0.75rem;
}
@media (min-width: 1024px) {
  #second-footer #nav-below a {
    font-size: 0.9375rem;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(65%, #E4E9EA));
  background: linear-gradient(90deg, #FFFFFF 0%, #E4E9EA 65%);
  color: #252328;
  overflow-x: hidden;
}

.new-title-font {
  font-family: "New_Title";
  text-transform: uppercase;
  font-weight: lighter;
  letter-spacing: 2%;
}

.telma-font {
  font-family: "Telma";
  font-weight: lighter;
  letter-spacing: -5%;
}

.belina-font {
  font-family: "Belina";
  font-weight: lighter;
  letter-spacing: -5px;
}

@media (min-width: 1024px) {
  #mobile-break {
    display: none;
  }
}

#advertising {
  width: 100vw;
  height: 100vh;
  background-color: #252328;
  color: #FFFDF8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#advertising img {
  width: 230px;
  margin-top: 200px;
}
#advertising p {
  width: 350px;
  text-align: center;
  font-size: 1rem;
  letter-spacing: -5%;
  line-height: 95%;
  margin: 50px 0 100px;
}
#advertising button {
  color: #FFFDF8;
  background-color: transparent;
  border: none;
  font-size: 1.875rem;
}

#hero {
  width: 100vw;
  position: relative;
  padding: 0 0 50px;
}
#hero #container-hero {
  text-align: center;
}
#hero #container-hero h1 {
  font-size: 6rem;
  cursor: default;
}
@media (min-width: 1024px) {
  #hero #container-hero h1 {
    font-size: 10rem;
  }
}
#hero #container-hero #container-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 40px 0;
}
@media (min-width: 1024px) {
  #hero #container-hero #container-cards {
    margin: 60px 0;
  }
}
#hero #container-hero #container-cards .card {
  display: block;
  width: 115px;
  aspect-ratio: 48/53;
  border-radius: 15px;
  background-color: red;
  -webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1490196078));
          filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1490196078));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (min-width: 1024px) {
  #hero #container-hero #container-cards .card {
    width: 240px;
  }
}
#hero #container-hero #container-undertitle #fancy {
  font-size: 4.75rem;
  z-index: 1;
  position: relative;
  cursor: default;
  text-transform: lowercase;
}
@media (min-width: 1024px) {
  #hero #container-hero #container-undertitle #fancy {
    font-size: 6rem;
  }
}
#hero #container-hero #container-undertitle #details {
  font-size: 4rem;
  color: #B3B3B3;
  line-height: 80%;
  -webkit-transform: translateY(-17px);
          transform: translateY(-17px);
  z-index: -1;
  cursor: default;
}
@media (min-width: 1024px) {
  #hero #container-hero #container-undertitle #details {
    font-size: 6rem;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
}

#projects-overview {
  width: 100vw;
  overflow: hidden;
  position: relative;
  margin-bottom: 115px;
}
#projects-overview #container-overview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}
#projects-overview .card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: block;
  background-color: #B3B3B3;
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  margin: 0 10px;
  height: 480px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
#projects-overview .tiny-card {
  width: 450px;
}
#projects-overview .big-card {
  width: 610px;
}

#last-projects {
  margin-bottom: 150px;
}
#last-projects #title-last-projects {
  font-size: 6rem;
  line-height: 0.5;
  margin-bottom: 90px;
}
@media (min-width: 1024px) {
  #last-projects #title-last-projects {
    font-size: 8rem;
    width: 80.83%;
    margin: 0 auto 120px;
  }
}
#last-projects .project {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 80.83%;
  margin: 0 auto;
  padding: 40px 10.085%;
  text-decoration: none;
  border-bottom: 1px solid #252328;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  -webkit-transition: border-color 0.4s ease;
  transition: border-color 0.4s ease;
  --overlay-scale: 0;
  --img-scale: .85;
  --img-opacity: .9;
  --y-offset: 0;
  --name-color: #252328;
  --category-color: #252328;
  --category-opacity: .5;
  -webkit-transform: translateY(var(--y-offset));
          transform: translateY(var(--y-offset));
}
@media (min-width: 1024px) {
  #last-projects .project {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 40px;
    --img-scale: .6;
    --img-opacity: 0;
  }
}
#last-projects .project:nth-child(6) {
  border-bottom: none;
}
#last-projects .project::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #252328;
  -webkit-transform: scaleX(var(--overlay-scale));
          transform: scaleX(var(--overlay-scale));
  -webkit-transform-origin: left;
          transform-origin: left;
  z-index: 0;
}
#last-projects .project .project-text {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}
@media (min-width: 1024px) {
  #last-projects .project .project-text {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
#last-projects .project .name-project {
  font-size: 3rem;
  line-height: 0.75;
  color: var(--name-color);
  margin: 0;
}
@media (min-width: 1024px) {
  #last-projects .project .name-project {
    width: 700px;
  }
}
#last-projects .project .category-project {
  font-size: 1rem;
  color: var(--category-color);
  opacity: var(--category-opacity);
  margin: 0;
}
@media (min-width: 1024px) {
  #last-projects .project .category-project {
    font-size: 1.5rem;
  }
}
#last-projects .project .img-project {
  position: relative;
  z-index: 1;
  width: 45px;
  aspect-ratio: 5/3;
  border-radius: 15px;
  -webkit-transform: scale(var(--img-scale));
          transform: scale(var(--img-scale));
  opacity: var(--img-opacity);
  -webkit-transform-origin: center right;
          transform-origin: center right;
}
#last-projects #btn {
  color: var(--btn-color, #252328);
  height: unset;
  display: block;
  width: 100px;
  text-align: center;
  margin: 50px auto 0;
  position: relative;
  border-radius: 50px;
  font-size: 1.5rem;
  padding: 15px 50px;
  text-decoration: none;
  border: solid 1px #252328;
  overflow: hidden;
  --bubble-bottom: -100%;
  --bubble-width: 100px;
  --glow-opacity: 0;
  --ripple-scale: 0;
  --ripple-opacity: 0;
}
#last-projects #btn::after {
  content: "";
  position: absolute;
  display: block;
  background-color: #252328;
  width: var(--bubble-width);
  aspect-ratio: 2/1;
  left: 50%;
  bottom: var(--bubble-bottom);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  border-radius: 50%;
  z-index: -1;
}
#last-projects #btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.15), transparent 70%);
  opacity: var(--glow-opacity);
  z-index: -2;
}
#last-projects #btn .btn-ripple {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 2;
}
#last-projects #btn .btn-ripple span {
  position: absolute;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  -webkit-transform: scale(var(--ripple-scale));
          transform: scale(var(--ripple-scale));
  opacity: var(--ripple-opacity);
  translate: -50% -50%;
}

#all-proj-brand-web {
  margin-top: 37px;
}

#main-client {
  padding-top: 243px;
  margin: 0 auto 50px;
  max-width: 1164px;
}
#main-client h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  #main-client h2 {
    margin-left: 99px;
  }
}
#main-client p {
  font-size: 1rem;
  max-width: 660px;
}
@media (min-width: 768px) {
  #main-client p {
    margin-left: 99px;
  }
}
#main-client .container-project {
  background-color: #D9D9D9;
  border-radius: 15px;
  padding: 20px 45px;
  margin: 25px auto;
  position: relative;
}
#main-client .container-project h2 {
  margin: 0;
}
#main-client .container-project p {
  margin: 0;
}
#main-client .container-project .container-time {
  margin: 25px 0 10px;
}
#main-client .container-project .comments {
  margin: 25px 0;
}
#main-client .container-project .pics {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
}
#main-client .container-project .pics div {
  width: 60px;
  aspect-ratio: 1/1;
  border-radius: 5px;
  background-color: #E4E9EA;
}
#main-client .container-project .pics div.margin-15 {
  margin: 0 15px;
}
#main-client .container-project .pics div.show-more {
  position: relative;
}
#main-client .container-project .pics div.show-more::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #252328;
  opacity: 0.2;
}
#main-client .container-project .pics div.show-more::before {
  content: "";
  position: absolute;
  width: 20px;
  aspect-ratio: 1/1;
  background: url(../img/assets/more_dots.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#main-client .container-project .opacity-75 {
  opacity: 0.75;
}
#main-client .container-project .show-chevron {
  cursor: pointer;
  position: absolute;
  width: 36px;
  aspect-ratio: 1/1;
  top: 27px;
  right: 42px;
  background: url(../img/assets/chevron.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: -webkit-transform 350ms ease-in-out;
  transition: -webkit-transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}
#main-client .container-project form {
  position: absolute;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  bottom: 20px;
  right: 45px;
}
#main-client .container-project form #submit {
  width: 34px;
  aspect-ratio: 1/1;
  border-radius: 5px;
  background-color: #252328;
  background-image: url(../img/assets/send-btn.svg);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 15px;
  border: none;
  outline: none;
}
#main-client .container-project .element-to-show {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 350ms ease-in-out;
  transition: opacity 350ms ease-in-out;
}
#main-client .container-project .element-to-show.visible {
  display: block;
  opacity: 1;
}

#works {
  padding: 95px 20px 0;
  margin-bottom: 150px;
}
@media (min-width: 1024px) {
  #works {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}
#works .project {
  display: block;
  max-width: 550px;
  margin: 0 15px 50px 15px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  color: #252328;
}
#works .project .container-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  max-width: 550px;
}
#works .project .container-flex h3 {
  font-size: 3rem;
}
#works .project .container-img {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  clip-path: inset(25px 75px 25px 75px round 15px);
  -webkit-transition: clip-path 1.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: clip-path 1.3s cubic-bezier(0.23, 1, 0.32, 1);
}
#works .project .image {
  width: 100%;
  aspect-ratio: 592/437;
  display: block;
  margin-top: 10px;
  border-radius: 15px;
  -webkit-transform: scale(1.16);
          transform: scale(1.16);
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: -webkit-transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
#works .project:hover .container-img {
  clip-path: inset(0px 0px 0px 0px round 15px);
}
#works .project:hover .image {
  -webkit-transform: scale(1);
          transform: scale(1);
}

#work {
  width: 80.23vw;
  margin: 47.5px 9.885vw 150px;
}
#work #name {
  font-size: 3rem;
  line-height: 95%;
}
#work #id {
  font-size: 3rem;
  line-height: -5px;
  margin-bottom: 16px;
}
#work #description {
  max-width: 572px;
  margin: 15px;
}
#work .container-img {
  display: block;
  width: 80.23vw;
  aspect-ratio: 1165/659;
  margin: 0 auto;
  background-color: #E1E1E1;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
#work .container-img .img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  inset: 0;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
#work .container-img .img.active {
  opacity: 1;
}

#mentions {
  width: 80.23vw;
  margin: 35px auto 150px;
}
#mentions h2 {
  margin: 60px 0 15px;
}
#mentions h3 {
  margin: 20px 0 5px;
}