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

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
  display: block;
}

body {
  font-family: var(--font-family-main);
  font-size: var(--text-sm);
}

/* NAVIGATION */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: var(--primary-color);
  border-bottom: 1px solid white;
  font-size: var(--text-sm);
  font-family: var(--font-family-main);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 var(--space-xxl);
  z-index: 4;
}

.nav__brand {
  display: flex;
  height: 100%;
  align-items: center;
  width: 30%;
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-weight-extralight);
}

.nav__menu {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 var(--space-xl);
  border-left: 1px solid white;
}

.nav__menu ul {
  font-weight: var(--font-weight-light);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link,
.nav__link--download {
  color: white;
  text-decoration: none;
}

.nav__link--download {
  display: flex;
}

.nav__links{
  display: flex;
  align-items: center ;
  justify-content: space-between;
  gap: var(--space-lg);
  width: auto;
}

.nav__contacts{
  display: flex;
  gap: var(--space-md);
  border-right: 1px solid white;
  padding-right: var(--space-lg);
}

.nav__contact-mobile{
  display: none;
}



.nav_selected {
  position: relative;
  display: inline-block;
  font-weight: var(--font-weight-medium);
}

.nav_selected::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 20px; 
  height: 2px;  
  background-color: white; 
}

a.nav__link.nav_selected:hover,
.nav__brand a.nav__title:hover {
  transform: none;
  text-shadow: none;
}

.burger {
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='32' viewBox='0 0 36 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 32H0V28H36V32ZM36 18H0V14H36V18ZM36 4H0V0H36V4Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
  width: 30px;
  height: 30px;
}

@media (max-width: 899px) {
  .nav__menu{
    display: none;
    border: none;
  }

  .nav {
  height: 10vh;
  padding: 0 var(--space-lg);
}

  .nav__brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-weight-extralight);
  }


  .burger {
    display: block;
    cursor: pointer;
  }

  #menu-toggle:checked ~ .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--primary-color);
    position: absolute;
    top: 10vh; 
    left: 0;
    width: 100%;
    height: 100dvh;
    padding: var(--space-md);
    z-index: 3;
  }


  .nav__menu ul {
  font-weight: var(--font-weight-regular);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;

  
}

.nav__menu li {
  width: 100%;
  border-bottom: 1px solid white;
  padding-bottom: var(--space-lg);
  text-align: center;
}

.nav__link--download{
  margin-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid white;
  width: 100%;
  justify-content: center;
}

.nav__menu li:first-child {
  margin-top: var(--space-md) ;
}

#menu-toggle:checked + .nav__brand .burger {
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='32' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='4' x2='32' y2='32' stroke='white' stroke-width='4'/%3E%3Cline x1='4' y1='32' x2='32' y2='4' stroke='white' stroke-width='4'/%3E%3C/svg%3E");
}

.nav__links{
  display: flex;
  flex-direction: column-reverse;
  align-items: center ;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
}

.nav__contacts{
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  border: none;
  padding-right: 0;
}

.nav__contact-mobile{
  display: block;
}

}

/* SECTION*/

.section {
  padding: var(--space-xxl);
  min-height: 100dvh;
}

.section-intro {
  padding: 110px var(--space-xxl) var(--space-xl) var(--space-xxl);
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

#projects .section-intro {
  min-height: 100dvh;
  padding-bottom: var(--space-xl);
  overflow: hidden;
}

.section-intern {
  margin-bottom: var(--space-xxxl);
  height: auto;
}

.section-intern-80 {
  margin-bottom: var(--space-xxxl);
  height: 80vh;
}

.section-dark {
  background-color: var(--background-dark);
}

.section-light {
  background-color: var(--background-light);
}

.section-full-screen {
  height: 100dvh;
}

.section-parcours {
  min-height: 100dvh;
  padding: var(--space-xl) 0;
  background-color: none;
}

.grid-container.section-parcours {
  place-items: center;
  gap: var(--space-xl);
}

@media (max-width: 899px) {
  .item-1 {
    order: 2;
  }

  .item-2 {
    order: 1;
  }
}

@media (max-width: 899px) {
  .section {
    padding: var(--space-xxl) var(--space-lg);
  }

  .section-intro {
    padding: 15vh var(--space-lg) var(--space-lg) var(--space-lg);
  }

  

.grid-container.section-parcours {
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: 0;
}


}

.spacer {
  padding: var(--space-xl);
}
/* INTRO */

.intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  height: 100%;
}

#projects .intro {
  display: flex;
  justify-content: center;
  height: 100%;
}

.intro h1 {
  font-family: var(--font-family-secondary);
  text-transform: uppercase;
  font-weight: var(--font-weight-thin);
  font-size: var(--text-xl);
}

.intro p {
  font-family: var(--font-family-tertiary);
  font-weight: var(--font-weight-extralight);
  font-size: var(--text-lg);
}

.intro ul {
  list-style: none;
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-extralight);
  font-size: var(--text-md);
}

.intro li {
  margin-bottom: var(--space-sm);
}

.intro_image {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.intro_image img {
  height: 115%;
  margin-bottom: -60px;
  
  
}

@media (max-width: 899px) {
  .intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .intro_image {
    height: 100%;
    width: 100%;
    margin-top: -60px;
    
    align-items: center;
  }

  .intro_image img {
    height: 110%;
    margin-bottom: 0;
    margin-right: -100px;
  }
}

/* BLOCK TITLE*/

.title__block {
  margin-bottom: var(--space-xxl);
}

.title__header {
  display: flex;
  align-content: center;
}

.title__icon {
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2727%27%20height%3D%2727%27%20viewBox%3D%270%200%2027%2027%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20d%3D%27M21.8789%2024L0%202.12109L1%201L2.12155%200L24%2021.8785V0H27V24.8785V25.1039V27H25.1038H24.879H0V24H21.8789Z%27%20fill%3D%27%23FF6237%27%2F%3E%3C%2Fsvg%3E');
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: var(--space-sm);
}

.title__block h1,
.title__block h2 {
  font-size: var(--text-xl);
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-light);
  text-transform: uppercase;
  margin-bottom: 0px;
  line-height: 1;
}

.title__block h3 {
  font-size: var(--text-lg);
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-sm);
}

.title__block p {
  font-size: var(--text-md);
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-extralight);
}

.title__text {
  margin-left: 40px;
}

.title__block p.title__subtitle {
  font-family: var(--font-family-tertiary);
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.title__description {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-extralight);
  font-size: var(--text-md);
  margin-top: 0;
}

/*___________________*/

.paragraph__block {
  margin-bottom: var(--space-lg);
  
}

.paragraph__block h3 {
  font-family: var(--font-family-main);
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-regular);
}

.paragraph__block p,
.paragraph__block ul {
  font-size: var(--text-md);
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-extralight);
  line-height: 1.6;
  list-style-position: inside;
}

.paragraph_result {
  margin-top: var(--space-md);
}

@media (max-width: 899px) {
  .section-parcours .paragraph__block {
  margin-bottom: var(--space-xl);
}

}
/*___________________*/

.infos {
  font-family: var(--font-family-main);
  margin-bottom: var(--space-md);
}

.infos h4 {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-xs);
}

.infos p,
.infos ul {
  font-size: var(--text-md);
  font-weight: var(--font-weight-extralight);
  list-style: none;
}

.infos li {
  margin-bottom: var(--space-xxs);
}

/*BLOCKS TEXT COLOR*/
.text--white {
  color: white;
}

.text--blue {
  color: var(--primary-color);
}

.text--black {
  color: var(--text-color);
}

/*CARDS*/

.card-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}

@media (max-width: 899px) {

.card-group {
  gap: var(--space-xl);
  ;
}

}

.card__number {
  font-size: var(--text-xl);
  font-family: var(--font-family-secondary);
  color: var(--focus-color);
  font-weight: var(--font-weight-semibold);
  margin-right: var(--space-lg);
}

.card__text {
  display: flex;
  min-width: 300px;
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--primary-color);
}

#about .card__text {
  padding: var(--space-sm) var(--space-lg);
}

#pain-points .card__text {
  padding: var(--space-sm) var(--space-lg);
}

.section-dark .card__text {
  border-left: 2px solid white;
}

