@font-face {
  font-family: "RobertBold";
  src: url("../font/roobert-font-family-1739094187-0/RoobertTRIAL-SemiBold-BF67243fd54213d.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "RoxboroughCF";
  src: url("../font/Rox/Roxborough\ CF.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "RobertRegular";
  src: url("../font/roobert-font-family-1739094187-0/RoobertMonoTRIAL-Regular-BF67243fd29a433.otf")
    format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "ReviewMedium";
  src: url(../font/review-font-family-1762405635-0/Review-Medium-Trial-BF63f6d1052cbb4.otf)
    format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "ReviewLight";
  src: url(../font/review-font-family-1762405635-0/Review-Light-Trial-BF63f6d1043a304.otf)
    format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "RobertLight";
  src: url("../font/roobert-font-family-1739094187-0/RoobertMonoTRIAL-Light-BF67243fd27eae5.otf")
    format("opentype");
  font-weight: 200;
  font-style: normal;
}
/* * { outline: 1px solid rgba(255,0,0,.35); }
html, body { overflow-x: hidden; } */

/* =========================
   VARIABLES
========================= */
:root {
  --c-light: #f6f5ee;
  --c-bg: #f9f8f3;
  --c-dark: #141414;
  --c-text: #383838;
  --c-grey-l: #cecece;
  --c-grey-d: #8e8e8e;

  --c-green: #008573;
  --c-brown: #7e5928;
  --c-salmon: #ca8770;
  --c-black: #1c1c1c;

  --ff-sans: "RobertLight", sans-serif;
  --ff-sans-bold: "RobertBold", sans-serif;
  --ff-serif: "RoxboroughCF", serif;
  --ff-title: "ReviewMedium", serif;

  --page-pad: clamp(16px, 4vw, 100px);

  --h2-size: 56px;
  --h1-size: 72px;
  --title-size: 48px;

  --underline-thickness: 1px;
  --underline-offset: 10px;

  --radius: 12px;
  --radius-lg: 20px;

  --gap-sm: 20px;
  --gap-md: 40px;
  --gap-lg: 60px;

  --section-mt: 100px;
}

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

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}
video {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe {
  max-width: 100%;
}

/* =========================
   BASE
========================= */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  background: var(--c-bg);
  color: var(--c-text);

  overflow-x: hidden;
  overflow-y: auto;
}

/* =========================
   NAV
========================= */
#nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 100%;
  padding: 20px;

  z-index: 1000;
  border-bottom: dotted 1px var(--c-grey-d);
}

.btn-close {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: normal;
  color: var(--c-dark);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
}

/* =========================
   COMMON TYPO
========================= */
.custom-title {
  font-family: var(--ff-title);
  font-weight: 400;
  font-size: var(--title-size);
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--c-black);
  margin-right: 20px;
  text-decoration: none;
}

.custom-font {
  font-size: var(--title-size);
  line-height: 1.2;
  font-family: var(--ff-serif);
  font-style: italic;
}

.header-text h1 {
  font-size: var(--h1-size);
  font-weight: bold;
  font-family: var(--ff-sans);
  white-space: nowrap;
}

.text-content p,
.text-content-2 p,
.text-right p,
.text-content-5 p,
.text-content-16 p,
.text-content-17 p,
.fastlouvre p,
.low-wireframe p,
.text-content-19 p,
.text-content-20 p,
.text-content-21 p,
.text-content-22 p,
.empathy-map p {
  font-family: var(--ff-sans);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -0.05em;
}

