/*---------------------------------------/*
 # SETTINGS
/*---------------------------------------*/
@import url("https://use.typekit.net/jmj8hqr.css");
/*---------------------------------------/*
 # GENERIC - BOOTSTRAP
/*---------------------------------------*/
.glightbox-clean .gslide-description {
  background-color: transparent;
}
.glightbox-clean .gdesc-inner {
  padding: 3px 0;
}

.toast {
  background-color: #2a2d2a;
  border-bottom: 2px solid #1c8526;
  box-shadow: 0px 0px 18px rgba(244, 255, 244, 0.15);
  position: fixed;
  border-radius: 0;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: flex-start;
  z-index: 50;
  max-width: calc(100% - 2rem);
}
.toast--error {
  border-bottom-color: #bd2424;
}

/*---------------------------------------/*
 # ELEMENTS
/*---------------------------------------*/
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
}

html {
  font-size: 16px;
}

body {
  background-color: #2f322f;
  color: #f4fff4;
  font-family: "area-normal", "sans-serif";
  font-size: 1rem;
  min-height: 100vh;
  padding-bottom: 21.8125rem;
  position: relative;
}
body::before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/background.svg");
  opacity: 0.1;
  background-repeat: repeat;
  background-size: 50rem;
  filter: brightness(125%) contrast(80%) saturate(0%);
  pointer-events: none;
  z-index: -1;
}

h1,
h2,
h3,
h4 {
  font-family: "semplicitapro", "sans-serif";
  font-weight: bold;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

small {
  font-size: 0.75rem;
}

/*---------------------------------------/*
 # OBJECTS
/*---------------------------------------*/
/*---------------------------------------/*
 # COMPONENTS
/*---------------------------------------*/
.c-nav {
  --step-height-difference: 3.125rem;
  filter: drop-shadow(0px 0px 18px rgba(244, 255, 244, 0.15));
  z-index: 62;
  display: flex;
  height: 10.9375rem;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.2s ease-out;
  pointer-events: none;
}
@media (max-width: 991px) {
  .c-nav {
    height: 8.125rem;
    --step-height-difference: 1.25rem;
  }
}
@media (max-width: 767px) {
  .c-nav {
    height: 5.625rem;
    width: 100%;
    --step-height-difference: 1.25rem;
  }
}
.c-nav__logo {
  aspect-ratio: 1/1;
  height: 100%;
  transition: all 0.2s ease-out;
  pointer-events: auto;
}
.c-nav__logo-container {
  display: inline-block;
  background-color: #2f322f;
  padding: 0 10px 0 6px;
  transition: all 0.2s ease-out;
  clip-path: polygon(100% 0, 100% calc(100% - var(--step-height-difference)), calc(100% - 2.5rem) 100%, 0 100%, 0 0);
  z-index: 62;
  height: 100%;
}
.c-nav__items {
  display: flex;
  width: 37.5rem;
  height: calc(100% - var(--step-height-difference));
  transition: all 0.2s ease-out;
  z-index: 61;
  pointer-events: auto;
}
@media (max-width: 767px) {
  .c-nav__items {
    position: absolute;
    width: 100%;
    height: 210px;
    max-height: 100vh;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #2f322f;
    padding-top: 4.375rem;
    padding-bottom: 1.25rem;
    gap: 2px;
    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
    pointer-events: none;
  }
  .c-nav__items::before {
    content: "";
    background-color: rgba(68, 71, 68, 0.8);
    width: 80%;
    height: calc(100% - 4.375rem - 1.25rem);
    bottom: 1.25rem;
    z-index: 60;
    position: absolute;
  }
  .c-nav__items--open {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    pointer-events: auto;
  }
}
.c-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background-color: #2f322f;
  font-weight: bold;
  text-decoration: none;
  color: #1c8526;
  transition: all 0.2s ease-out;
  z-index: 61;
}
@media (max-width: 767px) {
  .c-nav__item {
    flex: 0 0 26.6666666667%;
  }
}
.c-nav__item-outline {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 5%;
  opacity: 0;
  transition: all 0.2s ease-out;
  pointer-events: none;
}
@media (max-width: 991px) {
  .c-nav__item-outline {
    padding: 2%;
  }
}
.c-nav__item-icon {
  aspect-ratio: 1/1;
  box-sizing: border-box;
  padding: 5px;
  width: 4.5rem;
  height: 4.5rem;
}
.c-nav__item-text {
  transition: all 0.2s ease-out;
  height: 1.5rem;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.c-nav__item-arrow {
  position: absolute;
  top: 100%;
  background-color: #1c8526;
  width: 6.25rem;
  height: 1rem;
  clip-path: polygon(100% 0, 0 0, 50% 0%);
}
@media (max-width: 767px) {
  .c-nav__item-arrow {
    display: none;
  }
}
.c-nav__item--active {
  background-color: #1c8526;
  color: #f4fff4;
}
.c-nav__item--active .c-nav__item-outline path, .c-nav__item--active .c-nav__item-icon path {
  stroke: #f4fff4;
}
.c-nav__item--active .c-nav__item-arrow {
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.c-nav__item:hover .c-nav__item-outline {
  opacity: 1;
}
.c-nav__button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem;
  aspect-ratio: 1/1;
  width: 3rem;
  z-index: 62;
  transition: all 0.2s ease-out;
  pointer-events: auto;
  cursor: pointer;
}
.c-nav__button rect {
  transition: all 0.2s ease-out;
  fill: #1c8526;
}
.c-nav__button:hover {
  background-color: rgba(28, 133, 38, 0.15);
  cursor: pointer;
}
.c-nav__button--close rect {
  fill: rgba(28, 133, 38, 0);
}
.c-nav__button--close rect:first-child {
  transform: rotate(45deg) translate(20%, -15%);
  fill: #1c8526;
}
.c-nav__button--close rect:last-child {
  transform: rotate(-45deg) translate(-50%, -15%);
  fill: #1c8526;
}
.c-nav__button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  width: 100%;
  height: calc(100% - var(--step-height-difference));
  background-color: #2f322f;
  transition: all 0.2s ease-out;
}
@media (min-width: 768px) {
  .c-nav__button-container {
    display: none;
  }
}
.c-nav__extention {
  height: calc(100% - var(--step-height-difference));
  width: 2rem;
  background-color: #2f322f;
  clip-path: polygon(100% 0, 0 0, 0 100%);
  transition: all 0.2s ease-out;
  z-index: 62;
}
@media (max-width: 767px) {
  .c-nav__extention {
    display: none;
  }
}
.c-nav__extention--active {
  background-color: #1c8526;
}
.c-nav--small {
  --step-height-difference: 4.6875rem;
  transition: all 0.2s ease-out;
}
@media (max-width: 991px) {
  .c-nav--small {
    --step-height-difference: 2.5rem;
  }
}
@media (max-width: 767px) {
  .c-nav--small {
    height: 4.375rem;
    --step-height-difference: 0px;
  }
}
.c-nav--small .c-nav__logo-container {
  clip-path: polygon(100% 0, 100% calc(100% - var(--step-height-difference)), calc(100% - 2.5rem) 100%, 0 100%, 0 0);
}
@media (min-width: 768px) {
  .c-nav--small .c-nav__items {
    height: calc(100% - var(--step-height-difference));
  }
  .c-nav--small .c-nav__item-text {
    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
    height: 0;
  }
  .c-nav--small .c-nav__item-arrow {
    clip-path: polygon(100% 0, 0 0, 50% 0%);
  }
}
.c-nav--small .c-nav__button-container {
  height: 100%;
}