.card__text h3 {
  font-family: var(--font-family-secondary);
  font-size: var(--text-lg);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-lg);
}

.card__text ul,
.card__text p,
.card__image ul,
.card__image h4 {
  font-size: var(--text-lg);
  list-style: none;
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-light);
}

.card__image li,
.card__text li {
  margin-bottom: var(--space-xs);
}

#pain-points .card__text p,
#values .card__text p {
  font-size: var(--text-md);
  font-weight: var(--font-weight-extralight);
  line-height: 1.6;
}

/*---------------------*/

.card__text__sub {
  display: flex;
  min-width: 300px;
  padding: var(--space-md) var(--space-sm);
  border-left: 2px solid var(--primary-color);
  margin-bottom: var(--space-lg);
}

.card__text__sub p{
  font-size: var(--text-lg);
  list-style: none;
  margin-left: var(--space-xxl) ;
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-light);
}


/*---------------------*/

.card__image {
  display: flex;
  border-top: 2px solid white;
  padding: var(--space-md) 0;
  justify-content: space-between;
}

.section-light .card__image {
  border-top: 2px solid var(--background-dark);
}

.card__image--text {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0 var(--space-sm);
}

.card__image h4 {
  text-align: right;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-xs);
}

.card__image ul {
  font-weight: var(--font-weight-extralight);
}

.card__image img {
  width: 330px;
  height: auto;
}

@media (max-width: 899px) {
  .card__image,
  .card__image--text {
    display: flex;
    flex-direction: column;
  }

  .card__image h4 {
    text-align: left;
  }

  .card__image--text {
    gap: 20px;
    margin: var(--space-sm) 0;
  }

  .card__image img {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-xl);
  }
}

/*_________*/

.card__social {
  border-left: 2px solid var(--primary-color);
  padding: 30px 60px;
}

@media (max-width: 768px) {
  .card__social {
    border-top: 2px solid var(--primary-color);
    border-left: 0;
    display: flex;
    padding: 30px 0;
  }
}

.social__icon {
  width: 30px;
  height: 30px;
  margin-right: 30px;
}

.card__social h4,
.card__contact h4 {
  color: var(--primary-color);
  font-family: var(--font-family-main);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

.card__contact {
  border-top: 2px solid var(--primary-color);
  padding: 20px 0px;
  display: flex;
  align-items: center;
}

.card__contact-noborder {
  border: none;
}

/*_________*/

.card__metrics {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--primary-color);
}

.section-dark .card__metrics {
  border-left: 2px solid white;
}

.card__metrics h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-medium);
}

.card__metrics p {
  font-size: var(--text-md);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-extralight);
}

@media (max-width: 899px) {
  .card__metrics {
  margin-bottom: var(--space-xl);
}
}

/*_________*/

.card__problematics {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 300px;
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  border-left: 2px solid var(--primary-color);
}

.section-dark .card__problematics {
  border-left: 2px solid white;
}

.card__problematics p {
  font-family: var(--font-family-main);
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-extralight);
}

.card__problematics span {
font-weight: var(--font-weight-medium);
}

/*IMAGES*/

.half--left {
  width: 50%;
  height: 70vh;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: 3px solid var(--background-dark);
}

.half--right {
  width: 50%;
  height: 70vh;
  overflow: hidden;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  /*justify-content: center;*/
}

.half--right .half__image {
  margin-left: -20px;
}

#MockupDS .half--right,
#MockupDS .half--left {
  background-color: #131415;
}

.left--60 {
  width: 60%;
  height: 70vh;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: 3px solid var(--background-dark);
}

.section-light .left--60 {
  border-right: 3px solid var(--background-light);
}

.right--40 {
  width: 40%;
  height: 70vh;
  overflow: hidden;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.half__image {
  height: 100%;
  max-width: none;
  align-self: left;
  object-fit: cover;
}

.right--40 .half__image {
  align-self: right;
}

@media (max-width: 899px) {
  
  .left--60,
  .half--left {
    width: 100%;
    height: auto;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: var(--space-xl);
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: var(--background-light);
  }

  .half--right,
  .right--40{
  width: 100%;
  border-radius: 5px;
  height: 70vh;
  }

  .half--right .half__image,
  .right--40 .half__image{
  height: 70vh;
  width: auto
  }

.half__image {
  height: auto;
  width: 100%;
  max-width: none;
  align-self: left;
  object-fit: cover;
}

}

.background {
  position: relative;
  width: 100%;
  height: 100dvh;
  margin: 0;
  padding-top: 80px;
  overflow: hidden;
}

.background_aquilon {
  background-image: url('https://f.playcode.io/p-2346825/v-1/ec835c64-7fba-4a7d-9c05-b237ac322625/aquilon-image-presentation-background.png');
  background-size: cover;
  background-position: center;
background-repeat: no-repeat;
}

.background_andromeda {
  background-image: url('https://f.playcode.io/p-2346825/v-1/cb346aa9-b239-4bf3-b4f1-ae2b59c05fd3/andromeda-background.png');
  background-size: cover;
  background-position: center;
background-repeat: no-repeat;
}

.background_gexsi {
  background-image: url('https://f.playcode.io/p-2346825/v-1/947f41e3-5e02-4477-95c9-8b1ab8627ef7/gexsi-nomad-background-1.png');
  background-size: cover;
  background-position: center;
background-repeat: no-repeat;
}

.background_vamos{
  background-image: url('https://f.playcode.io/p-2346825/v-1/52802934-9cff-4f04-adab-eb7aaa07160b/vamos-background.png');
  background-size: cover;
  background-position: center;
background-repeat: no-repeat;
}

.background_auk{
  background-image: url('https://f.playcode.io/p-2346825/v-1/1a6222ad-427f-44b8-862c-045e3d8b6137/auk-background.png');
  background-size: cover;
  background-position: center;
background-repeat: no-repeat;
}


.relative {
  position: relative;
  width: 100%;
  height: 100%;
}

.absolute {
  position: absolute;
  height: 100%;
  width: 100%;
}

.grid-container img.project-img {
  position: absolute;
  height: 40%;
  width: 40%;
  border-radius: var(--space-sm);
}

.grid-container img.project-image {
  border-radius: var(--space-sm);
}

@media (max-width: 899px) {
 .grid-container img.project-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  
} 

}

.project-1 {
  top: 0%;
  right: 10%;
}

.project-2 {
  top: 0;
  left: 0;
}

.project-3 {
  bottom: 0;
  right: 0;
}

.project-4 {
  bottom: 0%;
  left: -20%;
}

.project-5 {
  top: 30%;
  left: 20%;
}

.project-6 {
  top: 50%;
  right: 20%;
}

.project-7 {
  top: 30%;
  left: 20%;
}

.image-wrap {
  width: 90%;
  height: 100%;
  overflow: hidden;
}

.image__presentation {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  width: 80%;
  max-width: 1100px;
  min-width: 600px;
}

.image-100 {
  width: 100%;
  height: 70vh;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--space-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-light);
}

.image-100w {
  width: 100%;
  height: auto;
  
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--space-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-light);
}

.section-light .image-100 {
  background-color: var(--background-dark);
}

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

#wireframes a.image-100 img {
  width: 100%;
  object-fit: cover;
}

.image-100 .image_long {
  height: auto;
  width: 100%;
  object-fit: cover;
}