/* =========================
   COMMON H2 (underline style)
   - Light version: dark underline/text
   - Dark version: light underline/text
========================= */
.text-content h2,
.text-content-2 h2,
.content-3 h2,
.text-content-4 h2,
.text-content-5 h2,
.text-content-6 h2,
.pain-point-content h2,
.content-left h2,
.text-content-8 h2,
.text-content-9 h2,
.text-content-10 h2,
.text-content-11 h2,
.text-content-12 h2,
.text-content-14 h2,
.text-content-22 h2 {
  font-size: var(--h2-size);
  font-family: var(--ff-serif);
  font-style: italic;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

/* default (dark text) */
.text-content h2,
.text-content-4 h2,
.text-content-5 h2,
.text-content-6 h2,
.pain-point-content h2,
.content-left h2,
.text-content-9 h2,
.text-content-10 h2,
.text-content-11 h2,
.text-content-14 h2,
.text-content-22 h2 {
  color: var(--c-black);
  text-decoration-color: var(--c-black);
  font-weight: 400;
}

/* light-on-dark sections */
.text-content-2 h2,
.content-3 h2,
.text-content-8 h2,
.text-content-12 h2 {
  color: var(--c-bg);
  text-decoration-color: var(--c-bg);
}

/* slight weight variants you had */
.text-content-2 h2,
.text-content-8 h2,
.text-content-12 h2,
.text-content-9 h2,
.text-content-10 h2,
.text-content-11 h2,
.text-content-14 h2,
.text-content-22 h2 {
  font-weight: 600;
}

/* =========================
   LAYOUT HELPERS (grouped patterns)
========================= */

/* Most sections are column-centered with big top margin */
.content-2,
.content-4,
.content-5,
.content-6,
.content-8,
.content-9,
.content-10,
.content-11,
.content-14,
.content-15,
.content-19,
.content-21 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  margin-top: var(--section-mt);
  padding: 20px 0px;
}
.content-19,
.content-21 {
  padding: 0 40px;
}
/* image containers (centered) */
.image-container,
.image-container-2,
.image-container-6,
.image-container-10,
.image-container-11,
.image-container-12 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-container-4 img,
.image-container-6 img,
.image-container-7 img,
.image-container-8 img,
.image-container-11 img,
.image-container-12 img,
.image-container-13-1 img,
.image-container-13-2 img,
.image-container-19 img,
.image-container-21 img {
  width: 100%;
  max-width: 1000px;
  padding: 0 20px;
}
.image-container-10 img {
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: cover;
}
.image-container-13 img,
.image-container-14 img {
  width: 100%;
  max-width: 600px;
}

/* =========================
   CONTAINER / HEADER
========================= */
.container {
  width: 100%;
  margin: 100px 0;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  min-height: 100vh; /* safer than height: 100vh */
}