.c-home-intro__body {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: flex-start;
}
.c-home-intro__small-title {
  font-size: 1.5rem;
}
.c-home-intro__highlight {
  font-weight: bold;
  background-image: url("../img/scribbles/underline_1.svg");
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 100% auto;
  padding-bottom: 5px;
}
.c-home-intro__highlight--2 {
  background-image: url("../img/scribbles/underline_2.svg");
}
.c-home-intro__highlight--3 {
  background-image: url("../img/scribbles/underline_3.svg");
}
.c-home-intro__highlight--4 {
  background-image: url("../img/scribbles/underline_4.svg");
}
.c-home-intro__highlight--title {
  background-image: url("../img/scribbles/underline_title.svg");
  background-position: 0 100%;
  padding-bottom: 10px;
}
.c-home-intro__main-image {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  transition: transform 0.1s ease-out;
  overflow: hidden;
  cursor: pointer;
  pointer-events: none;
}
@media (min-width: 768px) and (max-width: 991px) {
  .c-home-intro__main-image {
    margin-top: 30px;
  }
}
@media (max-width: 575px) {
  .c-home-intro__main-image {
    margin-top: 10px;
  }
}
.c-home-intro__main-image--clicked {
  transform: rotate(-5deg);
}
.c-home-intro__main-image--clicked .c-home-intro__picture, .c-home-intro__main-image--clicked .c-home-intro__text-bubble {
  transform: rotate(5deg);
}
.c-home-intro__picture {
  transition: transform 0.1s ease-out;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}