.image_full {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.image_full_2 {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

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

@media (max-width: 899px) {
  .image_full img {
    height: 100%;
    object-fit: cover;
  }

  .image-100 img {
  width: 100%;
  height: auto;
}

.image-100 {
  height: auto;
  margin-bottom: var(--space-xl);
  border-radius: 5px;
}

}

.image-centered {
  background-color: var(--background-light); 
  border: 2px solid white;
  display: flex;
  justify-content: center; 
  align-items: flex-start; 
  border-radius: 10px; 
  margin-left: var(--space-lg);
  overflow: hidden;
}

.image-centered img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {

  .image-centered {
  height: 110%;
  border-radius: 5px; 
  margin-left: 0;
 
}

.image-centered img {
  width: auto;
  height: auto;
  display: block;
}


}

/*
@media (max-width: 768px) {
  .image__presentation{
  width:150%;
}
*/
/* FLEX UTILS */
.flex {
  display: flex;
  /*max-width: 100%;
  min-width: 100%;*/
}



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

.flex-between {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.flex-between-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (max-width: 899px) {
  .flex,
  .flex-between {
    flex-direction: column;
    gap: var(--space-md);
  }

  .flex-between-column {
  justify-content: center;
  gap: var(--space-md);
}
}

/*___________*/

.grid-container {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
  height: 100%;
}

#fine-process .grid-container {
  gap: 0;
}

#projects .grid-container {
  padding-top: var(--space-xl);
  gap: var(--space-lg);
  
} 

@media (max-width: 899px) {
  #projects .grid-cols-4 {
  grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 0.5fr 1fr 1fr 1fr;
  
} 


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

#pain-points .grid-container {
  
  padding-top: var(--space-xl);
  gap: var(--space-xxl);
  
} 

#about .grid-container {
  display: grid;
  gap: var(--space-xxl);
  width: 100%;
  height: 100%;
  
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-30-70 {
  display: grid;
  grid-template-columns:3fr 7fr;
  gap: var(--space-md);
}

.grid-20-80 {
  grid-template-columns: 20% 80%;
  height: 100%;
  gap: var(--space-md);
}

.grid-60-40 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-md);
}

.grid-60-40 > .flex-column {
  width: 100%;
  box-sizing: border-box;
}

.grid-40-60 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-md);
}

.grid-55-45 {
  display: grid;
  grid-template-columns: 11fr 9fr;
  gap: var(--space-lg);
}

.grid-55-45 > .flex-column {
  width: 100%;
  box-sizing: border-box;
}

.grid-img {
  width: 100%;
  overflow: hidden;
}

.grid-img img {
  width: 100%;
}

.grid-60-20-20 {
  display: grid;
  grid-template-columns: 60% 20% 20%;
  gap: var(--space-md);
}

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

.about {
  align-items: center;
}

.about img {
  height: 80vh;
  border-radius: var(--space-xs);
}

.about .paragraph__block {
  margin-left: var(--space-xl);
}

.about h3 {
  margin-bottom: var(--space-xl);
}

.about p {
  line-height: var(--space-xl);
}

@media (max-width: 899px) {
.about .paragraph__block {
  margin-left: 0;
}

.about img {
  height: 50vh;
  border-radius: var(--space-xs);
}

.about h3 {
  margin-bottom: var(--space-lg);
}

.about p {
  line-height: auto;
}
}

@media (max-width: 899px) {
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width: 899px) {
  .grid-60-40,
  .grid-60-20-20,
  .grid-55-45,
  .grid-40-60,
  .grid-20-80,
  .grid-30-70 
  {
    grid-template-columns: 1fr;
  
  }

  
  
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  #projects .grid-container {
  padding-top: 0;
  gap: var(--space-md);
} 

.element {
  grid-column: span 2;
  grid-row: span 0.3;
}
}

@media (max-width: 600px) {
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .grid-cols-2 {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
  }
}

/*_________*/

.container {
  display: flex;
  width: 100%;
  gap: var(--space-sm);
  margin-top: var(--space-xxl);
}

.img-wrapper {
  flex: 1;
  overflow: hidden;
  height: auto;
}

.img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 899px) {
  .container {
    flex-direction: column;
  }
}

/*_________*/

.padding-big {
  padding: var(--space-xl) 0;
}

.padding-left {
  padding-left: 20%;
}

@media (max-width: 899px) {
  .padding-left {
    padding-left: 0;
  }
}

/* DECORATION */

.line-left {
  border-left: 2px solid white;
  padding: 0 0 var(--space-xl) var(--space-xl);
}

@media (max-width: 899px) {
  .line-left {
    border-top: 2px solid white;
    border-left: 0;
    padding: var(--space-lg) 0 var(--space-lg) 0;
  }
}

/* PROCESS */

.process__diagram {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aquilon2 .process__diagram {
  background-color: white;
  padding: var(--space-xl);
  border-radius: 10px;
}

@media (max-width: 899px) {
  .aquilon2 .process__diagram {
  padding: var(--space-lg) var(--space-md);
  border-radius: 5px;
}

#process .grid-cols-3 {
 grid-template-columns: 1fr;
 grid-auto-rows: auto;
}
}

#process .grid-cols-3 {
 grid-template-columns: repeat(3, 1fr);
 grid-auto-rows: 9vh;
}

.process__diagram__step {
  background-image: repeating-linear-gradient(
    to right,
    transparent,
    transparent 10vw,
    #e1e1e1 10vw,
    #e1e1e1 10.1vw
  );
  display: flex;
  align-items: flex-start;
  border-bottom: 1px dashed var(--primary-color);
  padding: var(--space-md) 0;
}

.last__one {
  border-bottom: none;
}

.process__diagram__step__name {
  line-height: 16px;
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  color: var(--primary-color);
  opacity: 0.5;
}

.process__diagram__subssteps {
  background-size: cover;
  background-repeat: no-repeat;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;

  margin-left: 15px;
}

.process__diagram__subsstep {
  display: inline-block;
  width: auto;
  border-radius: 40px;
  font-family: var(--font-family-main);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-light);
  color: var(--primary-color);
  padding: 8px 30px;
}

.process__circle__subsstep {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  border-radius: 40px;
  font-family: var(--font-family-main);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-light);
  color: var(--primary-color);
  padding: 8px 30px;
  background-color: #adedff;
}

.process__circle__subsstep.subsstep__2,
.process__circle__subsstep.subsstep__5,
.process__circle__subsstep.subsstep__6 {
  justify-self: end;
}

.process__circle__subsstep.subsstep__1,
.process__circle__subsstep.subsstep__8{
  justify-self:center;
  width: 100%;
}

.substep__research {
  background-color: #adedff;
}

.substep__ideation {
  background-color: #9de0ff;
}

.substep__interface {
  background-color: #a3d4ff;
}

.substep__follow {
  background-color: #a3c2f8;
}

.subsstep__1 {
  margin-left: 5px;
}

.grid-cols-3 .subsstep__1,
.grid-cols-3 .subsstep__8 {
  grid-column: 2;
  margin-left: 0;
}

.subsstep__2 {
  margin-left: 5%;
}

.grid-cols-3 .subsstep__2,
.grid-cols-3 .subsstep__4,
.grid-cols-3 .subsstep__6{
  grid-column: 1;
  margin-left: 0;
}

.subsstep__3 {
  margin-left: 10%;
}

.grid-cols-3 .subsstep__3,
.grid-cols-3 .subsstep__5,
.grid-cols-3 .subsstep__7 {
  grid-column: 3;
  margin-left: 0;
}

.subsstep__4 {
  margin-left: 15%;
}

.subsstep__5 {
  margin-left: 20%;
}

.subsstep__6 {
  margin-left: 30%;
}

.subsstep__7 {
  margin-left: 35%;
}

.subsstep__8 {
  margin-left: 45%;
}

.subsstep__9 {
  margin-left: 60%;
}

.grid-container .arrow {
  width: 40px;
  height: 40px;
  object-fit: fill; 
  justify-self: end;
  align-self: self-end;
}



@media (max-width: 899px) {
  .process__diagram__step {
    display: flex;
    flex-direction: column;
  }

  .process__diagram__step h4 {
    margin-bottom: var(--space-md);
  }
}

/* MOBILE */

.hide-mobile {
  display: block;
}


@media (max-width: 899px) {
  .grid-mobile {
    display: grid;
    gap: var(--space-sm);
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .hide-mobile {
  display: none;
}
}

#section-contacts {
  padding-bottom: var(--space-xxxl);
}



@media (max-width: 899px){
  #section-contacts .flex {
    flex-direction: row;
  }

  #contacts-block{
  padding-top: var(--space-xxl);
}
}

@media (max-width: 769px){
  #section-contacts .flex {
    flex-direction: column;
  }
}

.site-footer {
  background-color: var(--primary-color);
  color: white;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  font-family: var(--font-family-main);
  padding: var(--space-xl) var(--space-xxl);
  border-top: 1px solid white;
}

.site-footer ul{
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  height: 25px;
}