.header-text {
  width: 100%;
  padding: 20px 0;
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

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

.project-image {
  margin-top: 40px;
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   CONTENT 1
========================= */
.content-1 {
  width: 100%;
  padding: 100px 60px;
  gap: var(--gap-sm);

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

.text-content {
  max-width: 500px;
  text-align: left;
}

.text-content h2 {
  margin-bottom: 15px;
}

.project-image-1 {
  width: 100%;
  max-width: 500px;
}

/* =========================
   CONTENT 2 (green section)
========================= */
 .content-2{
  justify-content: center;
  text-align: center;
  padding: var(--page-pad);
  color: var(--c-bg);
  background-color: var(--c-green);
}

.text-content-2 {
  max-width: 1200px;
  text-align: center;
  margin-bottom: 100px;
}

.text-content-2 h2 {
  margin-bottom: 20px;
  padding: 40px;
}

.text-content-2 p {
  font-weight: 600;
}

.image-container-2 {
  max-width: 50%;
  margin: 100px 0;
}

.project-image-2 {
  width: 100%;
  max-width: 1000px;
}

/* =========================
   CONTENT 3 (dark section)
========================= */
.content-3 {
  width: 100%;
  background-color: var(--c-black);
  padding: 100px var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  align-items: center;
}

.content-3 h2 {
  margin-bottom: 30px;
}

.text-content-3 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-sm);
}

.text-content-3 p {
  font-family: var(--ff-sans-bold);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  color: #c5c5c5;
  margin-bottom: 10px;
}

.text-content-3 ul {
  font-family: var(--ff-sans);
  padding: 0;
  color: #c5c5c5;
}

.text-content-3 li {
  margin-bottom: 10px;
  color: #c5c5c5;
}

/* =========================
   CONTENT 4
========================= */
.content-4 {
  text-align: center;
  padding: 0 5%;
}

.text-content-4 h2 {
  margin-bottom: 40px;
  padding: 40px;
}

/* =========================
   CONTENT 5
========================= */


.text-content-5 h2 {
  margin-bottom: 35px;
}

.text-content-5 p {
  font-size: 16px;
  margin-bottom: 10px;
}

.image-container-5 {
  width: 100%;
  margin: 100px 0;
  gap: var(--gap-md);
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-image-5 {
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: var(--radius-lg);
}

/* info 5 */
.info-5 {
  width: 100%;
  padding: 0 5%;
  text-align: left;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.info-5 h3 {
  font-family: var(--ff-title);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.info-5 p {
  font-size: 16px;
  margin-bottom: 10px;
}

.info-5 a {
  font-family: var(--ff-title);
  font-size: 16px;
  line-height: 1.2;
  color: var(--c-green);
  text-decoration: none;
  font-style: italic;
  margin-bottom: 10px;
}

/* =========================
   CONTENT 6
========================= */
.content-6 {
  width: 100%;
}

.text-content-6 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-sm);
}

.text-content-6 h2 {
  margin-bottom: 15px;
}

.project-image-6 {
  width: 100%;
}

/* =========================
   PAIN POINTS
========================= */
.pain-point-content h2 {
  margin: 50px 0;
  text-align: center;
}

.pain-point {
  width: 100%;
  padding: 0 5%;
  gap: var(--gap-sm);

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: left;
}

.p-text {
  max-width: 300px;
  height: auto;
  min-height: 200px;
  padding: 20px;
  border-radius: var(--radius);

  background-color: var(--c-black);
  color: var(--c-bg);

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: var(--ff-sans);
  font-weight: 200;
}

/* =========================
   CONTENT 7 (two columns)
========================= */
.content-7 {
  width: 100%;
  margin-top: var(--section-mt);

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.content-left {
  width: 100%;
  padding-left: 250px;
  gap: var(--gap-lg);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.content-left h2 {
  margin: 50px 0 20px;
}

.text-content-left {
  width: 100%;
  gap: var(--gap-sm);
  font-family: var(--ff-sans);

  display: flex;
  flex-direction: column;
  text-align: left;
}

.text-content-7 ul li {
  font-family: var(--ff-sans);
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.content-right {
  width: 100%;
  padding: 0 150px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text-right {
  color: var(--c-black);
  padding: 40px;
  border-radius: var(--radius);
}

.text-right h2 {
  font-family: var(--ff-title);
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 10px;
}

/* =========================
   CONTENT 8 (bg + overlay)
========================= */
.content-8 {
  background-image: url("https://res.cloudinary.com/da9k32mdb/image/upload/v1747438737/bg1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px;
  position: relative;
}

.content-8::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(28, 28, 28, 0.5);
  z-index: 1;
}

.content-8 > * {
  position: relative;
  z-index: 2;
}

.text-content-8 {
  width: 100%;
  padding: 0 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.text-content-8 h2 {
  margin-bottom: 20px;
}

/* empathy map */
.empathy-map {
  width: 100%;
  color: var(--c-bg);
  gap: var(--gap-md);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.map-1,
.map-2 {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: row;
  gap: var(--gap-md);
}

.think,
.feel,
.say,
.do {
  border-radius: var(--radius);
  padding: 16px;
}

.think {
  background-color: var(--c-black);
}
.feel {
  background-color: var(--c-green);
}
.say {
  background-color: var(--c-brown);
}
.do {
  background-color: var(--c-salmon);
}

/* design elements */
.elements {
  width: 100%;
  padding: 0 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 40px;
}

.E1 {
  width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.E2 {
  width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.Typo,
.Color,
.UI-elements {
  width: 100%;
  max-width: 1000px;
}

/* =========================
   CONTENT 12 (dark section)
========================= */
.content-12 {
  width: 100%;
  background-color: var(--c-black);
  padding: 50px 0 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
}

.text-content-12 h2 {
  margin-top: 50px;
  margin-bottom: 20px;
}

/* =========================
   DESIGN PROTOTYPE
========================= */
.design-protype {
  width: 100%;
  padding: 20px 5%;
  background-color: var(--c-green);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.design-protype h2 {
  font-size: var(--h2-size);
  font-family: var(--ff-serif);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--c-bg);
}

.low-wireframe p {
  max-width: 800px;
  padding: 100px 5%;
  font-size: 16px;
  margin-bottom: 10px;
}

/* =========================
   IMAGE CONTAINERS 13*
========================= */
.image-container-13,
.image-container-13-1,
.image-container-13-2 {
  width: 100%;
  padding: 0 5%;
  margin-bottom: 100px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.image-container-13 h2,
.image-container-13-1 h2,
.image-container-13-2 h2 {
  font-family: var(--ff-title);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-black);
  margin-top: 50px;
}

.image-container-13 h2 {
  font-size: 42px;
  margin-bottom: 20px;
  font-style: italic;
}

.image-container-13-1 h2,
.image-container-13-2 h2 {
  font-size: 42px;
  margin-bottom: 50px;
}

.w1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--gap-md);
  align-items: center;

  font-family: var(--ff-sans);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -0.05em;
  font-size: 16px;
  margin-bottom: 10px;
}

.low-fidelity,
.high-fidelity {
  width: 90%;
  display: flex;
}

/* =========================
   CONTENT 14 (dark split)
========================= */
.image-container-14 {
  width: 100%;
  padding: 60px 20px;
  margin-bottom: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--gap-lg);

  background-color: var(--c-black);
}

.header-14 {
  max-width: 350px;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.05em;
  font-size: 36px;
  color: var(--c-bg);
}

.image-14 {
  font-family: var(--ff-title);
  line-height: 1.2;
  font-size: 28px;
  color: var(--c-bg);
}

/* =========================
   CONTENT 15
========================= */

.text-content-15 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.text-content-15 h2 {
  font-size: 48px;
  font-family: var(--ff-title);
  font-weight: 400;
  white-space: nowrap;
}

.text-content-15 img {
  width: 100%;
  max-width: 300px;
  padding-bottom: 50px;
  object-fit: cover;
}

/* =========================
   CONTENT 16 (dark row)
========================= */
.content-16 {
  width: 100%;
  margin-top: 100px;
  padding: 100px 20px;
  background-color: var(--c-black);
  color: var(--c-bg);

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.text-content-16, .text-content-20 {
  width: 100%;
  max-width: 500px;
  text-align: left;
}

.text-content-16 h2 {
  font-size: 48px;
  font-family: var(--ff-title);
  margin-bottom: 20px;
}

.image-container-16, .image-container-20 {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: cover;
}

.project-image-16, .project-image-20 {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
}

/* =========================
   CONTENT 17 (bg row)
========================= */
.content-17 {
  width: 100%;
  margin: 100px 0;
  padding: 0 20px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--gap-md);

  background-image: url("https://res.cloudinary.com/da9k32mdb/image/upload/v1747440933/Fond-2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.text-content-17 {
  max-width: 500px;
  text-align: left;
  margin-bottom: 250px;
}

.text-content-17 h2 {
  font-size: 48px;
  font-family: var(--ff-title);
  margin-bottom: 20px;
}

.image-container-17 {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: cover;
}

.project-image-17 {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
}

/* =========================
   CONTENT 18 (bg + overlay)
========================= */
.content-18 {
  width: 100%;
  margin: 100px 0;
  color: var(--c-bg);
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-md);

  background-image: url("https://res.cloudinary.com/da9k32mdb/image/upload/v1747438738/bg2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.content-18::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(3, 3, 3, 0.5);
  z-index: 1;
}

.content-18 > * {
  position: relative;
  z-index: 2;
}

.fastlouvre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.fastlouvre-1,
.fastlouvre-2 {
  width: 100%;
  gap: var(--gap-md);
  padding: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.fastlouvre-1 img,
.fastlouvre-2 img {
  max-width: 700px;
}
.fastlouvre-1 p,
.fastlouvre-2 p {
  max-width: 400px;
}

/* =========================
   CONTENT 19 / 20 / 21 / 22
========================= */

.text-content-19 h2,
.text-content-20 h2,
.text-content-21 h2 {
  font-size: 48px;
  font-family: var(--ff-title);
  margin-bottom: 20px;
}

.image-container-19 img,
.image-container-21 img {
  width: 100%;
  max-width: 800px;
  padding-bottom: 50px;
  object-fit: cover;
}
.text-content-19, .text-content-21, .text-content-5 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  padding: 0 var(--page-pad) !important ;
}
.content-20 {
  width: 100%;
  padding: 150px 40px;
  background-color: var(--c-black);
  color: var(--c-bg);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  text-align: center;
}

.text-content-20 {
  width: 100%;
  max-width: 500px;
  text-align: left;
}

.image-container-20, .image-container-16 {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.project-image-20,
.project-image-22 {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
}


.text-content-22 {
  width: 100%;
  text-align: center;
}

.text-content-22 h2 {
  font-size: 72px;
  margin-bottom: 20px;
}

.text-content-22 iframe {
  width: 100%;
  max-width: 1200px;
  height: auto;
  min-height: 800px;
  border: none;
  border-radius: var(--radius);
  margin-top: 60px;
}

.image-container-22 {
  width: 50%;
}

/* Footer Copyright */
.footer {
  margin-top: 20px;
  font-size: 14px;
  padding-top: 10px;
  padding: 20px 60px;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center; /* Ensures spacing between text & button */
  align-items: center;
  width: 100%;
  position: relative;
}

/* Back-to-Top Button */
.back-to-top {
  position: absolute;
  right: 30px; /* Position it on the right side of the footer */
  bottom: 10px;
}

.back-to-top a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  gap: 5px; /* Space between icon and text */
  text-decoration: none;
}

/* Icon */
.back-to-top svg {
  width: 24px;
  height: 24px;
  fill: black; /* Default color */
  transition: fill 0.3s ease-in-out;
}

/* Text */
.back-to-top-text {
  font-size: 14px;
  font-weight: bold;
  color: black;
  transition: color 0.3s ease-in-out;
}

/* Hover Effect */
.back-to-top:hover svg {
  fill: #666; /* Change icon color on hover */
}

.back-to-top:hover .back-to-top-text {
  color: #666; /* Change text color on hover */
}
/* Base Styles for Links */
p a {
  position: relative;
  text-decoration: none;
  color: black; /* Default text color */
  font-weight: bold;
  transition: color 0.3s ease-in-out; /* Smooth color transition */
}

/* Underline Effect */
p a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Position the underline below text */
  width: 100%;
  height: 2px; /* Thickness of the underline */
  background-color: black; /* Color of the underline */
  transform: scaleX(0); /* Start with no width */
  transform-origin: left;
  transition: transform 0.3s ease-in-out; /* Smooth transition */
}

/* Hover Effect - Underline Appears */
p a:hover::after {
  transform: scaleX(1); /* Expand the underline */
}

/* Hover Effect - Change Text Color */
p a:hover {
  color: #666; /* Change text color on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
  html {
    width: 100%;
    overflow-x: hidden;
  }
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: auto;
    cursor: pointer;
  }

  /* ===== HEADER ===== */
  .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
  }
  .header-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .header-text h1 {
    font-size: 72px;
    font-weight: bold;
    font-family: "RobertLight", sans-serif;
    white-space: nowrap;
  }

  .custom-title {
    font-weight: 200;
    font-size: 36px;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-text);
    font-family: "ReviewMedium", serif;
    display: flex;
    width: 100%;
    max-width: 400px;
    padding: 0;
    margin-bottom: 20px;
  }

  .custom-font {
    font-size: 42px;
    line-height: 1.2;
    font-family: "RoxboroughCF", serif;
    font-style: italic;
  }
  .text-content h2,
  .text-content-2 h2,
  .content-3 h2,
  .text-content-3 h2,
  .text-content-4 h2,
  .text-content-5 h2,
  .text-content-6 h2,
  .pain-point-content h2,
  .text-content-left h2,
  .text-content-8 h2,
  .text-content-9 h2,
  .text-content-10 h2,
  .text-content-11 h2,
  .text-content-12 h2,
  .text-content-13 h2,
  .text-content-14 h2,
  .text-content-16 h2,
  .text-content-17 h2,
  .text-content-17 h2,
  .text-content-19 h2,
  .text-content-20 h2,
  .text-content-21 h2,
  .text-content-22 h2 {
    font-size: 36px;
    line-height: 1.2;
    margin: 0;
    padding: 20px 0;
  }
  .text-content-15 h2 {
    font-family: "ReviewMedium", serif;
    font-size: 32px;
    line-height: 1.2;
    margin: 0;
    padding: 20px 0;
  }
  .text-content-15 .custom-font {
    font-size: 32px;
  }
  .text-content p,
  .text-content-2 p,
  .text-content-4 p,
  .text-content-5 p,
  .text-content-6 p,
  .pain-point-content p,
  .text-content-left p,
  .text-content-8 p,
  .text-content-9 p,
  .text-content-10 p,
  .text-content-11 p,
  .text-content-12 p,
  .text-content-13 p,
  .text-content-14 p,
  .text-content-15 p,
  .text-content-16 p,
  .text-content-17 p,
  .text-content-19 p,
  .text-content-21 p,
  .text-content-22 p,
  .w1 p,
  .w2 p {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 20px;
    max-width: 400px;
    width: 100%;
    text-align: left;
    font-family: "RobertLight", sans-serif;
  }
  .text-content-3 p {
    font-family: "RobertBold", sans-serif;
  }
  /* === MAIN STRUCTURE === */
  .main-content,
  .content-1,
  .content-2,
  .content-3,
  .content-4,
  .content-5,
  .content-6,
  .content-7,
  .content-8,
  .content-10,
  .content-11,
  .content-12,
  .content-13,
  .content-14,
  .content-15,
  .content-16,
  .content-17,
  .content-18,
  .content-19,
  .content-20,
  .content-21,
  .content-22 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 20px;
    padding: var(--page-pad);
    margin: 20px 0;
  }
  /* ===== E1 & E2 ===== */
  .E1,
  .E2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: 20px;
    padding: 20px 16px;
    margin: 20px 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Si E1/E2 contiennent des images ou éléments avec width fixe */
  .E1 img,
  .E2 img,
  .E1 > *,
  .E2 > * {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }

  /* ===== IMAGES ===== */
  img {
    width: 100%;
    height: auto;
  }

  .image-container img,
  .image-container-4 img,
  .image-container-7 img,
  .image-container-8 img,
  .image-container-10 img,
  .image-container-13 img,
  .image-container-13-1 img,
  .image-container-13-2 img,
  .image-container-14 img,
  .image-container-19 img,
  .image-container-21 img,
  .content-18 img {
    max-width: 700px;
    padding: 0 20px;
  }
  .header-image {
    display: none;
  }

  .text-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
  }

  .image-container, .image-container-17 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text-content-3 {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
    justify-content: space-between;
    color: var(--color-light);
    width: 100%;
    max-width: 400px;
    padding-left: 80px;
  }

  .text-content-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  .image-container-5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 0 20px;
  }
  .project-image-5 {
    max-width: 650px;
    width: 100%;
    height: auto;
  }

  .info-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    justify-content: center;
  }
  .info-5 h3 {
    font-size: 20px;
    text-align: center;
    font-family: "ReviewMedium", serif;
  }
  .info-5 p {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin: 20px;
    max-width: 400px;
    width: 100%;
    text-align: left;
    font-family: "RobertLight", sans-serif;
  }

  .image-container-6 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 0 20px;
  }
  .image-container-6 img {
    width: 100%;
    max-width: 800px;
    height: auto;
  }

  .pain-point-content {
    flex-direction: column;
  }
  .pain-point-content h2 {
    font-size: 36px;
  }
  .pain-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    justify-content: center;
    gap: 10px;
  }

  .image-container-7 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 0 20px;
  }
  .image-container-7 img {
    width: 100%;
    max-width: 450px;
    height: auto;
  }
  .content-left {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  .text-content-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
  .text-content-left h2 {
    font-size: 36px;
    padding: 20px;
    text-align: center;
  }

  .content-right {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  .text-content-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
  .text-right {
    width: 100%;
    max-width: 400px;
    padding: 0;
  }
  .text-content-right h2 {
    font-size: 18px;
    text-align: center;
  }
  .text-content-right p {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin: 20px;
    max-width: 400px;
    width: 100%;
    text-align: left;
    font-family: "RobertLight", sans-serif;
  }

  .image-container-8 img {
    width: 100%;
    max-width: 400px;
    height: auto;
  }
  .content-9 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 50px;
  }

  .map-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
  }
  .map-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
  }
  .content-10 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 50px;
  }

  .image-container-10 img {
    width: 100%;
    max-width: 450px;
    height: auto;
  }
  .elements {
    flex-direction: column;
    display: flex;
    align-items: center;
  }
  .elements img {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 20px 0;
  }
  .content-11 img {
    width: 100%;
    max-width: 450px;
    height: auto;
  }
  .content-12 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 50px;
  }
  .text-content-12 h2 {
    font-size: 36px;
    text-align: center;
  }
  .content-12 img {
    width: 100%;
    max-width: 400px;
    height: auto;
    padding-left: 20px;
  }
  .design-protype h2 {
    font-size: 36px;
    text-align: center;
  }

  .image-container-13 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 0 20px;
  }
  .image-container-13 h2 {
    font-size: 32px;
    text-align: center;
  }

  .w1,
  .w2 {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .w1 img {
    width: 100%;
    max-width: 450px;
    height: auto;
    margin: 20px 0;
  }

  .image-container-13-1,
  .image-container-13-2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 0 20px;
  }
  .image-container-13-1 img,
  .image-container-13-2 img {
    width: 100%;
    max-width: 450px;
    height: auto;
  }
  .image-container-13-1 h2,
  .image-container-13-2 h2 {
    font-size: 32px;
    text-align: center;
  }

  .image-container-14 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px;
  }
  .header-14 {
    font-size: 32px;
  }
  .text-content-19 {
    display: flex;
    justify-content: center;
  } 
  .text-content-16,
  .text-content-17,
  .text-content-20 {
    width: 100%;
    text-align: center;
    max-width: 450px;
    padding: 20px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .text-content-16 p,
  .text-content-17 p,
  .text-content-20 p {
    text-align: left;
    font-size: 16px;
  }

  .project-image-16 {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: cover; /* Ajuste l'image pour couvrir le conteneur */
  }
  .content-17 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 50px;
    padding: 0 20px;
    background-image: none;
  }

  .fastlouvre-1,
  .fastlouvre-2 {
    flex-direction: column;
    gap: 20px;
  }

  .content-18 img {
    width: 100%;
    max-width: 450px;
    height: auto;
  }
  .content-19 {
    display: flex;
    margin-top: 50px;
  }

  .text-content-22 {
    display: none;
    /* width: 100%;
    text-align: center; */
  }
  /* .text-content-22 iframe {
    width: 390px;
    height: 800px;
  } */
}