.c-home-intro__picture-container {
  -webkit-mask-image: url("../img/scribbles/mask_1-1.svg");
          mask-image: url("../img/scribbles/mask_1-1.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: 48% -0.2%;
          mask-position: 48% -0.2%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  position: absolute;
  top: 3.8%;
  left: 2.8%;
  width: 120%;
  z-index: 1;
  transition: transform 0.1s ease-out;
}
.c-home-intro__picture-container--hand {
  -webkit-mask-image: url("../img/scribbles/mask_1-2.svg");
          mask-image: url("../img/scribbles/mask_1-2.svg");
  -webkit-mask-size: 36%;
          mask-size: 36%;
  -webkit-mask-position: -11% 51%;
          mask-position: -11% 51%;
  top: -9%;
  left: 9.8%;
  z-index: 2;
}
.c-home-intro__text-bubble {
  transition: transform 0.1s ease-out;
  transition-property: all;
  position: absolute;
  font-family: "swing-king", "sans-serif";
  color: #1c8526;
  font-size: 2rem;
  background-image: url("../img/scribbles/text_bubble.svg");
  background-size: 100% 100%;
  padding: 1rem 3rem 1rem 2rem;
  background-repeat: no-repeat;
  transform: translateX(-50%);
  top: 2%;
  left: 30%;
  text-wrap: nowrap;
}
@media (max-width: 1199px) {
  .c-home-intro__text-bubble {
    left: 25%;
  }
}
@media (max-width: 575px) {
  .c-home-intro__text-bubble {
    font-size: 6vw;
    padding: 3vw 9vw 3vw 6vw;
  }
}
.c-home-intro__triangle {
  filter: drop-shadow(0px 0px 18px rgba(244, 255, 244, 0.15));
  max-width: 100%;
  height: auto;
  width: auto;
}
.c-home-intro__hitbox {
  clip-path: polygon(78.19% 96.4%, 96.29% 3.5%, 3.7% 34.85%);
  pointer-events: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.c-home-intro__cta {
  position: relative;
  font-size: 2.5rem;
  font-family: "swing-king", "sans-serif";
  color: #1c8526;
  transform: rotate(3deg);
  align-items: center;
}
@media (max-width: 991px) {
  .c-home-intro__cta {
    margin-top: 3.5rem;
  }
}
.c-home-intro__spark {
  position: absolute;
  top: -20px;
  left: -42px;
}
.c-home-intro__spark--right {
  top: -11px;
  right: -50px;
  left: unset;
}

.c-big-projects {
  position: relative;
  background-color: #166a1e;
  z-index: 2;
  padding: 7rem 0;
  margin: 8.75rem 0;
  clip-path: polygon(0 0, 100% 30px, 100% 100%, 0 calc(100% - 30px));
}
.c-big-projects::before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/background.svg");
  opacity: 0.125;
  background-repeat: repeat;
  background-size: 50rem;
  filter: brightness(125%) contrast(80%) saturate(0%);
  pointer-events: none;
}

.c-article-swiper {
  overflow: visible;
  pointer-events: none;
}
.c-article-swiper .swiper-slide {
  pointer-events: none;
}
.c-article-swiper .swiper-slide .c-project-article {
  pointer-events: none;
}
.c-article-swiper .swiper-slide-active .c-project-article {
  pointer-events: auto;
}

.c-project-article {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 1;
}
.c-project-article__image {
  width: 100%;
  max-height: 400px;
  padding: 3px;
  border: 2px solid #1c8526;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
.c-project-article__image-container {
  position: relative;
  overflow: hidden;
  display: block;
}
.c-project-article__image-container:hover .c-project-article__image-info {
  opacity: 1;
  bottom: 10px;
}
.c-project-article__header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.c-project-article__scribble {
  position: absolute;
  z-index: -1;
  opacity: 0.15;
  height: calc(95% - 300px);
  width: auto;
  max-width: 100%;
  bottom: 5px;
  right: 20px;
  transform: rotate(10deg);
}
.c-project-article__scribble path {
  stroke-width: 4px;
}
@media (min-width: 992px) {
  .c-project-article__scribble {
    display: none;
  }
}

.c-image-notification {
  position: relative;
}
.c-image-notification:hover .c-image-notification__notification {
  opacity: 1;
  top: 10px;
}
.c-image-notification__notification {
  position: absolute;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  top: -10px;
  right: 10px;
  background-color: rgba(28, 133, 38, 0.7);
  color: #f4fff4;
  font-weight: bold;
  padding: 0.5rem 1rem;
  opacity: 0;
  transition: all 0.3s ease-out;
}

.c-project-swiper {
  position: relative;
  height: 200px;
  width: 60%;
}
@media (min-width: 992px) {
  .c-project-swiper {
    height: 9.375rem;
    width: 100%;
  }
}
.c-project-swiper__scroll {
  position: absolute;
  bottom: -65px;
  left: 50%;
  color: #1c8526;
  font-size: 1.5rem;
  opacity: 1;
  transition: opacity 0.3s ease-out;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  .c-project-swiper__scroll {
    bottom: unset;
    top: 50%;
    left: unset;
    right: -81.25px;
    transform: translateY(-50%) rotate(-90deg);
  }
}
@media (max-width: 575px) {
  .c-project-swiper__scroll {
    right: -65px;
  }
}
.c-project-swiper__scroll--top {
  bottom: unset;
  top: -65px;
  transform: translateX(-50%) rotate(180deg);
}
.c-project-swiper__scroll--top .c-project-swiper__scroll-symbol {
  transform: rotate(180deg);
}
@media (max-width: 991px) {
  .c-project-swiper__scroll--top {
    transform: translateY(-50%) rotate(90deg);
    bottom: unset;
    top: 50%;
    right: unset;
    left: -81.25px;
  }
  .c-project-swiper__scroll--top .c-project-swiper__scroll-symbol {
    transform: rotate(-90deg);
  }
}
@media (max-width: 575px) {
  .c-project-swiper__scroll--top {
    left: -65px;
  }
}
.c-project-swiper__scroll--hide {
  opacity: 0;
}
.c-project-swiper__scroll-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: delayed-bounce 1.5s ease-in-out infinite alternate forwards;
}
@media (max-width: 991px) {
  .c-project-swiper__scroll-symbol {
    transform: rotate(90deg);
  }
}
@media (max-width: 575px) {
  .c-project-swiper__scroll-symbol {
    display: none;
  }
}
.c-project-swiper__wrapper {
  height: 100%;
}
.c-project-swiper__slide {
  padding: 0.5rem 1rem;
  background-color: #1c8526;
  padding: 1rem;
  border: 2px solid #499d51;
  height: 100%;
  font-size: 1.25rem;
  position: relative;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.c-project-swiper__slide-bg {
  position: absolute;
  z-index: -1;
  opacity: 0.2;
  width: 100%;
  height: 100%;
  -o-object-position: top center;
     object-position: top center;
  -o-object-fit: cover;
     object-fit: cover;
}
.c-project-swiper__pagination {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.c-project-swiper__pagination--vertical {
  flex-direction: column;
}

.c-small-project-scribble {
  position: absolute;
  z-index: -1;
  height: 50%;
  width: 100%;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
@media (max-width: 991px) {
  .c-small-project-scribble {
    display: none;
  }
}
.c-small-project-scribble__image {
  height: 80%;
  width: 80%;
  transform: rotate(10deg);
}
.c-small-project-scribble__image path {
  stroke-width: 4px;
}

.c-cta {
  margin-top: 8.75rem;
  margin-bottom: 4.375rem;
}
.c-cta--no-spacing {
  margin: 0;
}
.c-cta__main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7rem 0;
}
.c-cta__text {
  font-family: "semplicitapro", "sans-serif";
  font-size: 2rem;
  font-weight: bold;
  z-index: 1;
  padding-bottom: 1.5rem;
  text-align: center;
}
.c-cta__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 41%, 61% 91%, 100% 0);
  background-color: #08280b;
  z-index: -1;
}
.c-cta__highlight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 105%;
  z-index: -1;
}
.c-cta__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.c-cta__scribble {
  position: absolute;
  top: 0%;
  left: 10%;
  width: 100%;
  height: auto;
  transform: rotate(-10deg);
}
@media (min-width: 1400px) {
  .c-cta__scribble {
    width: 70%;
  }
}
.c-cta__scribble--right {
  top: unset;
  left: 30%;
  bottom: 20%;
  width: 60%;
  transform: rotate(15deg);
}
@media (min-width: 1400px) {
  .c-cta__scribble--right {
    width: 40%;
  }
}