.site-footer li{
  border-right: 1px solid white ;
  padding-right: var(--space-sm);
}

.site-footer h2{
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-md);
}

#footer-title p {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-light);
  font-size: var(--text-sm);
}

#footer-title{
  gap: var(--space-sm);
}

.site-footer .flex-column {
  gap: var(--space-md);
}

.site-footer .flex-column h3{
  font-size: var(--text-xs);
}

.site-footer .flex-column h4,
.site-footer li{
  font-size: var(--text-sm);
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-light);
  color: white;
}

.site-footer .card__contact{
  height: auto;
  border-top: none;
  padding: 0;
  display: flex;
  align-items: center;
}

.site-footer .social__icon{
  margin-right: var(--space-xs);
  
}

.footer-infos{
  display: flex;
  gap: var(--space-xl);
}

.footer-icon{
  border-right: 1px solid white;
  padding: 0 var(--space-sm);
  display: flex;
  align-items: center;
}

#footer-socials .flex .footer-icon:first-of-type {
  padding-left: 0;
}

#footer-contacts .flex a:first-child .footer-icon {
  padding-left: 0;
}

.footer__text{
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-thin);
  font-size: var(--text-xs);
}

#footer-contacts .icon-small{
  margin-right: var(--space-sm);
}

@media (max-width: 899px) {
  .site-footer {
    padding: var(--space-lg) var(--space-lg);
  }

  .footer-infos{
  flex-direction: column;
  gap: var(--space-md);
}

#footer-socials .flex{
  flex-direction: row;
}

.site-footer .flex-between {
  gap: var(--space-lg);
}

#footer-title{
  gap: var(--space-xs);
}

#footer-contacts .footer-icon {
  padding: 0;
  border: none;
}

.site-footer .flex-column {
  gap: var(--space-xs);
}

}



.space {
  margin-bottom: var(--space-xxxl);
}
.border-white {
  border: 1px solid white;
  border-radius: 11px;
}

.presentation_container {
  position: relative;
  width: 100%;
  height: 100%;
}

.presentation_main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.presentation_main img {
  height: 90%;
}





.presentation_secondary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

.presentation_secondary img {
  margin-right: 10vw;
  height: 120%;
}

.presentation_decor_left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: flex-end;
  z-index: 3;
  overflow: hidden;
}

.presentation_decor_left img,
.presentation_decor_right img {
  height: 40%;
}

.presentation_decor_right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: right;
  align-items: flex-start;
  z-index: 3;
  overflow: hidden;
}

.gexsi .presentation_main {
  position: absolute;
  bottom: -10vh;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex;
  z-index: 2;
}

.gexsi .presentation_main img {
  height: 100dvh;
  width: auto;
}

.gexsi .presentation_decor_right {
  top: 0;
  left: 0;
  align-items: flex-end;
}

.gexsi .presentation_decor_left {
  top: 0;
  left: 0;
  align-items: flex-start;
}

.gexsi .presentation_decor_left img {
  height: 70%;
}

.gexsi .presentation_decor_right img {
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: auto; /* ou 100%, selon le comportement souhaité */
  height: 90%;
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  z-index: 3;
  overflow: hidden;
}

.logo img {
  height: 10%;
  margin: var(--space-xl);
}

.andromeda .logo img {
  height: 3%;
  margin: var(--space-xl);
}

.middle_office .logo img {
  height: 20%;
  margin: var(--space-xl);
}

.middle_office .presentation_main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
}

.middle_office .presentation_main img {
  height: 100%;
}

.aquilon .presentation_main img {
  border-radius: 3px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 899px) {
  .logo img {
    margin: var(--space-sm);
    height: 7%;
  }

  .andromeda .logo img {
  height: 3%;
  margin: var(--space-lg);
}

  .presentation_main img {
     max-width: 90%;   
    max-height: 80%;  
    height: auto;
    width: auto;
  }

  .andromeda .presentation_main img{
  /*min-width: 170vw;*/
  max-width: 150%;   
    max-height: 80%;  
    height: auto;
    width: auto;
}
.andromeda .presentation_main{
justify-content: flex-start;
  align-items:flex-end;
  padding-bottom: 5vh;
}

  .presentation_decor_left img,
  .presentation_decor_right img {
    height: 30vw;
  }

  .presentation_secondary {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: none;
    justify-content: right;
    align-items: center;
    z-index: 1;
    overflow: hidden;
  }

  .presentation_secondary img {
    margin-right: 5vw;
    height: 100%;
  }

  .gexsi .presentation_decor_right,
  .gexsi .presentation_decor_left {
    display: none;
  }

  .background {
  height: 90vh;
  padding-top: 10vh;
}

.gexsi .presentation_main {
  position: absolute;
  bottom: -5vh;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex;
  z-index: 2;
}

.gexsi .presentation_main img {
  height: auto;
  width: 120vw;
}

.middle_office .logo img {
  height: 15%;
  margin: var(--space-sm);
}

.middle_office .presentation_main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
}

.middle_office .presentation_main img {
  max-width: 150%;   
    max-height: 100%;  
    height: auto;
    width: auto;
}

}

/*VIDEO*/

.scroll-video {
  width: 70%;
  height: auto;
  background-color: black;
}

.video {
  width: 100%;
  border-radius: var(--space-xs);
  border: 1px solid var(--primary-color);
}

.aquilon2 .video {
  width: 100%;
  border-radius: 5px;
  border: 1px solid var(--primary-color);

}

.gexsi .video {
  height: 102%;
}