.c-cv-download {
  position: absolute;
  width: 100%;
  top: 3.5rem;
  transition: all 0.1s ease-out;
}
@media (max-width: 991px) {
  .c-cv-download {
    position: fixed;
    z-index: 50;
  }
  .c-cv-download__button {
    aspect-ratio: 1/1;
  }
}
@media (max-width: 888px) {
  .c-cv-download {
    top: 14rem;
  }
}
@media (max-width: 767px) {
  .c-cv-download {
    top: 8.75rem;
  }
}
.c-cv-download__container {
  display: flex;
  justify-content: flex-end;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.3s ease-out;
}
.c-cv-download__container--hide {
  opacity: 0;
  pointer-events: none;
}

.c-cv-intro {
  filter: drop-shadow(0px 0px 18px rgba(244, 255, 244, 0.15));
}
.c-cv-intro__container {
  --container-width: 540px;
  --side-margin: calc((100% - var(--container-width)) / 2);
  --lower-step: 45%;
  --start-step-col: 6.75;
  --end-step-col: 9;
  background-color: #08280b;
  padding-bottom: 2rem;
  padding-top: 11rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
  z-index: 10;
}
@media (min-width: 768px) {
  .c-cv-intro__container {
    --container-width: 720px;
    --lower-step: 60%;
    --start-step-col: 5;
    --end-step-col: 8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 13rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--side-margin) + var(--container-width) * var(--end-step-col) / 12) 100%, calc(var(--side-margin) + var(--container-width) * var(--start-step-col) / 12) var(--lower-step), 0 var(--lower-step));
  }
}
@media (min-width: 992px) {
  .c-cv-intro__container {
    --container-width: 960px;
    --lower-step: 45%;
    --start-step-col: 5.5;
    --end-step-col: 9;
  }
}
@media (min-width: 1200px) {
  .c-cv-intro__container {
    --container-width: 1140px;
    --start-step-col: 6.75;
  }
}
@media (min-width: 1400px) {
  .c-cv-intro__container {
    --container-width: 1320px;
    --start-step-col: 6.75;
  }
}
.c-cv-intro__info {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
@media (min-width: 992px) {
  .c-cv-intro__info {
    flex-direction: row;
    gap: 2rem;
  }
}
@media (max-width: 575px) {
  .c-cv-intro__info {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
}
.c-cv-intro__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (max-width: 575px) {
  .c-cv-intro__links {
    width: -moz-fit-content;
    width: fit-content;
    margin: 3rem auto 0 auto;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.c-cv-intro__main-image {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  pointer-events: none;
  margin-bottom: 2rem;
}
.c-cv-intro__picture {
  -o-object-fit: contain;
     object-fit: contain;
  width: 80%;
  margin-left: 20%;
}
.c-cv-intro__picture-container {
  -webkit-mask-image: url(../img/scribbles/mask_2.svg);
          mask-image: url(../img/scribbles/mask_2.svg);
  -webkit-mask-size: 113%;
          mask-size: 113%;
  -webkit-mask-position: 9.5% -13.2%;
          mask-position: 9.5% -13.2%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  position: absolute;
  top: -19%;
  right: 0%;
  height: 200%;
  z-index: 1;
}
.c-cv-intro__text-bubble {
  transition-property: all;
  position: absolute;
  font-family: "swing-king", "sans-serif";
  color: #1c8526;
  font-size: 2rem;
  background-image: url("../img/scribbles/text_bubble.svg");
  background-size: 100% 100%;
  padding: 1rem 3rem 1rem 2rem;
  background-repeat: no-repeat;
  transform: translateX(-50%);
  top: -10%;
  left: 24%;
  text-wrap: nowrap;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .c-cv-intro__text-bubble {
    left: 17%;
  }
}
@media (max-width: 575px) {
  .c-cv-intro__text-bubble {
    left: 20%;
    font-size: 6vw;
    padding: 3vw 9vw 3vw 6vw;
  }
}
.c-cv-intro__triangle {
  filter: drop-shadow(0px 0px 18px rgba(244, 255, 244, 0.15));
  max-width: 100%;
  height: auto;
  width: auto;
}
.c-cv-intro__picture-text {
  position: absolute;
  font-size: 1.5rem;
  font-family: "semplicitapro", "sans-serif";
  font-weight: bold;
  transform: rotate(30deg);
  bottom: 25px;
  left: 0px;
}
@media (max-width: 575px) {
  .c-cv-intro__picture-text {
    text-wrap: nowrap;
    transform: translate(-50%, 0) rotate(30deg);
    font-size: 4.2cqi;
    left: 40%;
    bottom: unset;
    top: 73%;
  }
  .c-cv-intro__picture-text h1 {
    font-size: 7cqi;
  }
}

.c-cv-description {
  margin-top: -2rem;
  padding-top: 3rem;
  padding-bottom: 2rem;
  background-color: #1c8526;
  max-height: 1000000px; /* Large enough to prevent font boosting on chromium android browsers */
}
@media (min-width: 768px) {
  .c-cv-description {
    margin-top: 0;
    padding-top: 32rem;
  }
}
@media (min-width: 992px) {
  .c-cv-description {
    padding-top: 25rem;
  }
}
.c-cv-description__text-pusher {
  float: right;
  display: none;
}
@media (min-width: 768px) {
  .c-cv-description__text-pusher {
    display: block;
    height: 325px;
    width: 58%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 42% 100%);
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 42% 100%);
  }
}
@media (min-width: 992px) {
  .c-cv-description__text-pusher {
    width: 53%;
    height: 286px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 34% 100%);
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 34% 100%);
  }
}
@media (min-width: 1200px) {
  .c-cv-description__text-pusher {
    width: 43%;
    height: 185px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 17% 100%);
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 17% 100%);
  }
}