.video-wrapper {
  height: 80vh;
  width: auto;
  border-radius: 40px;
  background-color: none;
  border: 1px solid var(--primary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.video-container {
  display: flex;
  flex-direction: column;
  background-color: none;

  
  overflow: hidden;
 /* align-items: center;*/
}

.mockup-mobile {
 height: 100%;
 max-height: 80vh;
 border: none;
 overflow: hidden;
}

.mockup-mobile .video{
height: 100%;
border: none;
}

@media (max-width: 899px) {
  .video-wrapper {
 
  height: auto;
  width: auto;
  height: 70vh;
  max-width: 90vw;
  
  border-radius: 4vh;
  background-color: none;
  border: 0px solid var(--primary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  
}

.gexsi .video {
  display: block;
  width: auto;
  height: 103%;
  border: none;
  margin-bottom: -2%;
  margin-top: -2%;
}

}
@media (max-width: 600px) {
  .video-wrapper {
 
  height: auto;
  width: auto;
  width: 70vh;
  
  
  border-radius: 4vh;
  background-color: none;
  border: 0px solid var(--primary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  
}

.gexsi .video {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  margin-bottom: -2%;
  margin-top: -2%;
}

}

/*SPAN*/

.highlight {
  font-family: var(--font-family-tertiary);
  color: var(--primary-color);
  font-size: var(--text-lg);
}

.title-highlight {
  font-family: var(--font-family-tertiary);
  color: var(--text-color);
  font-size: var(--text-lg);
  margin-top: var(--space-xl);
}

/*ANIMATION*/

.project-image {
  animation: floatMove 3s ease-in-out infinite;
  display: inline-block;
  transition: box-shadow 0.3s;
}

.animated-img-2 {
  animation: floatMove2 3s ease-in-out infinite;
  display: inline-block;
  transition: box-shadow 0.3s;
}

@keyframes floatMove {
  0%,
  100% {
    transform: translate(0, 0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  25% {
    transform: translate(-5px, -5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: translate(5px, -10px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
  }
  75% {
    transform: translate(-5px, -5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  }
}

@keyframes floatMove2 {
  0%,
  100% {
    transform: translate(0, 0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  25% {
    transform: translate(5px, 5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: translate(-5px, 10px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
  }
  75% {
    transform: translate(5px, 5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  }
}

.nav a {
  transition: all 0.3s ease;
}

.nav a:hover {
  transform: translateY(-4px);
   /*text-shadow: 0 0 6px rgba(32, 206, 250, 0.789);
  text-decoration: line-through;*/
}

@keyframes shake {
  0%   { transform: translate(0); }
  25%  { transform: translate(-2px, 0px); }
  50%  { transform: translate(2px, 0px); }
  75%  { transform: translate(-2px, 0px); }
  100% { transform: translate(0); }
}

.next:hover .next_icon{
  background-color: var(--primary-color-global);
  /*background-position: 16px ;*/
  background-size: 22px 22px;
  width: 40px;
}

.next:hover {
  border: 1px solid var(--primary-color-global); 
}

.card__image:hover {
  opacity: 0.9;
  transform: translateX(-20px);
  transition: all 0.3s ease;
}

.card__image {
  transition: all 0.3s ease;
}

.icon_download {
  background-image: url("data:image/svg+xml;utf8,<svg width='17' height='12' viewBox='0 0 17 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.5 10H15.5V2.5H17V11.5H0V2.5H1.5V10Z' fill='white'/><path d='M9.5 5H11.9639L8.5 8L5.03613 5H7.5V0H9.5V5Z' fill='white'/></svg>");
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: var(--space-sm);
}



.icon_behance {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #cd3308; /* couleur dynamique ici */

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M19.0273 8H23.0714C23.508 8 23.8623 8.35433 23.8623 8.79091C23.8623 9.22749 23.508 9.58182 23.0714 9.58182H19.0273C18.5907 9.58182 18.2364 9.22749 18.2364 8.79091C18.2364 8.35433 18.5907 8 19.0273 8ZM5.45515 8.60863H9.86076C12.4613 8.60863 14.013 9.88086 14.013 11.9515C14.013 13.3719 12.9624 14.6114 11.5878 14.8154V14.9822C13.3626 15.112 14.6526 16.4494 14.6526 18.1768C14.6541 20.5258 12.8798 22.0139 10.0183 22.0139H5.45515C4.65159 22.0139 4 21.3623 4 20.5588V10.0638C4 9.26022 4.65159 8.60863 5.45515 8.60863ZM6.80526 10.7527V14.1635H8.91229C10.4277 14.1651 11.2541 13.5415 11.2541 12.4643C11.2541 11.3966 10.4853 10.7527 9.14709 10.7527H6.80526ZM21.3413 11.5436C24.361 11.5436 26.1424 13.4679 26.1424 16.7185V17.5434H19.1138V17.6825C19.1502 19.2057 20.043 20.154 21.4556 20.154C22.5233 20.154 23.2562 19.7745 23.5441 19.0974H26.062C25.6539 21.0304 23.8871 22.2364 21.3784 22.2364C18.2574 22.2364 16.4197 20.266 16.4197 16.941C16.4197 13.6065 18.2947 11.5436 21.3413 11.5436ZM21.3537 13.6167C20.0993 13.6167 19.2148 14.4877 19.123 15.8164H23.4885C23.4315 14.4608 22.6159 13.6167 21.3537 13.6167ZM6.80526 16.0605V19.8698H9.30465C10.9213 19.8698 11.7948 19.1886 11.7948 17.9358C11.7948 16.7083 10.8928 16.0605 9.23977 16.0605H6.80526Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M19.0273 8H23.0714C23.508 8 23.8623 8.35433 23.8623 8.79091C23.8623 9.22749 23.508 9.58182 23.0714 9.58182H19.0273C18.5907 9.58182 18.2364 9.22749 18.2364 8.79091C18.2364 8.35433 18.5907 8 19.0273 8ZM5.45515 8.60863H9.86076C12.4613 8.60863 14.013 9.88086 14.013 11.9515C14.013 13.3719 12.9624 14.6114 11.5878 14.8154V14.9822C13.3626 15.112 14.6526 16.4494 14.6526 18.1768C14.6541 20.5258 12.8798 22.0139 10.0183 22.0139H5.45515C4.65159 22.0139 4 21.3623 4 20.5588V10.0638C4 9.26022 4.65159 8.60863 5.45515 8.60863ZM6.80526 10.7527V14.1635H8.91229C10.4277 14.1651 11.2541 13.5415 11.2541 12.4643C11.2541 11.3966 10.4853 10.7527 9.14709 10.7527H6.80526ZM21.3413 11.5436C24.361 11.5436 26.1424 13.4679 26.1424 16.7185V17.5434H19.1138V17.6825C19.1502 19.2057 20.043 20.154 21.4556 20.154C22.5233 20.154 23.2562 19.7745 23.5441 19.0974H26.062C25.6539 21.0304 23.8871 22.2364 21.3784 22.2364C18.2574 22.2364 16.4197 20.266 16.4197 16.941C16.4197 13.6065 18.2947 11.5436 21.3413 11.5436ZM21.3537 13.6167C20.0993 13.6167 19.2148 14.4877 19.123 15.8164H23.4885C23.4315 14.4608 22.6159 13.6167 21.3537 13.6167ZM6.80526 16.0605V19.8698H9.30465C10.9213 19.8698 11.7948 19.1886 11.7948 17.9358C11.7948 16.7083 10.8928 16.0605 9.23977 16.0605H6.80526Z"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.icon_dribbble {
  display: inline-block;
  width: 35px;
  height: 35px;
  background-color: #0fcd08; /* couleur dynamique ici */

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.64 6C9.86713 6 6 9.86994 6 14.6384C6 19.1712 9.49701 22.8918 13.9392 23.2488V23.28H14.64C19.4129 23.28 23.28 19.4101 23.28 14.6416C23.28 9.87342 19.4132 6 14.64 6ZM16.5492 21.6241C16.0071 21.772 15.4397 21.8584 14.8549 21.8755H14.64C13.6648 21.8755 12.7344 21.6823 11.8851 21.3322C12.7074 18.3692 14.9367 16.2469 17.4883 15.2985C17.9286 17.4325 17.609 19.7194 16.5492 21.6241ZM17.0997 13.9488C14.1875 14.9977 11.6442 17.3604 10.6222 20.6579C8.68084 19.3595 7.40166 17.1473 7.40166 14.6384C7.40166 13.7487 7.56236 12.8964 7.85634 12.1089C8.73263 12.5455 9.66963 12.8543 10.6332 13.0261C11.8607 13.2511 13.1183 13.2436 14.3422 13.023C15.0389 12.8972 15.719 12.6969 16.3711 12.4299C16.6614 12.9124 16.9055 13.4209 17.0997 13.9488ZM18.8393 14.9128C19.2601 16.8552 19.1325 18.9137 18.4609 20.7891C20.4535 19.5482 21.7987 17.366 21.8749 14.866C20.8844 14.6864 19.8519 14.7083 18.8393 14.9128ZM21.7775 13.4312C20.6806 13.2772 19.5525 13.3272 18.4506 13.5626C18.2336 12.9538 17.9596 12.3673 17.6333 11.8103C18.5386 11.2875 19.3654 10.6294 20.0761 9.86201C20.9453 10.8503 21.5495 12.0773 21.7775 13.4312ZM10.8809 11.6467C10.0438 11.4977 9.23071 11.229 8.47195 10.8498C9.12452 9.79017 10.0426 8.91125 11.1336 8.30596L11.142 8.30861L11.1423 8.30871L11.1423 8.30872L11.1424 8.30873C11.2612 8.34613 11.3747 8.38184 11.4839 8.42106C11.5242 8.43645 11.5637 8.45142 11.6023 8.46604L11.6029 8.46627L11.6029 8.46628L11.603 8.46629C11.7801 8.53347 11.9383 8.59346 12.0705 8.65473L12.1082 8.67358L12.1172 8.67776C12.2007 8.71658 12.3209 8.7739 12.4293 8.82558C12.4869 8.85306 12.5412 8.87893 12.5848 8.89956L12.5864 8.90045C12.6229 8.92002 12.6535 8.93647 12.682 8.95348C12.7052 8.96854 12.726 8.98075 12.7371 8.98725C12.7574 8.99916 12.7783 9.01093 12.7955 9.02052C12.8103 9.0287 12.8247 9.03666 12.8355 9.0426L12.841 9.0456L12.8525 9.05197L12.854 9.05281C12.87 9.06207 12.8895 9.07319 12.9118 9.08588C12.9594 9.11307 13.0196 9.14744 13.0858 9.18616C13.1324 9.21349 13.1761 9.23954 13.2116 9.2616C13.2381 9.27803 13.2525 9.28757 13.2579 9.29119L13.2583 9.29141C13.2605 9.2929 13.261 9.29325 13.2601 9.29256L13.2909 9.31584L13.325 9.33612C13.377 9.36701 13.4283 9.40251 13.4923 9.44679L13.4924 9.44681L13.4924 9.44682L13.4927 9.44701C13.5219 9.46723 13.5538 9.48929 13.5896 9.51359L13.6139 9.53009L13.6346 9.54175C13.6346 9.54178 13.6349 9.54203 13.6357 9.54253C13.6361 9.54286 13.6368 9.54329 13.6376 9.54383C13.6431 9.54758 13.6566 9.55668 13.6802 9.57353C13.7164 9.59945 13.7601 9.63199 13.8082 9.66817L13.8652 9.7111C13.8945 9.73321 13.9242 9.75562 13.9494 9.77452C13.9828 9.79949 14.0236 9.82982 14.0605 9.85536C14.5983 10.2667 15.0899 10.7364 15.5276 11.2541C15.0619 11.4244 14.582 11.5556 14.0933 11.6438C13.0281 11.8359 11.94 11.8411 10.8845 11.6474L10.8827 11.647L10.8809 11.6467ZM14.64 7.40141C16.3014 7.40141 17.832 7.96176 19.0535 8.90345C18.4131 9.59637 17.6631 10.1865 16.8419 10.6483C16.2773 9.93068 15.6241 9.28459 14.8958 8.72984L14.8782 8.71644L14.86 8.70427L14.855 8.70081C14.8511 8.69806 14.8459 8.69436 14.8393 8.68953C14.8258 8.67976 14.8092 8.66743 14.7892 8.65247C14.7665 8.63551 14.7438 8.61836 14.7194 8.59993L14.7193 8.5999L14.7143 8.59612C14.6945 8.58117 14.6736 8.56535 14.6506 8.54811C14.601 8.5108 14.5466 8.47021 14.4966 8.43438C14.4616 8.40933 14.4114 8.37392 14.3601 8.34268L14.3276 8.32018L14.3274 8.32005L14.3274 8.32004C14.2607 8.27383 14.1606 8.2045 14.0695 8.14859C13.9844 8.08895 13.8695 8.021 13.7941 7.97689C13.7212 7.93419 13.6427 7.88936 13.5939 7.86153L13.5935 7.86132L13.5566 7.8402C13.5476 7.83496 13.5398 7.8306 13.5366 7.82881L13.5366 7.8288L13.5364 7.8287L13.536 7.82846L13.517 7.81799L13.5106 7.81447C13.4998 7.80848 13.4889 7.80249 13.4776 7.79619C13.4646 7.78898 13.4541 7.78303 13.4465 7.77859L13.4412 7.7749L13.4226 7.76354C13.3553 7.7224 13.2852 7.68484 13.2471 7.66445L13.2463 7.66402L13.233 7.65691L13.2167 7.64815L13.2 7.64025C13.1666 7.62446 13.1171 7.60091 13.061 7.57415C13.5692 7.46106 14.0976 7.40141 14.64 7.40141Z" fill="black"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.64 6C9.86713 6 6 9.86994 6 14.6384C6 19.1712 9.49701 22.8918 13.9392 23.2488V23.28H14.64C19.4129 23.28 23.28 19.4101 23.28 14.6416C23.28 9.87342 19.4132 6 14.64 6ZM16.5492 21.6241C16.0071 21.772 15.4397 21.8584 14.8549 21.8755H14.64C13.6648 21.8755 12.7344 21.6823 11.8851 21.3322C12.7074 18.3692 14.9367 16.2469 17.4883 15.2985C17.9286 17.4325 17.609 19.7194 16.5492 21.6241ZM17.0997 13.9488C14.1875 14.9977 11.6442 17.3604 10.6222 20.6579C8.68084 19.3595 7.40166 17.1473 7.40166 14.6384C7.40166 13.7487 7.56236 12.8964 7.85634 12.1089C8.73263 12.5455 9.66963 12.8543 10.6332 13.0261C11.8607 13.2511 13.1183 13.2436 14.3422 13.023C15.0389 12.8972 15.719 12.6969 16.3711 12.4299C16.6614 12.9124 16.9055 13.4209 17.0997 13.9488ZM18.8393 14.9128C19.2601 16.8552 19.1325 18.9137 18.4609 20.7891C20.4535 19.5482 21.7987 17.366 21.8749 14.866C20.8844 14.6864 19.8519 14.7083 18.8393 14.9128ZM21.7775 13.4312C20.6806 13.2772 19.5525 13.3272 18.4506 13.5626C18.2336 12.9538 17.9596 12.3673 17.6333 11.8103C18.5386 11.2875 19.3654 10.6294 20.0761 9.86201C20.9453 10.8503 21.5495 12.0773 21.7775 13.4312ZM10.8809 11.6467C10.0438 11.4977 9.23071 11.229 8.47195 10.8498C9.12452 9.79017 10.0426 8.91125 11.1336 8.30596L11.142 8.30861L11.1423 8.30871L11.1423 8.30872L11.1424 8.30873C11.2612 8.34613 11.3747 8.38184 11.4839 8.42106C11.5242 8.43645 11.5637 8.45142 11.6023 8.46604L11.6029 8.46627L11.6029 8.46628L11.603 8.46629C11.7801 8.53347 11.9383 8.59346 12.0705 8.65473L12.1082 8.67358L12.1172 8.67776C12.2007 8.71658 12.3209 8.7739 12.4293 8.82558C12.4869 8.85306 12.5412 8.87893 12.5848 8.89956L12.5864 8.90045C12.6229 8.92002 12.6535 8.93647 12.682 8.95348C12.7052 8.96854 12.726 8.98075 12.7371 8.98725C12.7574 8.99916 12.7783 9.01093 12.7955 9.02052C12.8103 9.0287 12.8247 9.03666 12.8355 9.0426L12.841 9.0456L12.8525 9.05197L12.854 9.05281C12.87 9.06207 12.8895 9.07319 12.9118 9.08588C12.9594 9.11307 13.0196 9.14744 13.0858 9.18616C13.1324 9.21349 13.1761 9.23954 13.2116 9.2616C13.2381 9.27803 13.2525 9.28757 13.2579 9.29119L13.2583 9.29141C13.2605 9.2929 13.261 9.29325 13.2601 9.29256L13.2909 9.31584L13.325 9.33612C13.377 9.36701 13.4283 9.40251 13.4923 9.44679L13.4924 9.44681L13.4924 9.44682L13.4927 9.44701C13.5219 9.46723 13.5538 9.48929 13.5896 9.51359L13.6139 9.53009L13.6346 9.54175C13.6346 9.54178 13.6349 9.54203 13.6357 9.54253C13.6361 9.54286 13.6368 9.54329 13.6376 9.54383C13.6431 9.54758 13.6566 9.55668 13.6802 9.57353C13.7164 9.59945 13.7601 9.63199 13.8082 9.66817L13.8652 9.7111C13.8945 9.73321 13.9242 9.75562 13.9494 9.77452C13.9828 9.79949 14.0236 9.82982 14.0605 9.85536C14.5983 10.2667 15.0899 10.7364 15.5276 11.2541C15.0619 11.4244 14.582 11.5556 14.0933 11.6438C13.0281 11.8359 11.94 11.8411 10.8845 11.6474L10.8827 11.647L10.8809 11.6467ZM14.64 7.40141C16.3014 7.40141 17.832 7.96176 19.0535 8.90345C18.4131 9.59637 17.6631 10.1865 16.8419 10.6483C16.2773 9.93068 15.6241 9.28459 14.8958 8.72984L14.8782 8.71644L14.86 8.70427L14.855 8.70081C14.8511 8.69806 14.8459 8.69436 14.8393 8.68953C14.8258 8.67976 14.8092 8.66743 14.7892 8.65247C14.7665 8.63551 14.7438 8.61836 14.7194 8.59993L14.7193 8.5999L14.7143 8.59612C14.6945 8.58117 14.6736 8.56535 14.6506 8.54811C14.601 8.5108 14.5466 8.47021 14.4966 8.43438C14.4616 8.40933 14.4114 8.37392 14.3601 8.34268L14.3276 8.32018L14.3274 8.32005L14.3274 8.32004C14.2607 8.27383 14.1606 8.2045 14.0695 8.14859C13.9844 8.08895 13.8695 8.021 13.7941 7.97689C13.7212 7.93419 13.6427 7.88936 13.5939 7.86153L13.5935 7.86132L13.5566 7.8402C13.5476 7.83496 13.5398 7.8306 13.5366 7.82881L13.5366 7.8288L13.5364 7.8287L13.536 7.82846L13.517 7.81799L13.5106 7.81447C13.4998 7.80848 13.4889 7.80249 13.4776 7.79619C13.4646 7.78898 13.4541 7.78303 13.4465 7.77859L13.4412 7.7749L13.4226 7.76354C13.3553 7.7224 13.2852 7.68484 13.2471 7.66445L13.2463 7.66402L13.233 7.65691L13.2167 7.64815L13.2 7.64025C13.1666 7.62446 13.1171 7.60091 13.061 7.57415C13.5692 7.46106 14.0976 7.40141 14.64 7.40141Z" fill="black"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  
}

.icon_linkedin {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #0fcd08; /* couleur dynamique ici */

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M9.28308 24.0449H5.28615V11.3489H9.28308V24.0449ZM7.28185 9.5895C6.82846 9.58695 6.386 9.45015 6.01029 9.19637C5.63458 8.94259 5.34247 8.5832 5.17082 8.16356C4.99917 7.74392 4.95567 7.28284 5.04582 6.8385C5.13597 6.39416 5.35572 5.98649 5.67734 5.66692C5.99896 5.34736 6.40804 5.13023 6.85295 5.04294C7.29785 4.95564 7.75865 5.0021 8.17718 5.17644C8.59571 5.35078 8.95321 5.6452 9.20458 6.02253C9.45594 6.39986 9.5899 6.84319 9.58954 7.29658C9.59382 7.60012 9.53694 7.90142 9.42229 8.18252C9.30764 8.46361 9.13758 8.71875 8.92223 8.93271C8.70688 9.14668 8.45066 9.31511 8.16884 9.42795C7.88702 9.54079 7.58536 9.59573 7.28185 9.5895ZM24.0154 24.056H20.0203V17.12C20.0203 15.0744 19.1508 14.443 18.0283 14.443C16.8431 14.443 15.68 15.3366 15.68 17.1717V24.056H11.6831V11.3581H15.5268V13.1175H15.5785C15.9643 12.3366 17.3157 11.0018 19.3778 11.0018C21.608 11.0018 24.0172 12.3255 24.0172 16.2024L24.0154 24.056Z" fill="black"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M9.28308 24.0449H5.28615V11.3489H9.28308V24.0449ZM7.28185 9.5895C6.82846 9.58695 6.386 9.45015 6.01029 9.19637C5.63458 8.94259 5.34247 8.5832 5.17082 8.16356C4.99917 7.74392 4.95567 7.28284 5.04582 6.8385C5.13597 6.39416 5.35572 5.98649 5.67734 5.66692C5.99896 5.34736 6.40804 5.13023 6.85295 5.04294C7.29785 4.95564 7.75865 5.0021 8.17718 5.17644C8.59571 5.35078 8.95321 5.6452 9.20458 6.02253C9.45594 6.39986 9.5899 6.84319 9.58954 7.29658C9.59382 7.60012 9.53694 7.90142 9.42229 8.18252C9.30764 8.46361 9.13758 8.71875 8.92223 8.93271C8.70688 9.14668 8.45066 9.31511 8.16884 9.42795C7.88702 9.54079 7.58536 9.59573 7.28185 9.5895ZM24.0154 24.056H20.0203V17.12C20.0203 15.0744 19.1508 14.443 18.0283 14.443C16.8431 14.443 15.68 15.3366 15.68 17.1717V24.056H11.6831V11.3581H15.5268V13.1175H15.5785C15.9643 12.3366 17.3157 11.0018 19.3778 11.0018C21.608 11.0018 24.0172 12.3255 24.0172 16.2024L24.0154 24.056Z" fill="black"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  
}

.icon_whatsapp {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #0fcd08; /* couleur dynamique ici */

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M3.99998 25.7846L5.53126 20.1905C4.58635 18.553 4.08985 16.6968 4.09075 14.7934C4.09348 8.84254 8.93602 4 14.8859 4C17.7733 4.00091 20.4837 5.12554 22.5224 7.16603C24.5601 9.20652 25.682 11.9187 25.6811 14.8034C25.6784 20.7551 20.8359 25.5976 14.8859 25.5976C13.0796 25.5967 11.2996 25.1438 9.72298 24.2833L3.99998 25.7846ZM9.98803 22.329C11.5093 23.2322 12.9616 23.7732 14.8823 23.7741C19.8274 23.7741 23.8558 19.7494 23.8585 14.8015C23.8603 9.84372 19.851 5.82446 14.8896 5.82265C9.94083 5.82265 5.91522 9.84735 5.9134 14.7943C5.91249 16.8139 6.50431 18.3261 7.49823 19.9082L6.59145 23.2195L9.98803 22.329ZM20.3239 17.3694C20.2568 17.2568 20.077 17.1897 19.8065 17.0544C19.537 16.9192 18.2108 16.2666 17.963 16.1767C17.7161 16.0868 17.5364 16.0414 17.3558 16.3119C17.176 16.5815 16.6587 17.1897 16.5016 17.3694C16.3446 17.5491 16.1867 17.5718 15.9171 17.4366C15.6475 17.3013 14.7779 17.0172 13.7477 16.0977C12.9462 15.3825 12.4043 14.4993 12.2473 14.2288C12.0902 13.9592 12.2309 13.8131 12.3653 13.6787C12.4869 13.558 12.6349 13.3638 12.7701 13.2058C12.9072 13.0497 12.9516 12.9371 13.0424 12.7565C13.1323 12.5768 13.0878 12.4188 13.0197 12.2836C12.9516 12.1493 12.4125 10.8213 12.1883 10.2812C11.9686 9.75568 11.7462 9.82648 11.581 9.81831L11.0636 9.80923C10.8839 9.80923 10.5916 9.8764 10.3448 10.1469C10.0979 10.4174 9.40075 11.0691 9.40075 12.3971C9.40075 13.725 10.3674 15.0076 10.5018 15.1873C10.637 15.367 12.4034 18.0919 15.1092 19.2601C15.7528 19.5379 16.2556 19.704 16.6469 19.8283C17.2931 20.0335 17.8813 20.0044 18.3461 19.9354C18.8644 19.8583 19.9418 19.2828 20.1669 18.6529C20.392 18.022 20.392 17.482 20.3239 17.3694Z" fill="black"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M3.99998 25.7846L5.53126 20.1905C4.58635 18.553 4.08985 16.6968 4.09075 14.7934C4.09348 8.84254 8.93602 4 14.8859 4C17.7733 4.00091 20.4837 5.12554 22.5224 7.16603C24.5601 9.20652 25.682 11.9187 25.6811 14.8034C25.6784 20.7551 20.8359 25.5976 14.8859 25.5976C13.0796 25.5967 11.2996 25.1438 9.72298 24.2833L3.99998 25.7846ZM9.98803 22.329C11.5093 23.2322 12.9616 23.7732 14.8823 23.7741C19.8274 23.7741 23.8558 19.7494 23.8585 14.8015C23.8603 9.84372 19.851 5.82446 14.8896 5.82265C9.94083 5.82265 5.91522 9.84735 5.9134 14.7943C5.91249 16.8139 6.50431 18.3261 7.49823 19.9082L6.59145 23.2195L9.98803 22.329ZM20.3239 17.3694C20.2568 17.2568 20.077 17.1897 19.8065 17.0544C19.537 16.9192 18.2108 16.2666 17.963 16.1767C17.7161 16.0868 17.5364 16.0414 17.3558 16.3119C17.176 16.5815 16.6587 17.1897 16.5016 17.3694C16.3446 17.5491 16.1867 17.5718 15.9171 17.4366C15.6475 17.3013 14.7779 17.0172 13.7477 16.0977C12.9462 15.3825 12.4043 14.4993 12.2473 14.2288C12.0902 13.9592 12.2309 13.8131 12.3653 13.6787C12.4869 13.558 12.6349 13.3638 12.7701 13.2058C12.9072 13.0497 12.9516 12.9371 13.0424 12.7565C13.1323 12.5768 13.0878 12.4188 13.0197 12.2836C12.9516 12.1493 12.4125 10.8213 12.1883 10.2812C11.9686 9.75568 11.7462 9.82648 11.581 9.81831L11.0636 9.80923C10.8839 9.80923 10.5916 9.8764 10.3448 10.1469C10.0979 10.4174 9.40075 11.0691 9.40075 12.3971C9.40075 13.725 10.3674 15.0076 10.5018 15.1873C10.637 15.367 12.4034 18.0919 15.1092 19.2601C15.7528 19.5379 16.2556 19.704 16.6469 19.8283C17.2931 20.0335 17.8813 20.0044 18.3461 19.9354C18.8644 19.8583 19.9418 19.2828 20.1669 18.6529C20.392 18.022 20.392 17.482 20.3239 17.3694Z" fill="black"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  
}

.icon_mail {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #0fcd08; /* couleur dynamique ici */

  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M25 9C25 7.9 24.1 7 23 7H7C5.9 7 5 7.9 5 9V21C5 22.1 5.9 23 7 23H23C24.1 23 25 22.1 25 21V9ZM23 9L15 13.99L7 9H23ZM23 21H7V11L15 16L23 11V21Z" fill="black"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M25 9C25 7.9 24.1 7 23 7H7C5.9 7 5 7.9 5 9V21C5 22.1 5.9 23 7 23H23C24.1 23 25 22.1 25 21V9ZM23 9L15 13.99L7 9H23ZM23 21H7V11L15 16L23 11V21Z" fill="black"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  
}

.icon_white{
  background-color: white;
}

.icon-small {
  width: 25px;
  height: 25px;
}


.notice {
  color: white;
  font-family: var(--font-family-tertiary);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-thin);
  height: 20vh;
  display: flex;
  align-items: center;
}

.next {
  background-color: white;
  border: 1px solid var(--background-dark); 
  box-shadow: 0 0 0 1px var(--background-light);
  border-radius: 5px;
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-xxl);
  width: auto;
  display: flex;
  overflow: hidden;
  z-index: 10;
}

.next img {
  width: 100px;
  margin-right: var(--space-lg);
  padding: var(--space-xxs);
}

.next_text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--primary-color);
  padding: var(--space-xxs);
  margin-right: var(--space-md);
  font-family: var(--font-family-main);
  font-size: var(--text-sm);
}

.next_text_title{
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

.next_icon{
  background-color: var(--primary-color);
 background-image: url("data:image/svg+xml,%3Csvg width='17' height='23' viewBox='0 0 17 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 2L14.7233 10.6635C15.3259 11.0584 15.3259 11.9416 14.7233 12.3365L1.5 21' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  width: 40px;
}

@media (max-width: 899px) {
  .next {
  background-color: white;
  border: 0px solid var(--background-dark); 
  box-shadow: 0 0 0 1px var(--background-light);
  border-radius: 0px;
  bottom:0;
  right: 0;
  width: 100%;
  justify-content: space-between;
}

.next img {
  height: 10vh;
  width: auto;
  margin-right: var(--space-lg);
  padding: var(--space-xxs);
}
}

 .about-image{
  max-height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.about-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  color: white;
  font-family: var(--font-family-tertiary);
  font-size: var(--text-xxl);
  height: 100%;
}

.about-intro p:nth-of-type(2) {
  margin-left: var(--space-md);
  font-size: var(--text-xxxl);
}
/*
.about-image img{
  width: auto;
  height: 100%;
  margin-right: var(--space-xl);
}*/

@media (max-width: 899px) {
 .about-image{
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.about-image img {
  min-width: 500px;
 /* max-width: 650px;*/
  display: flex;
  flex-direction: column;
  align-self: center;
}
 
#about .section-intro {
    padding: 15vh 0 var(--space-lg) 0;
  }

.about-intro {
padding: 0 var(--space-lg);
}

}




a[data-pswp-width] {
  pointer-events: none;
}

@media (max-width: 768px) {
  a[data-pswp-width] {
    pointer-events: auto;
  }
}

.pswp__counter,
.pswp__arrowNext,
.pswp__arrowPrev {
  display: none;
}

/*BUTTONS*/

.toggleBtn{
  
  padding: 16px 16px;
  width: 100%;
  border: none;
  background: none;
  font-family: var(--font-family-main);
  display: flex;
  align-items: center;
  font-size: var(--text-md);
  color: white;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s;
}

/*GRAPHIC*/

.graphic {
 background-color: white;
 width: 100%;
 border-radius: 10px;
 padding: var(--space-lg);
}

.graphic h3 {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-md);
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
}
@media (max-width: 768px) {
  .graphic {
    display: flex;
 flex-direction: column;
 align-items: center;
}
  
}

.graphic-step {
  height: 100px;
  display: flex;
  width: 100%;
  align-items: center;
  padding: var(--space-md);
  
  
}

.graphic-step p {
  padding: var(--space-md);
  font-family: var(--font-family-main);
  font-size: var(--text-md);
  color: var(--primary-color);
  font-weight: var(--font-weight-regular);
}

.graphic-step span,
.graphic-step-sub span {
  font-family: var(--font-family-main);
  font-size: var(--text-sm);
  color: var(--focus-color);
  font-weight: var(--font-weight-medium);
}

.arrow-line {
  width: 2px; 
  flex-shrink: 0;
  align-self: stretch;          
  background: var(--primary-color);     
  position: relative;
}

.arrow-line::after {
  content: "";
  position: absolute;
  bottom: 0;                   
  left: 50%;
  transform: translateX(-50%);
  border-top: 12px solid var(--primary-color);   
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.graphic-step-sub {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  
  height: 100px;
}

.graphic-step-sub p {
  padding: var(--space-md);
  font-family: var(--font-family-main);
  font-size: var(--text-sm);
  color: var(--primary-color);
  font-weight: var(--font-weight-regular);
}

.arrow-line-dotted{
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--primary-color) 0,
    var(--primary-color) 4px,
    transparent 2px,
    transparent 8px
  );
  flex-shrink: 0;
  align-self: stretch;
  position: relative;   
  
}

.arrow-line-dotted::after {
  content: "";
  position: absolute;
  bottom: 0;                   
  left: 50%;
  transform: translateX(-50%);
  border-top: 12px solid var(--primary-color);   
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  z-index: 2;
}

.arrow-line-dotted::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;                 
  height: 12px;               
  background: white;          
  z-index: 1;                 
}

/*QUOTE*/

.quote-background {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 10px;
  width: 100%;
  padding: var(--space-xxl) 0 var(--space-xxl) var(--space-xl);
}

@media (max-width: 768px) {
  .quote-background {
    display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--space-xl);
 
}
}

.card__quote {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--primary-color);
  ;
 
}



.card__quote h3 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-medium);
  color: var(--focus-color);
}

.card__quote  p {
  font-size: var(--text-md);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-extralight);
  color: var(--primary-color);
}


.button__icon--arrow {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2718%27%20height%3D%2716%27%20viewBox%3D%270%200%2018%2016%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Crect%20y%3D%227.22168%22%20width%3D%2216%22%20height%3D%222%22%20fill%3D%22%23EE6C46%22%2F%3E%3Crect%20x%3D%229.77817%22%20y%3D%2215.7778%22%20width%3D%222%22%20height%3D%2211%22%20transform%3D%22rotate(-135%209.77817%2015.7778)%22%20fill%3D%22%23EE6C46%22%2F%3E%3Crect%20x%3D%2217.5563%22%20y%3D%227.99951%22%20width%3D%222%22%20height%3D%2211%22%20transform%3D%22rotate(135%2017.5563%207.99951)%22%20fill%3D%22%23EE6C46%22%2F%3E%3C%2Fsvg%3E");
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: var(--space-sm);
  transition: transform 0.3s ease;
}

.toggleBtn.active .button__icon--arrow {
  transform: rotate(180deg);
}