.c-education {
  margin: 8.75rem 0;
  pointer-events: none;
}
.c-education__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 3rem 0;
}
.c-education__scribble {
  position: absolute;
  top: -40%;
  right: 0;
  opacity: 0.5;
  transform: rotate(15deg);
  z-index: -1;
}
@media (min-width: 768px) {
  .c-education__scribble {
    top: 0%;
    opacity: 1;
  }
}
@media (min-width: 992px) {
  .c-education__scribble {
    right: unset;
    left: 60%;
  }
}
@media (min-width: 1200px) {
  .c-education__scribble {
    left: 50%;
  }
}

.c-experience {
  margin-bottom: 8.75rem;
}
.c-experience__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 3rem 0;
}

.c-exp-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.c-exp-item__logo {
  height: 45px;
}

.c-cv-note {
  color: #1c8526;
  position: relative;
  font-family: "swing-king", "sans-serif";
  padding: 4rem 2rem 2.5rem 2rem;
  text-align: center;
  font-size: 1.25rem;
  transform: rotate(20deg);
  margin-bottom: 1.75rem;
}
@media (min-width: 992px) {
  .c-cv-note {
    margin-bottom: 8.75rem;
  }
}
.c-cv-note__outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.c-soft-skill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  margin-bottom: 7rem;
}
.c-soft-skill__icon {
  font-size: 3.5rem;
}
.c-soft-skill__title {
  font-weight: bold;
  text-align: center;
}
.c-soft-skill__background {
  position: absolute;
  top: 40%;
  left: 50%;
  width: clamp(300px, 75%, 500px);
  aspect-ratio: 1/1;
  pointer-events: none;
  mix-blend-mode: hard-light;
  z-index: -1;
  background-color: #1c8526;
  clip-path: polygon(50% 0%, 0% 86.6025403784%, 100% 86.6025403784%);
  transform-origin: 50% 57.735026919%;
}

.c-ellipse-bubble {
  position: absolute;
  width: 100px;
  top: 40%;
  left: 120px;
}

.c-contact-scribble {
  position: absolute;
  top: -30px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: "swing-king", "sans-serif";
  font-size: 2.25rem;
  color: #1c8526;
  transform: rotate(10deg);
}
.c-contact-scribble__text {
  background-image: url("../img/scribbles/underline_2.svg");
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 100% auto;
}
@media (max-width: 767px) {
  .c-contact-scribble__text {
    display: none;
  }
}

.c-contact-form {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-contact-form__submit {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.c-contact-form__submit-btn {
  margin-bottom: 1px;
}
.c-contact-form__spinner {
  color: #1c8526;
  font-size: 2.25rem;
}
.c-contact-form__spinner::before {
  display: block;
  height: 35px;
  width: 36px;
}
.c-contact-form__spinner--hide {
  display: none;
}

.c-contact-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  padding-bottom: 7rem;
}
@media (max-width: 767px) {
  .c-contact-info {
    padding-top: 8.75rem;
    gap: 3rem;
    padding-bottom: 0;
  }
}
.c-contact-info__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.c-project-hero {
  position: relative;
  margin-bottom: 3.5rem;
}
@media (min-width: 992px) {
  .c-project-hero {
    margin-bottom: -3rem;
  }
}
.c-project-hero__image {
  width: 100%;
  max-width: 2000px;
  height: auto;
  max-height: 800px;
  -o-object-fit: contain;
     object-fit: contain;
}
.c-project-hero__image-container {
  --container-width: 960px;
  --side-margin: calc((100% - var(--container-width)) / 2);
  --right-start-step-col: 9.5;
  --right-end-step-col: 10;
  --left-start-step-col: 1.5;
  --left-end-step-col: 2;
  display: flex;
  justify-content: center;
  margin-top: 4.375rem;
  width: 100%;
}
@media (min-width: 768px) {
  .c-project-hero__image-container {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .c-project-hero__image-container {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), calc(var(--side-margin) + var(--container-width) * var(--right-end-step-col) / 12) calc(100% - 3.5rem), calc(var(--side-margin) + var(--container-width) * var(--right-start-step-col) / 12) 100%, calc(var(--side-margin) + var(--container-width) * var(--left-end-step-col) / 12) 100%, calc(var(--side-margin) + var(--container-width) * var(--left-start-step-col) / 12) calc(100% - 3.5rem), 0 calc(100% - 3.5rem));
  }
}
@media (min-width: 1200px) {
  .c-project-hero__image-container {
    --container-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .c-project-hero__image-container {
    --left-start-step-col: 1;
    --left-end-step-col: 1.5;
    --right-start-step-col: 9.75;
    --right-end-step-col: 10.25;
    --container-width: 1320px;
  }
}
.c-project-hero__scroll {
  padding: 0.5rem;
  padding-bottom: 0.25rem;
  background-color: #1c8526;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  font-size: 1.5rem;
  color: #f4fff4;
  pointer-events: none;
  clip-path: polygon(100% 0, 100% calc(100% - 25px), 50% 100%, 0 calc(100% - 25px), 0 0);
  animation: delayed-bounce 2s ease-in-out infinite alternate forwards;
}
.c-project-hero__scroll-border {
  position: absolute;
  top: -3px;
  left: -3px;
  background-color: #1c8526;
  height: calc(100% + 6px);
  width: calc(100% + 6px);
  clip-path: polygon(100% 0, 100% calc(100% - 25px), 50% 100%, 50% calc(100% - 2px), calc(100% - 2px) calc(100% - 25px - 2px), calc(100% - 2px) 2px, 2px 2px, 2px calc(100% - 25px - 2px), 50% calc(100% - 2px), 50% 100%, 0 calc(100% - 25px), 0 0);
  animation: delayed-bounce 2s ease-in-out infinite alternate forwards;
}
.c-project-hero__scroll-container {
  position: absolute;
  left: 50%;
  bottom: calc(3.5rem + 25px);
  transform: translateX(-50%);
  filter: drop-shadow(0px 0px 18px rgba(244, 255, 244, 0.15));
  opacity: 1;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
}
.c-project-hero__scroll-container--hide {
  opacity: 0;
}
.c-project-hero__scroll-container--fixed {
  position: fixed;
}
.c-project-hero__scroll-icon {
  margin-top: -4px;
  font-size: 1.5rem;
}

.c-project-intro {
  margin-bottom: 3.5rem;
}
.c-project-intro__info {
  position: relative;
  margin-top: 1.75rem;
}
@media (min-width: 992px) {
  .c-project-intro__info {
    margin-top: 3.5rem;
  }
}
.c-project-intro__data {
  margin-bottom: 1.75rem;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .c-project-intro__data {
    flex-direction: row;
    height: 22px;
    align-items: center;
    gap: 1.5rem;
    border-bottom: 2px solid #f4fff4;
  }
}
.c-project-intro__data-devider {
  width: 100%;
  height: 3px;
  background-color: #f4fff4;
}
@media (min-width: 768px) {
  .c-project-intro__data-devider {
    height: calc(100% + 2px);
    width: 3px;
    transform: rotate(20deg);
  }
}
.c-project-intro__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (min-width: 992px) {
  .c-project-intro__links {
    justify-content: space-around;
  }
}
.c-project-intro__cta {
  padding-top: 4rem;
  font-family: "swing-king", "sans-serif";
  font-size: 1.5rem;
  color: #1c8526;
  text-align: center;
  transform: rotate(12deg);
}
@media (min-width: 992px) {
  .c-project-intro__cta {
    padding-top: 5rem;
    transform: rotate(-12deg);
  }
}
.c-project-intro__cta--underline {
  background-image: url(../img/scribbles/underline_2.svg);
  background-position: 0 75%;
  background-repeat: repeat-x;
  background-size: 100% auto;
  padding-bottom: 5px;
}
.c-project-intro__cta-arrow {
  position: absolute;
  top: 0;
  left: 65%;
  transform: rotate(-12deg) scaleX(-1);
}
@media (min-width: 992px) {
  .c-project-intro__cta-arrow {
    left: 0;
    transform: rotate(12deg);
  }
}
.c-project-intro__scribble {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.15;
  z-index: -1;
  width: 100%;
  transform: rotate(12deg);
}
@media (min-width: 768px) {
  .c-project-intro__scribble {
    height: 125%;
    width: unset;
    top: unset;
    bottom: 0;
  }
}
.c-project-intro__button-container {
  display: flex;
  justify-content: center;
}
@media (min-width: 992px) {
  .c-project-intro__button-container {
    width: 100%;
  }
}
.c-project-intro__highlight {
  font-weight: bold;
}

.c-project-image {
  margin: 7rem 0;
  padding: 3px;
  border: 2px solid #1c8526;
  box-shadow: 0px 0px 18px rgba(244, 255, 244, 0.15);
  max-width: 100%;
}
.c-project-image__image {
  max-width: 100%;
}
.c-project-image--decore {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: unset;
}

.c-btn {
  border: 1px solid #1c8526;
  padding: 1px;
  background-color: transparent;
  color: #f4fff4;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  position: relative;
  z-index: 23;
}
.c-btn::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 70%;
  height: 70%;
  background-color: #166a1e;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 21;
  transition: all 0.1s ease-out;
  pointer-events: none;
}
.c-btn:hover .c-btn__shine {
  visibility: visible;
  opacity: 1;
}
.c-btn:hover:focus::before {
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}
.c-btn__content {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 22;
  padding: 0.625rem 1.25rem;
  background-color: #1c8526;
  clip-path: polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 0);
  pointer-events: none;
}
.c-btn__text {
  height: 20px;
}
.c-btn__shine {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 21;
  top: -1px;
  left: -1px;
  pointer-events: none;
  clip-path: polygon(0% 0%, 0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px 100%, 100% 100%, 100% 0%);
  overflow: hidden;
  transition: opacity 0.3s ease-out;
}
.c-btn__shine::after {
  content: "";
  display: inline-block;
  position: absolute;
  height: 1000px;
  width: 30px;
  transform: translate(-50%, 0);
  animation: rotate 3s linear forwards infinite;
  top: calc(50% - 500px);
  left: calc(50% - 15px);
  background: linear-gradient(90deg, rgba(47, 50, 47, 0) 0%, #bbdabe 50%, rgba(47, 50, 47, 0) 100%);
  transform-origin: center center;
}
.c-btn__icon {
  font-size: 1.5rem;
}
.c-btn--ghost {
  border: none;
  transition: all 0.3s ease-out;
}
.c-btn--ghost::before {
  display: none;
}
.c-btn--ghost .c-btn__shine {
  display: none;
}
.c-btn--ghost .c-btn__content {
  background-color: transparent;
  padding: 0.625rem;
}
.c-btn--ghost:hover {
  background-color: rgba(244, 255, 244, 0.15);
}
.c-btn--ghost:hover:active {
  background-color: rgba(244, 255, 244, 0.4);
}

.c-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 25rem;
  width: 100%;
  z-index: 11;
  color: #f4fff4;
  text-decoration: none;
}
.c-project-card::before {
  content: "";
  position: absolute;
  z-index: 10;
  background-color: #1c8526;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.c-project-card::after {
  content: "";
  position: absolute;
  z-index: 10;
  background-color: #2a2d2a;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  clip-path: polygon(calc(100% + 1px) 0, calc(100% + 1px) calc(100% - 40px), calc(100% - 39px) 100%, 0 100%, 0 0);
}
.c-project-card__img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  z-index: 13;
}
@media (max-width: 991px) {
  .c-project-card__img {
    height: 40vh;
  }
}
.c-project-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 2rem 3rem;
  gap: 1rem;
  z-index: 12;
  overflow: hidden;
}
.c-project-card__body > * {
  z-index: inherit;
}
@media (max-width: 575px) {
  .c-project-card__description {
    display: none;
  }
}
.c-project-card__brief {
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 575px) {
  .c-project-card__brief {
    width: 100%;
  }
}
.c-project-card__brief-item {
  display: flex;
  padding: 2px 2rem 2px 0;
  border-bottom: 1px solid #f4fff4;
}
@media (max-width: 575px) {
  .c-project-card__brief-item {
    flex-wrap: wrap;
    padding-right: 0;
  }
}
.c-project-card__brief-item:last-child {
  border-bottom: none;
}
.c-project-card__brief-title {
  font-weight: bold;
  box-sizing: border-box;
  width: 4rem;
}
.c-project-card__scribble {
  position: absolute;
  width: 25%;
  transform: rotate(20deg);
  bottom: 9%;
  right: 10%;
  z-index: 10;
}
@media (max-width: 1399px) {
  .c-project-card__scribble {
    right: 4%;
  }
}
@media (max-width: 1199px) {
  .c-project-card__scribble {
    width: 70%;
    opacity: 0.15;
    right: 0;
    bottom: 9%;
  }
}
@media (max-width: 767px) {
  .c-project-card__scribble {
    width: 100%;
    bottom: 0%;
  }
}
.c-project-card__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.c-skillbar {
  display: flex;
  gap: 1rem;
  margin: 1rem 5%;
}
.c-skillbar__title {
  font-weight: bold;
}
.c-skillbar__body {
  flex: 1;
}
.c-skillbar__icon {
  width: 54px;
}
.c-skillbar__icon path {
  stroke: #f4fff4;
}
.c-skillbar__bar {
  position: relative;
  display: flex;
  height: 30px;
  width: 100%;
  border: 2px solid #f4fff4;
  transform: skew(20deg);
}
.c-skillbar__segment {
  border-left: 2px solid #f4fff4;
  flex: 1 1 0;
}
.c-skillbar__segment:first-child {
  border-left: none;
}
.c-skillbar__fill {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  transform: skew(-20deg);
  clip-path: polygon(0 0, 94% 0, 94% 100%, 0% 100%);
}
.c-skillbar__fill--0 {
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}
.c-skillbar__fill--1 {
  clip-path: polygon(0 0, 25% 0, 25% 100%, 0% 100%);
}
.c-skillbar__fill--2 {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
.c-skillbar__fill--3 {
  clip-path: polygon(0 0, 75% 0, 75% 100%, 0% 100%);
}

.c-input__label {
  font-weight: bold;
}
.c-input__field {
  background-color: transparent;
  padding: 0.625rem;
  border: 0;
  border-bottom: 2px solid #1c8526;
  color: #f4fff4;
  width: 100%;
}
.c-input__field:focus-visible {
  outline: 0;
}
.c-input__field::-moz-placeholder {
  overflow: visible;
  color: rgba(244, 255, 244, 0.7);
}
.c-input__field::placeholder {
  overflow: visible;
  color: rgba(244, 255, 244, 0.7);
}
.c-input__field--invalid {
  border-bottom: 2px solid #bd2424;
  color: #bd2424;
}
.c-input__error {
  display: inline-block;
  color: #bd2424;
  min-height: 12px;
}

.c-icon-text {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: #f4fff4;
  text-decoration: none;
  font-weight: bold;
}
.c-icon-text--link {
  cursor: pointer;
  transition: all 0.2s ease-out;
}
.c-icon-text--link:hover {
  color: #1c8526;
}
.c-icon-text__icon {
  font-size: 2.25rem;
  width: 37px;
  aspect-ratio: 1/1;
  text-align: center;
}

.c-footer {
  width: 100%;
  margin-top: 7rem;
  border-top: 3px solid #1c8526;
  padding: 1.75rem 0;
  background-color: #2a2d2a;
  position: absolute;
  bottom: 0;
}
.c-footer__right-container {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  align-items: center;
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
  padding: 25px;
}
@media (min-width: 576px) {
  .c-footer__right-container {
    margin-right: 0;
    width: 9.375rem;
    align-items: flex-start;
    gap: 2.625rem;
    padding: 0;
  }
}
.c-footer__socials {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.c-footer__socials-icons {
  display: flex;
  gap: 1rem;
}
.c-footer__link {
  color: #f4fff4;
  transition: all 0.3s ease-out;
}
.c-footer__link:hover {
  color: #1c8526;
}
.c-footer__copy {
  width: 100%;
  margin-top: 25px;
  border-top: 1px solid #f4fff4;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

/*---------------------------------------/*
 # UTILITIES
/*---------------------------------------*/
.u-icon {
  font-size: 2.25rem;
}

.u-icon-smaller {
  font-size: 1.5rem;
}

.u-icon-large {
  font-size: 3.5rem;
}

.u-shadow-honeydew {
  filter: drop-shadow(0px 0px 18px rgba(244, 255, 244, 0.15));
}

.u-top-padding {
  padding-top: 13rem;
}
@media (max-width: 991px) {
  .u-top-padding {
    padding-top: 10rem;
  }
}
@media (max-width: 767px) {
  .u-top-padding {
    padding-top: 7rem;
  }
}

.u-link {
  transition: 0.2s all ease-out;
  color: white;
  text-decoration: none;
}
.u-link--underline {
  text-decoration: underline;
}
.u-link:hover {
  color: #1c8526;
}

.u-scribble {
  font-family: "swing-king", "sans-serif";
  color: #1c8526;
}

.u-swiper-bullet {
  box-sizing: border-box;
  height: 8px;
  width: 8px;
  border: 1px solid #f4fff4;
  border-radius: 50%;
  display: inline-block;
}
.u-swiper-bullet--active {
  background-color: #f4fff4;
  border-width: 0;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes delayed-bounce {
  0%, 80% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(15px);
  }
}