* {
  box-sizing: border-box;
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--white);
}

/* HEADER */

.header-desktop {
  display: flex;
  height: 3rem; /* Converted from 48px */
  align-items: flex-start;
  justify-content: space-around;
  padding: 0.75rem 2.30rem; /* Converted from 12px 36px */
  position: relative;
  align-self: center;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--white);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--neutral-400-primary);
  position: fixed;
  top: 0;
  z-index: 1000;
}

@media (max-width: 612px) {
  .header-desktop {
    display: none; /* Hide the entire header-desktop */
  }
}

.header-box-desktop {
  display: flex;
  width: 120vh;
  gap: 1.5rem; /* Converted from 24px */
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  background-color: var(--white);
}

.primary-button-dropdown-desktop {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background-color: transparent;
  border: none;
  color: var(--font-500-primary);
  font-size: var(--text-s-semibold-font-size);
  font-weight: var(--text-s-semibold-font-weight);
  font-family: "Open Sans";
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.primary-button-dropdown-desktop:hover {
  color: var(--font-400);
}

.primary-button-dropdown-desktop:active {
  color: var(--brand-400-primary);
  transform: scale(0.98);
}

/* Dropdown Container */
.dropdown-desktop {
  position: relative;
  display: inline-block;
}

.dropdown-content-desktop {
  display: none;
  position: absolute;
  background-color: var(--white);
  min-width: 12rem; /* Converted from 160px */
  z-index: 200;
  border-radius: 8px;
  top: 1.2rem; /* Converted from 19px */
  left: 0px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--neutral-300);
  margin-top: 1rem; /* Converted from 16px */ 
}

.dropdown-content-desktop a {
  color: var(--font-500-primary);
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: block;
  font-size: var(--text-s-semibold-font-size);
  font-weight: var(--text-s-semibold-font-weight);
  border-bottom: 1px solid var(--neutral-300);
  transition: all 0.2s ease-in-out;
}

.dropdown-content-desktop a:hover {
  color: var(--font-400);
}

.dropdown-content-desktop a:active {
  color: var(--brand-400-primary);
}

.dropdown-content-desktop.show {
  display: block;
}

.primary-button-desktop {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background-color: transparent;
  border: none;
  color: var(--font-500-primary);
  font-size: var(--text-s-semibold-font-size);
  font-weight: var(--text-s-semibold-font-weight);
  font-family: "Open Sans";
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}



.primary-button-desktop:hover {
  color: var(--font-400);
}

.primary-button-desktop:active {
  color: var(--brand-400-primary);
  transform: scale(0.98);
}

.primary-button-link-desktop {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background-color: transparent;
  border: none;
  color: var(--font-500-primary);
  font-size: var(--text-s-semibold-font-size);
  font-weight: var(--text-s-semibold-font-weight);
  font-family: "Open Sans";
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-bottom: 1px solid; 
  border-color: var(--font-400);
  padding-bottom: 0.2rem;
}

.primary-button-link-desktop:hover {
  color: var(--font-400);
}

.primary-button-link-desktop:active {
  color: var(--brand-400-primary);
  transform: scale(0.98);
  border-color: var(--brand-400-primary);
}

.header-box-log {
  display: flex;
  width: 20%;
  align-items: center;
  justify-content: center;
  position: relative;
}

.log-kristina {
  position: relative;
  height: 1.25rem; /* Converted from 20px */
  cursor: pointer;
}

/* MOBILE HEADER */
.header-mobile {
  display: none; /* Hide mobile header by default */
  height: 3rem; /* Same height as header-desktop */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white); /* Or your desired background color */
  z-index: 1000; /* Ensure it's above other content */
  padding: 0.75rem 2.30rem;
  box-sizing: border-box;
  background-color: var(--white);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--neutral-400-primary);
  position: fixed;
  top: 0;
  z-index: 1000;
}

.header-box-mobile {
  display: flex;
  width: 100vh;
  justify-content: space-between;
  gap: 1.5rem; /* Converted from 24px */
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  background-color: var(--white);
}

@media (max-width: 612px) {
    .header-desktop {
        display: none; /* Hide desktop header */
    }

    .header-mobile {
        display: flex; /* Show mobile header */
    }
}

/* Style the links within the burger menu */
.header-links a,
.header-links button {
  display: flex;
  padding: 1rem 1rem;
  color: var(--font-500-primary);
  border-bottom: 1px solid var(--neutral-200);
  transition: all 0.2s ease-in-out;
  text-align: center;
  width: 100%;
  cursor: pointer;
  align-items: center;
}

.header-links a:hover,
.header-links button:hover {
  color: var(--font-400);
  background-color: var(--neutral-100);
}

.header-links a:active,
.header-links button:active {
  color: var(--brand-400-primary);
}

.burger-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.burger-icon {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.burger-button:hover{
  background-color: var(--brand-400-primary);
  border-radius: 50%;
}

.burger-button:hover{
  background-color: var(--brand-400-primary);
  border-radius: 50%;
}

/* Style the burger menu content like the desktop dropdown */
#headerLinksMobile {
    display: none;
    position: absolute;
    top: 3rem;
    left: 0;
    width: 100%;
    background-color: var(--white);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    border-radius: 6px; /* Add border radius */
    overflow: hidden; /* Hide overflow */
}

#headerLinksMobile.show {
    display: flex;
}

#headerLinksMobile a,
#headerLinksMobile button {
  padding: 1rem 1rem;
  text-decoration: none;
  color: var(--font-500-primary);
  transition: all 0.2s ease-in-out;
  text-align: center; 
  width: 100%;
  cursor: pointer;
  font-size: var(--text-m-semibold-font-size);
  font-weight: var(--text-m-semibold-font-weight);
  display: flex;
  justify-content: center; 
  align-items: center; 
}

#headerLinksMobile a:hover,
#headerLinksMobile button:hover {
    color: var(--font-400);
    background-color: var(--neutral-100);
}

#headerLinksMobile a:active,
#headerLinksMobile button:active {
    color: var(--brand-400-primary);
}




/* Body Project */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 80%;
  flex: 0 0 auto;
  margin-top: 6rem; /* Converted from 96px */
  margin-left: 10%;
  margin-right: 10%;
}

@media (max-width: 612px) {
  .page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem; /* Converted from 96px */
  position: relative;
  align-self: stretch;
  width: 90%;
  flex: 0 0 auto;
  margin-top: 5rem; 
  margin-left: 5%; 
  margin-right: 5%; 
 }
}

.page .project-hero-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  position: relative;
  flex: 0 0 auto;
  Width: 100%;
}

.page .projec-title-box {
  display: flex;
  flex-direction: column;
  width: 60%;
  align-items: center;
  position: relative;
}

.page .projec-title-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 10px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--brand-400-primary);
}

.page .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--text-XS-semibold-font-weight);
  color: var(--font-500-primary);
  font-size: var(--text-XS-semibold-font-size);
}

.page .page-title {
  position: relative;
  width: fit-content;
  margin-bottom: -6.00px;
  font-weight: var(--heading-400-bold-font-weight);
  color: var(--font-500-primary);
  font-size: var(--heading-400-bold-font-size);

}

/* --- Simple dual hero images (left + right) --- */
.hero-project-design-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-400-primary);
  border-radius: 26px;
  padding: 2rem clamp(1rem, 4vw, 3rem);
  box-sizing: border-box;
  overflow: hidden; /* keep images inside */
  display: flex;
  justify-content: center;
  align-items: center;
}


.hero-project-design {
  position: relative;
  width: 100%;
  max-width: 1400px;
  min-height: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image-box {
 position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform, opacity;
  transition:  transform .75s cubic-bezier(.25,.6,.2,1), opacity .55s ease;
}

/* Center stays on top */
.hero-image-box.hero-center {
  z-index: 5;
  /* sit slightly higher so it “covers” the top edge of side images */
  transform: translateY(-8px) scale(1);
  opacity: 1;
}

/* Side images start hidden, a bit lower & smaller (tucked under) */
.hero-image-box.hero-left,
.hero-image-box.hero-right {
  z-index: 3;                /* under center */
  opacity: 0;
  /* lower & slightly back (smaller) so center overlaps */
  transform: translateY(32px) scale(.76);
  pointer-events: none;
}

/* Horizontal anchor edges so they peek out */
.hero-image-box.hero-left  { left: 20%; transform-origin: center; }
.hero-image-box.hero-right { right: 50%; transform-origin: center; }

/* Image sizing */
.hero-image {
  width: 10vw;
  max-width: 260px;
  aspect-ratio: 9/16;  
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--neutral-400-primary);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.18);
  transition: box-shadow .6s, width .6s cubic-bezier(.25,.6,.2,1);
}

/* Side images smaller (always use smaller width) */
.hero-image-box.hero-left  .hero-image,
.hero-image-box.hero-right .hero-image {
  width: 28vw;
  max-width: 220px;
  box-shadow: 0 8px 24px -16px rgba(0,0,0,.18);
}

/* HOVER: reveal sides under center; center stays large (no shrink now) */
.hero-project-design:hover .hero-left {
  opacity: 1;
  /* move left image leftwards & keep lower so center overlaps upper part */
  transform: translate(-38%, 28px) scale(.80);
  pointer-events: auto;
}
.hero-project-design:hover .hero-right {
  opacity: 1;
  transform: translate(38%, 28px) scale(.80);
  pointer-events: auto;
}

/* Optional slight lift & stronger shadow on side images when visible */
.hero-project-design:hover .hero-left .hero-image,
.hero-project-design:hover .hero-right .hero-image {
  box-shadow: 0 16px 36px -18px rgba(0,0,0,.24);
}

/* If you STILL want the center to shrink a little when revealing, uncomment:
.hero-project-design:hover .hero-center {
  transform: translateY(-4px) scale(.94);
}
*/

/* Mobile: just stack (no overlap complexity) */
@media (max-width: 980px) {
  .hero-project-design {
    flex-direction: column;
    min-height: auto;
    gap: 1.25rem;
    padding: 0;
  }
  .hero-image-box {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }
}

/* Reduced motion: show all without transforms */
@media (prefers-reduced-motion: reduce) {
  .hero-image-box {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.hero-image-box.hero-center {
  z-index: 3;
  transform: scale(1);
  opacity: 1;
}

.hero-image-box.hero-left,
.hero-image-box.hero-right {
  opacity: 0;
  transform: translateY(34px) scale(.60);
  pointer-events: none;
  z-index: 2;
}

.hero-image-box.hero-left  { left: 0; }
.hero-image-box.hero-right { right: 0; }

.hero-image {
  width: 28vw;
  max-width: 260px;
  aspect-ratio: 9/16;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--neutral-400-primary);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.18);
  transition: box-shadow .6s;
}

.hero-project-design:hover .hero-center {
  transform: scale(.66);
}

.hero-project-design:hover .hero-left {
  opacity: 1;
  transform: translate(-66%,0) scale(.84);
  pointer-events: auto;
}

.hero-project-design:hover .hero-right {
  opacity: 1;
  transform: translate(66%,0) scale(.84);
  pointer-events: auto;
}

.hero-project-design:hover .hero-image-box:not(.hero-center) .hero-image {
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.22);
}

@media (max-width: 980px) {
  .hero-project-design {
    flex-direction: column;
    min-height: auto;
    gap: 1.25rem;
  }
  .hero-image-box {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image-box {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-project-design:hover .hero-center {
    transform: none !important;
  }
}

.project-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 124px;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}

/* ABOUT THE PROJECT */

.about-project {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 124px;
  position: relative;
  flex: 0 0 auto;
  margin: 0px;
  width: 100%;
}

.about-project .about-project-allbox {
  display: inline-flex;
  gap: 56px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

.about-project .about-project-box {
  display: flex;
  width: 100%;
  align-items: start;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
  gap: 6.75rem; /* Converted from 16px */
  margin-top: 9.75rem; /* Converted from 56px */
  margin-bottom: 3.5rem; /* Converted from 56px */
}

.about-project .primary-mark-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0rem 0.75rem; /* Converted from 0px 12px */
  position: relative;
  flex: 0 0 auto;
  background-color: var(--brand-400-primary);
}

.about-project .miniature-tertiary-title-yellow {
  position: relative;
  width: fit-content;
  font-weight: var(--heading-200-regular-font-weight);
  color: var(--font-500-primary);
  font-size: var(--heading-200-regular-font-size);
  text-align: center;
}

.about-project .about-project-only {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  position: relative;
  align-self: stretch;
  margin-top: 3.5rem; /* Converted from 56px */
}

.about-project .about-the-project-text {
  position: relative;
  align-self: stretch;
  color: var(--font-500-primary);
  font-size: var(--text-XL-regular-font-size);
  font-weight: var(--text-XL-regular-font-weight);
  margin: 0px;
}


.about-project .project-main-info-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
}

.about-project .project-main-info-box {
  display: flex;
  width: 280px;
  height: 241px;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px 24px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--neutral-400-primary);
  box-shadow: 0px 2px 6px #f5f5f5;
}

.about-project .primary-lime-small {
  position: relative;
  width: 9px;
  height: 30px;
  background-color: var(--brand-400-primary);
}

.about-project .project-main-text-box{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.about-project .project-main-title {
  position: relative;
  width: fit-content;
  font-weight: var(--text-xl-semibold-font-weight);
  color: var(--font-500-primary);
  font-size: var(--text-XL-semibold-font-size);
}

.about-project .project-main-text-wrapper {
  position: relative;
  flex: 1;
  align-self: stretch;
  margin-top: 0.5rem; /* Converted from 8px */
  margin-bottom: 0px;
  font-weight: var(--text-m-regular-font-weight);
  color: var(--font-500-primary);
  font-size: var(--text-m-regular-font-size);
}


.about-project .mock-up {
  position: relative;
  /* Size: height drives layout now (portrait) */
  aspect-ratio: 8 / 16;                  /* portrait ratio */
  border-radius: 26px;
  border: 1px solid var(--neutral-400-primary);
  background-size: cover;
  background-position: 50% 50%;
  margin-inline: auto;                   /* center horizontally */
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

/* Image inside respects container shape */
.about-project .mock-up-image {
  object-fit: cover;
  border-radius: 26px;
  display: block;
}

/* Optional: add a modifier class if you only want SOME mock-ups portrait
   (use <div class="mock-up mock-up--portrait"> ... ) */
.about-project .mock-up--portrait {
  aspect-ratio: 9 / 16;
  width: clamp(260px, 42vw, 520px);
  max-height: clamp(480px, 78vh, 920px);
}

/* Small screens: let it fill width but keep ratio */
@media (max-width: 640px) {
  .about-project .mock-up,
  .about-project .mock-up--portrait {
    width: 100%; 
    max-width: 100%;
    aspect-ratio: 9 / 16;
    max-height: none;
  }
}

/* Reduced motion: nothing extra needed (kept for parity if you later animate) */
@media (prefers-reduced-motion: reduce) {
  .about-project .mock-up,
  .about-project .mock-up--portrait {
    transition: none;
  }
}

/* Generate project smaller */
@media (max-width: 780px) {

  .page .page-title{
    font-size: var(--heading-300-bold-font-size);
    font-weight: var(--heading-300-bold-font-weight);
  }

  .about-project .about-project-box{
    flex-direction: column;
    align-items: start;
    gap: 1.5rem; /* Converted from 24px */
    margin-top: 3.5rem; /* Converted from 56px */
    margin-bottom: 3.5rem; /* Converted from 56px */
  }

  .about-project .about-project-only{
    margin-top: 0px;
  }

  .about-project .about-the-project-text{
    font-size: var(--text-m-regular-font-size);
    font-weight: var(--text-m-regular-font-weight);
    margin: 0px;
  }
}


/* Generate project smaller */
@media (max-width: 614px) {
  .page .page-title{
    font-size: var(--heading-100-bold-font-size);
    font-weight: var(--heading-100-bold-font-weight);
  }

  .about-project .about-project-box{
    flex-direction: column;
    align-items: start;
    gap: 1.5rem; /* Converted from 24px */
    margin-top: 2rem; /* Converted from 32px */
    margin-bottom: 1rem; /* Converted from 32px */
  }

  .about-project .about-the-project-text{
    font-size: var(--text-s-regular-font-size);
    font-weight: var(--text-s-regular-font-weight);
    margin: 0px;
  }
  
  .page .miniature-tertiary-title-yellow{
    font-size: var(--text-XL-regular-font-size);
    font-weight: var(--text-XL-regular-font-weight);
  }

  .about-project .project-main-info-box{
    width: 170px;
    height: 320px;
  }

  .about-project .project-main-title{
    font-size: var(--text-m-semibold-font-size);
    font-weight: var(--text-m-semibold-font-weight);
  }

  .about-project .project-main-text-wrapper {
    font-size: var(--text-s-regular-font-size);
    font-weight: var(--text-s-regular-font-weight);
  }
}

.about-project .animation-formats {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  position: relative;
}

.about-project .animation-formats-horizontally {
  height: 344px;
  align-items: center;
  gap: 64px;
  padding: 24px 24px 16px;
  align-self: stretch;
  width: 100%;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--neutral-400-primary);
  box-shadow: 0px 2px 6px #f5f5f5;
  display: flex;
  position: relative;
}

.about-project .shapes-graphic{
  position: relative;
  width: 278px;
  height: 258.4px;
}

.about-project .polygon-1 {
  top: 192px;
  left: 101px;
  position: absolute;
  width: 76px;
  height: 66px;
}

.about-project .polygon-2 {
  top: 192px;
  left: 189px;
  position: absolute;
  width: 76px;
  height: 66px;
}

.about-project .polygon-3 {
  top: 192px;
  left: 13px;
  position: absolute;
  width: 76px;
  height: 66px;
}

.about-project .polygon-4 {
  top: 104px;
  left: 101px;
  position: absolute;
  width: 76px;
  height: 66px;
}

.about-project .line-left {
  left: -2580px;
  position: absolute;
  width: 258px;
  height: 1px;
  top: -16550px;
  object-fit: cover;
}

.about-project .line-right {
  left: -2302px;
  position: absolute;
  width: 258px;
  height: 1px;
  top: -16550px;
  object-fit: cover;
}

/* ANIMATION POLYGON */
/* Polygons: add smooth position transitions (keep original top/left as start) */
.about-project .animation-formats-horizontally .polygon-1,
.about-project .animation-formats-horizontally .polygon-2,
.about-project .animation-formats-horizontally .polygon-3,
.about-project .animation-formats-horizontally .polygon-4 {
  transition:
    top .8s cubic-bezier(.25,.6,.2,1),
    left .8s cubic-bezier(.25,.6,.2,1),
    transform .8s cubic-bezier(.25,.6,.2,1),
    box-shadow .6s ease;
  background: transparent; /* keep */
  /* ensure they sit above background */
  z-index: 2;
}

/* HOVER: move into a vertical line (centered horizontally) */
.about-project .animation-formats-horizontally:hover .polygon-1 {
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}
.about-project .animation-formats-horizontally:hover .polygon-2 {
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
}
.about-project .animation-formats-horizontally:hover .polygon-3 {
  left: 50%;
  top: 130px;
  transform: translateX(-50%);
}
.about-project .animation-formats-horizontally:hover .polygon-4 {
  left: 50%;
  top: 190px;
  transform: translateX(-50%);
}

/* Optional subtle “breathing” once aligned */
.about-project .animation-formats-horizontally:hover .polygon-1,
.about-project .animation-formats-horizontally:hover .polygon-2,
.about-project .animation-formats-horizontally:hover .polygon-3,
.about-project .animation-formats-horizontally:hover .polygon-4 {
  animation: polyVerticalBreath 4s ease-in-out infinite;
}
.about-project .animation-formats-horizontally:hover .polygon-2 { animation-delay:.15s; }
.about-project .animation-formats-horizontally:hover .polygon-3 { animation-delay:.30s; }
.about-project .animation-formats-horizontally:hover .polygon-4 { animation-delay:.45s; }

@keyframes polyVerticalBreath {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-6px); }
}

/* Reduced motion: no breathing, just align */
@media (prefers-reduced-motion: reduce) {
  .about-project .animation-formats-horizontally:hover .polygon-1,
  .about-project .animation-formats-horizontally:hover .polygon-2,
  .about-project .animation-formats-horizontally:hover .polygon-3,
  .about-project .animation-formats-horizontally:hover .polygon-4 {
    animation: none;
  }
}

.about-project .animation-formats-3 {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.page .primary-yellow-visual-degradation {
  width: 8px !important;     
  min-width: 8px;
  max-width: 8px;
  height: 24px;
  display: block;            
  flex: 0 0 8px;            
  background-color: var(--brand-400-primary);
  box-sizing: border-box;     
  margin: 0;
  padding: 0;
}

.page.research-title-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem; /* Converted from 24px */
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.page .research-title {
  position: relative;
  width: fit-content;
  font-weight: var(--text-XL-bold-font-weight);
  color: var(--font-500-primary);
  font-size: var(--text-XL-bold-font-size);
  text-align: center;

}

.page .research-text{
  position: relative;
  font-weight: var(--text-s-regular-font-weight);
  color: var(--font-500-primary);
  font-size: var(--text-s-regular-font-size);
  margin: 0;
}

.about-project .animation-formats-4 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.animation-formats-square{ 
  flex-direction: column;
  height: 600px;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  flex: 1;
  flex-grow: 1;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--neutral-400-primary);
  box-shadow: 0px 2px 6px #f5f5f5;
  display: flex;
  position: relative;
}

.about-project .animation-formats-circles {
  flex-direction: column;
  height: 600px;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  flex: 1;
  flex-grow: 1;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--neutral-400-primary);
  box-shadow: 0px 2px 6px #f5f5f5;
  display: flex;
  position: relative;
}

.about-project .small-square-up {
  width: 28px;
  height: 31px;
  top: 20px;
  left: 190px;
  position: absolute;
  background-color: var(--brand-400-primary);
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .square-down {
  width: 53px;
  height: 59px;
  top: 150px;
  left: 138px;
  position: absolute;
  background-color: var(--brand-400-primary);
  border-radius: 6px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .square-up {
  width: 55px;
  height: 60px;
  top: 40px;
  left: 65px;
  position: absolute;
  background-color: var(--brand-400-primary);
  border-radius: 6px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .small-square-meddel {
  width: 29px;
  height: 33px;
  top: 79px;
  left: 232px;
  position: absolute;
  background-color: var(--brand-400-primary);
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .small-square-down {
  width: 28px;
  height: 31px;
  top: 227px;
  left: 218px;
  position: absolute;
  background-color: var(--brand-400-primary);
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .quare-big {
  position: absolute;
  width: 97px;
  height: 108px;
  top: 141px;
  left: 0;
  background-color: var(--brand-400-primary);
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

/* ANIMATION SQUARES */
/* Smooth position changes */
.animation-formats-square .small-square-up,
.animation-formats-square .square-down,
.animation-formats-square .square-up,
.animation-formats-square .small-square-meddel,
.animation-formats-square .small-square-down,
.animation-formats-square .quare-big {
  transition: top .85s cubic-bezier(.25,.6,.2,1),
              left .85s cubic-bezier(.25,.6,.2,1),
              transform .85s cubic-bezier(.25,.6,.2,1);
}

/* Cancel old wander transforms/animations when structuring */
.animation-formats-square:hover .small-square-up,
.animation-formats-square:hover .square-down,
.animation-formats-square:hover .square-up,
.animation-formats-square:hover .small-square-meddel,
.animation-formats-square:hover .small-square-down,
.animation-formats-square:hover .quare-big {
  animation: none !important;
  transform: none;
}

/* Grid helper variables (adjust if needed) */
.animation-formats-square { 
  --col1: 20px;
  --col2: 132px;
  --col3: 244px;
  --row1: 20px;
  --row2: 140px;
  --row3: 240px;
}

/* Big square centered (computed separately for visual balance) */
.animation-formats-square:hover .quare-big {
  left: 111px;  /* (320 - 97)/2 */
  top: 106px;   /* (320 - 108)/2 */
}

/* Place other squares around it (no overlaps) */
.animation-formats-square:hover .square-up            { left: var(--col1); top: var(--row1); }
.animation-formats-square:hover .small-square-up      { left: var(--col2); top: var(--row1); }
.animation-formats-square:hover .small-square-meddel  { left: var(--col3); top: var(--row2); }
.animation-formats-square:hover .square-down          { left: var(--col2); top: var(--row3); }
.animation-formats-square:hover .small-square-down    { left: var(--col3); top: var(--row3); }

/* OPTIONAL: subtle unified breathing after arrangement (remove if not wanted) */
.animation-formats-square:hover .square-up,
.animation-formats-square:hover .small-square-up,
.animation-formats-square:hover .small-square-meddel,
.animation-formats-square:hover .square-down,
.animation-formats-square:hover .small-square-down,
.animation-formats-square:hover .quare-big {
  animation: sqGridBreath 5s ease-in-out infinite .9s;
}

@keyframes sqGridBreath {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* Reduced motion: no breathing */
@media (prefers-reduced-motion: reduce) {
  .animation-formats-square:hover .square-up,
  .animation-formats-square:hover .small-square-up,
  .animation-formats-square:hover .small-square-meddel,
  .animation-formats-square:hover .square-down,
  .animation-formats-square:hover .small-square-down,
  .animation-formats-square:hover .quare-big {
    animation: none !important;
  }
}


.page  .research-box-yellow-and-text {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* Converted from 16px */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-project .overlap {
  position: relative;
  width: 216px;
  height: 166px;
  top: 112px;
  left: 31px;
}

.about-project .big-circle {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 50px;
  left: 68px;
  background-color: var(--brand-400-primary);
  border-radius: 89.1px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .circle-small-1 {
  top: 135px;
  left: 187px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--brand-400-primary);
  border-radius: 89.1px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .circle-small-2 {
  top: 165px;
  left: 59px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--brand-400-primary);
  border-radius: 89.1px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .circle-small-3 {
  top: 168px;
  left: 156px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--brand-400-primary);
  border-radius: 89.1px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .circle-small-4 {
  top: 138px;
  left: 20px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--brand-400-primary);
  border-radius: 89.1px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

.about-project .circle-small-5 {
  top: 176px;
  left: 108px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--brand-400-primary);
  border-radius: 89.1px;
  border: 1px solid;
  border-color: var(--neutral-500);
}

/* ANIMATION CIRCLES */
.about-project .animation-formats-circles .overlap,
.about-project .animation-formats-circles .big-circle,
.about-project .animation-formats-circles .circle-small-1,
.about-project .animation-formats-circles .circle-small-2,
.about-project .animation-formats-circles .circle-small-3,
.about-project .animation-formats-circles .circle-small-4,
.about-project .animation-formats-circles .circle-small-5 {
  transition: top .9s cubic-bezier(.25,.6,.2,1),
              left .9s cubic-bezier(.25,.6,.2,1),
              transform .9s cubic-bezier(.25,.6,.2,1);
}

/* Center the OVERLAP block itself (it becomes a square stage) */
.about-project .animation-formats-circles:hover .overlap {
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Big circle -> exact center */
.about-project .animation-formats-circles:hover .big-circle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* stays under */
}

/* Ring geometry (radius ~110px from big circle center).
   We position by setting each small circle’s top/left so its CENTER sits on the ring.
   (Small circle size = 40px -> subtract 20px to convert center to top-left.) */

.about-project .animation-formats-circles:hover .circle-small-1 { /* TOP */
  top: calc(50% - 110px - 20px);
  left: calc(50% - 20px);
  transform: translate(0,0);
}
.about-project .animation-formats-circles:hover .circle-small-2 { /* UPPER-RIGHT (approx 72deg) */
  top: calc(50% - 68px - 20px);  /* 110 * sin(72°) ≈ 105 -> we use smaller to fit; adjust */
  left: calc(50% + 90px - 20px); /* 110 * cos(32° approx) */
  transform: translate(0,0);
}
.about-project .animation-formats-circles:hover .circle-small-3 { /* LOWER-RIGHT */
  top: calc(50% + 60px - 20px);
  left: calc(50% + 74px - 20px);
  transform: translate(0,0);
}
.about-project .animation-formats-circles:hover .circle-small-4 { /* LOWER-LEFT */
  top: calc(50% + 60px - 20px);
  left: calc(50% - 74px - 20px);
  transform: translate(0,0);
}
.about-project .animation-formats-circles:hover .circle-small-5 { /* UPPER-LEFT */
  top: calc(50% - 68px - 20px);
  left: calc(50% - 90px - 20px);
  transform: translate(0,0);
}

/* Lift small circles above big */
.about-project .animation-formats-circles .circle-small-1,
.about-project .animation-formats-circles .circle-small-2,
.about-project .animation-formats-circles .circle-small-3,
.about-project .animation-formats-circles .circle-small-4,
.about-project .animation-formats-circles .circle-small-5 {
  z-index: 2;
}

/* Optional gentle breathing AFTER they settle (remove if not wanted) */
.about-project .animation-formats-circles:hover .circle-small-1,
.about-project .animation-formats-circles:hover .circle-small-2,
.about-project .animation-formats-circles:hover .circle-small-3,
.about-project .animation-formats-circles:hover .circle-small-4,
.about-project .animation-formats-circles:hover .circle-small-5 {
  animation: smallRingFloat 5s ease-in-out infinite;
}
.about-project .animation-formats-circles:hover .circle-small-2 { animation-delay:.3s; }
.about-project .animation-formats-circles:hover .circle-small-3 { animation-delay:.6s; }
.about-project .animation-formats-circles:hover .circle-small-4 { animation-delay:.9s; }
.about-project .animation-formats-circles:hover .circle-small-5 { animation-delay:1.2s; }

@keyframes smallRingFloat {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(0,-8px); }
}

/* Reduced motion: no float */
@media (prefers-reduced-motion: reduce) {
  .about-project .animation-formats-circles:hover .circle-small-1,
  .about-project .animation-formats-circles:hover .circle-small-2,
  .about-project .animation-formats-circles:hover .circle-small-3,
  .about-project .animation-formats-circles:hover .circle-small-4,
  .about-project .animation-formats-circles:hover .circle-small-5 {
    animation: none;
  }
}

/* Generate project smaller */
@media (max-width: 980px) {

  .project-hero-box .animation-formats-horizontally {
    height: auto;
  }
  
  .project-hero-box .animation-formats-4{
    flex-direction: column;
    height: auto;
  }

  .project-hero-box .animation-formats-circles, .animation-formats-square{
    gap: 3rem; /* Converted from 48px */
 }
 .project-hero-box .animation-formats-horizontally{
    gap: 1rem; /* Converted from 16px */ 
 }
}

/* Generate project smaller */
@media (max-width: 614px) {

  
 .project-hero-box .animation-formats-horizontally{
    gap: 2rem; /* Converted from 32px */
    flex-direction: column;
 }
  
 .project-hero-box .animation-formats-circles, .animation-formats-square{
    gap: 2rem; /* Converted from 32px */
 }

 .project-hero-box .research-box-yellow-and-text{
    gap: .5rem; /* Converted from 8px */
 }

 .project-hero-box .research-text{
    margin-top: 1rem; /* Converted from 16px */
 }

 .project-hero-box .research-title{
    font-size: var(--text-l-bold-font-size);
    font-weight: var(--text-l-bold-font-weight);
 }
}

.hero-project-design-wrapper {
  /* existing styles ... */
  opacity: 0;
  transform: translateY(64px);
  will-change: opacity, transform;
}

body.page-enter .hero-project-design-wrapper {
  animation: heroWrapIn .8s cubic-bezier(.77,0,.18,1) .15s forwards;
}

@keyframes heroWrapIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Optional: stagger the three image boxes on first load (before any hover) */
.hero-project-design-wrapper:not(.hero-loaded) .hero-image-box {
  opacity: 0;
  transform: translateY(40px) scale(.9);
}

body.page-enter .hero-project-design-wrapper:not(.hero-loaded) .hero-image-box.hero-center {
  animation: heroImgIn .6s cubic-bezier(.77,0,.18,1) .25s forwards;
}

@keyframes heroImgIn {
  to { opacity:1; transform: translateY(0) scale(1); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-project-design-wrapper,
  .hero-project-design-wrapper .hero-image-box {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* ...existing code... */


/* METHODOLOGY AND DESIGN */

.methodology-design-text-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.methodology-design-text-part .research-methodology {
  align-items: flex-start;
  gap: 65px;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
}

.methodology-design-text-part .research-methodology-2 {
  display: flex;
  align-items: flex-start;
  gap: 6rem; /* Converted from 96px */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.methodology-design-text-part .research-methodology-3 {
  position: relative;
  width: 40%;
  font-weight: var(--heading-400-regular-font-weight);
  color: var(--font-500-primary);
  font-size: var(--heading-400-regular-font-size);
}

.methodology-design-text-part .div-wrapper {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.methodology-design-text-part .research-methodology-text {
  position: relative;
  align-self: stretch;
  font-weight: var(--text-l-regular-font-weight);
  color: var(--font-500-primary);
  font-size: var(--text-l-regular-font-size);
  margin: 0;
}

.methodology-design-text-part .graphics-and-accordion {
  display: flex;
  height: 535px;
  align-items: flex-start;
  justify-content: center;
  gap: 6rem; /* Converted from 96px */
  position: relative;
  align-self: stretch;
  width: 100%;
}

.methodology-design-text-part .graphics-box-research {
  width: 40%;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem; /* Converted from 24px 16px */
  background-color: var(--neutral-200);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--neutral-400-primary);
  box-shadow: 0px 2px 6px #f5f5f5;
  display: flex;
  position: relative;
  align-self: stretch;
}

.methodology-design-text-part .research-methodology-image {
  position: relative;
  height: 80%;
  object-fit: cover;
}

.methodology-design-text-part .harmonica-box {
  align-items: flex-start;
  padding: 12px 16px 24px;
  align-self: stretch;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--neutral-400-primary);
  box-shadow: 0px 2px 6px #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.methodology-design-text-part .drop-category-more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem; /* Converted from 10px */
  padding: 1.5rem 0.75rem 0.75rem; /* Converted from 24px 24px 12px */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--neutral-400-primary);
}

.methodology-design-text-part .drop-more-box {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.methodology-design-text-part .drop-category-more-2 {
  position: relative;
  flex: 1;
  font-weight: var(--text-XL-semibold-font-weight);
  color: var(--font-500-primary);
  font-size: var(--text-XL-semibold-font-size);
}

.methodology-design-text-part .keyboard-arrow-down {
  position: relative;
  width: 36px;
  height: 36px;
  aspect-ratio: 1;
}

.drop-category-more {
  border: 1px solid var(--neutral-300-primary);
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: var(--white);
  transition: background-color .25s;
  margin: 0px;
}

.drop-category-more + .drop-category-more {
  margin-top: 0.5rem;
}

.drop-category-more:hover {
  background: var(--neutral-100-primary);
}

.drop-category-more.open {
  background: var(--neutral-100-primary);
}

.drop-category-more .drop-more-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.drop-category-more .keyboard-arrow-down {
  width: 20px;
  height: 20px;
  transition: transform .35s ease;
}

.drop-category-more.open .keyboard-arrow-down {
  transform: rotate(180deg);
}

.collaboration-steps-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease;
  will-change: max-height;
}

.drop-category-more.open .collaboration-steps-content {
  max-height: 400px; /* big enough to show content */
}

.accordion-text {
  margin-top: .75rem;
  font-size: var(--text-s-regular-font-size, 0.9rem);
  line-height: 1.4;
  color: var(--font-500-primary);
  margin: 0px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .collaboration-steps-content {
    transition: none;
    max-height: none !important;
  }
  .keyboard-arrow-down {
    transition: none;
  }
}


.methodology-design-text-part .design-part-box {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.methodology-design-text-part .design-part-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  width: 50%;
}

.methodology-design-text-part .design-part-text-box {
  display: flex;
  flex-direction: column;
  height: 488px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 24px;
  position: relative;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--neutral-400-primary);
  box-shadow: 0px 2px 6px #f5f5f5;
}

.methodology-design-text-part .design-part-icon {
  position: relative;
  flex: 0 0 auto;
}

.methodology-design-text-part .mock-up-small-box {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 346px;
  border-radius: 26px;
  border: 1px solid;
  border-color: var(--neutral-400-primary);
  background-size: cover;
}
.methodology-design-text-part .mock-up-small-photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  object-fit: cover;
}

/* Generate project smaller */
@media (max-width: 880px) {

  .methodology-design-text-part .research-methodology-2{
    flex-direction: column;
    align-items: start;
    gap: 1.5rem; /* Converted from 24px */
  }

  .methodology-design-text-part .graphics-and-accordion{
    flex-direction: column;
    align-items: start;
    gap: 1.5rem; /* Converted from 24px */
    height: auto;
  }
  
  .methodology-design-text-part .research-methodology-image{
    height: 100%;
  }

  .methodology-design-text-part .graphics-box-research{
    width: 100%;
    height: 280px;
  }

  .methodology-design-text-part .design-part-box{
    flex-direction: column;
    align-items: start;
    gap: 1rem; /* Converted from 16px */
  }

  .methodology-design-text-part .design-part-block{
    width: 100%;
  }

   .methodology-design-text-part .design-part-text-box{
    height: auto;
    gap: 2.5rem; /* Converted from 40px */
   }

  .methodology-design-text-part .research-text{
    margin-top: 1rem; /* Converted from 16px */
  }
}

/* Generate project smaller */
@media (max-width: 614px) {
  .methodology-design-text-part{
    gap: 3rem; /* Converted from 80px */
  }

  .methodology-design-text-part .research-methodology-3{
    width: 100%;
    font-size: var(--heading-100-semibold-font-size);
    font-weight: var(--heading-100-semibold-font-weight);
    margin-top: 2rem; /* Converted from 32px */
  }

  .methodology-design-text-part .research-methodology-text{
    font-size: var(--text-s-regular-font-size);
    font-weight: var(--text-s-regular-font-weight);
  }
  
  .methodology-design-text-part .drop-category-more-2{
    font-size: var(--text-m-semibold-font-size);
    font-weight: var(--text-m-semibold-font-weight);
  }

  .methodology-design-text-part .mock-up-small-box{
    height: 240px;
    width: 100%;
  }

  .methodology-design-text-part .research-title {
    font-size: var(--text-l-bold-font-size);
    font-weight: var(--text-l-bold-font-weight);
  }
 
  
}




/* CONCLUSION*/

.conclusion-and-button-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 112px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-top: 4rem; /* Converted from 64px */
}

.conclusion-and-button-box .conclusion-part {
  display: flex;
  align-items: flex-start;
  gap: 6rem;
  position: relative;
  align-self: stretch;
  width: 100%;
}


.conclusion-and-button-box .conclusion-title {
  position: relative;
  width: fit-content;
  font-weight: var(--heading-600-regular-font-weight);
  color: var(--font-500-primary);
  font-size: var(--heading-600-regular-font-size);
}

.conclusion-and-button-box.conclusion-text-box {
  display: flex;
  width: 60%;
  align-items: flex-start;
  gap: 4px;
  position: relative;
}

.conclusion-and-button-box .conclusion-text {
  position: relative;
  align-self: stretch;
  font-weight: 400;
  color: var(--font-500-primary);
}

.conclusion-and-button-box .next-project-box {
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  position: relative;
}

.conclusion-and-button-box .next-project-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 274px;
  height: 86px;
  gap: 2rem; /* Converted from 32px */
  padding: .85rem 1.4rem;
  background: var(--brand-400-primary);
  color: var(--font-100-invert, #fff);
  border-radius: 200px;
  box-shadow: 0px 2px 6px #f5f5f5;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, opacity .25s ease;
}

.next-project-button .vector {
  transition: transform .30s ease;
}

.next-project-button:hover {
  background: var(--brand-500);
}

.next-project-button:hover .vector {
  transform: rotate(45deg);
}

.next-project-button:active {
  background: var(--brand-300-primary);
  opacity: .85;
}

.next-project-button:active .vector {
  transform: rotate(45deg);
}

/* Optional: focus outline */
.next-project-button:focus-visible {
  outline: 2px solid var(--brand-500-primary);
  outline-offset: 3px;
}

.page .next-project-text {
  position: relative;
  width: fit-content;
  font-weight: var(--text-XL-bold-font-weight);
  color: var(--font-500-primary);
  font-size: var(--text-XL-bold-font-size);
}

.page .vector {
  position: relative;
  width: 31.12px;
  height: 31.12px;
}


/* Generate project smaller */
@media (max-width: 880px) {
  .conclusion-and-button-box .conclusion-part {
    flex-direction: column;
    align-items: start;
    gap: 1.5rem; /* Converted from 24px */
    width: 100%;
  }

  .conclusion-and-button-box .conclusion-title{
    font-size: var(--heading-400-semibold-font-size);
    font-weight: var(--heading-400-semibold-font-weight);
  }
}

/* Generate project smaller */
@media (max-width: 614px) {

  .page .project-info-box, .about-project{
    gap: 4rem; /* Converted from 64px */
  }

  .conclusion-and-button-box .conclusion-title{
    font-size: var(--heading-300-semibold-font-size);
    font-weight: var(--heading-300-semibold-font-weight);
  }
  .conclusion-and-button-box .conclusion-text {
    font-size: var(--text-s-regular-font-size);
    font-weight: var(--text-s-regular-font-weight);
    margin: 0px;
  }

  .conclusion-and-button-box .next-project-button {
    max-width: 274px;
    height: 72px;
    gap: 1rem; /* Converted from 16px */
  }

  .conclusion-and-button-box .next-project-text {
    font-size: var(--text-l-bold-font-size);
    font-weight: var(--text-l-bold-font-weight);
  }

  .conclusion-and-button-box .vector {
    width: 24px;
    height: 24px;
  }
}


/* FOOTER */

.footer {
  display: flex;
  width: 80%;
  height: 100%;
  align-items: flex-end;
  justify-content: space-around;
  margin-top: 8rem; /* Converted from 128px */
  margin-bottom: 1.25rem; /* Converted from 20px */
  margin-left: 10%;
  margin-right: 10%;
  position: relative;
  box-sizing: border-box;
}


.footer-background {
  position: absolute;
  display: flex;
  width: 100%;
  top:0rem; /* Converted from 0px */
  left:0rem; /* Converted from 0px */
  z-index: -10;
}

.footer-box-photo {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.footer .footer-box {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  width: 100%;
  height: 100%;
  padding-top: 1rem; /* Converted from 16px */
  padding-left: 2.5rem; /* Converted from 40px */
  padding-right: 7.5rem; /* Converted from 120px */
  padding-bottom: 2rem; /* Converted from 36px */
  box-sizing: border-box;
  position: relative;
}

.footer .footer-title {
  display:flex;
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
}

.text-title-regular{
  color: var(--font-100);
  font-weight: var(--heading-600-regular-font-weight);
  font-size: var(--heading-600-regular-font-size);
}

.footer .span {
  font-weight: 500;
  color: #fafafa;
}

.text-title-bold{ 
  color: var(--font-100);
  font-weight: var(--heading-600-bold-font-weight);
  font-size: var(--heading-600-bold-font-size);
}

.footer .footer-text-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer .footer-link-box {
  display: flex;
  flex-direction: column;
  width: 193px;
  align-items: flex-start;
  gap: 0.5rem; /* Converted from 8px */
  position: relative;
}

.footer .footer-link-button {
  display: flex;
  width: 193px;
  align-items: center;
  gap: 0.75rem; /* Converted from 12px */
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
  text-decoration: none;
}

.linkedin-footer,
.footer .mail-footer {
  position: relative;
  width: 0.75rem; /* Converted from 12px */
  height: 0.625rem; /* Converted from 10px */
}

.footer .text-link-box-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* Converted from 10px */
  padding: 0px 0px 2px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-weight: var(--text-XS-regular-font-weight);
  color: var(--font-100);
  font-size: var(--text-XS-regular-font-size);
}

.footer-text {
  position: relative;
  width: 402px;
  font-weight: var(--text-s-regular-font-weight);
  color: var(--font-100);
  font-size: var(--text-s-regular-font-size);
}





/* Footer Mobile */

.footer-background-mobile {
  display: none;
}

@media (max-width: 612px) {
  .footer .footer-background {
    display: none;
  }

  .footer .footer-background-mobile {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
  }
  
  .footer {
    margin-top: 4.5rem; /* Converted from 72px */
    width: 90%;
    height: 100%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 3rem; /* Converted from 48px */
    height: auto; 
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
  }

  .footer .footer-box{
    display: flex;
    flex-direction: column;
    gap: 10rem; /* Converted from 48px */
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding-top: 1rem; /* Converted from 16px */
    padding-left: 2rem; /* Converted from 32px */
    padding-right: 1rem; /* Converted from 16px */
    padding-bottom: 1.5rem; /* Converted from 24px */
    box-sizing: border-box;
    position: relative;
  }

  .footer .footer-title {
   display: block; /* Change from flex to block */
   position: relative;
   width: 100%; /* Take full width */
   text-align: left; /* Align text to the left */
   margin-top: -1.00px;
  }

  .footer .text-title-regular {
   color: var(--font-100);
   font-weight: var(--heading-300-regular-font-weight);
   font-size: var(--heading-300-regular-font-size);
   display: inline-block; /* Keep on the same line if possible */
   white-space: nowrap; /* Prevent wrapping */
  }

 .footer .text-title-bold {
   color: var(--font-100);
   font-weight: var(--heading-300-bold-font-weight);
   font-size: var(--heading-300-bold-font-size);
   display: block; /* Force to a new line */
 }

  .footer .footer-text-box{
    gap: 18rem; /* Converted from 56px */
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
  }

  .footer .footer-link-box{
    width: 100%;
    gap: 1rem; /* Converted from 16px */
    order: 2; /* Place link box below text */
  }

  .footer .linkedin-footer,
  .footer .mail-footer{
  width: 1rem;
  height: 1rem;
  }
  
 .footer-text{
  width: 100%;
  order: 1; 

 }
}

@media (min-width: 1920px) {
   .footer{
    padding-right: 10rem;
   }
  
  .footer .footer-box{
    gap: 16rem; /* Converted from 48px */
  }
}

@media (max-width: 1920px) {
   .footer .footer-box{
    gap: 14rem; /* Converted from 48px */
  }
}

@media (max-width: 1840px) {
   .footer .footer-box{
    gap: 12rem; /* Converted from 48px */
  }
}

@media (max-width: 1710px) {
   .footer .footer-box{
    gap: 10rem; /* Converted from 48px */
  }
}

@media (max-width: 1570px) {
   .footer .footer-box{
    gap: 8rem; /* Converted from 48px */
  }
}

@media (max-width: 1430px) {
   .footer .footer-box{
    gap: 6rem; /* Converted from 48px */
  }
}

@media (max-width: 1280px) {
   .footer .footer-box{
    gap: 4rem; /* Converted from 48px */
  }
}

@media (max-width: 1140px) {
   .footer .footer-box{
    gap: 2rem; /* Converted from 48px */
  }
}

@media (max-width: 1056px) {
   .footer .footer-box{
    gap: 3rem; 
  }
  .text-title-regular{
   font-weight: var(--heading-400-regular-font-weight);
   font-size: var(--heading-400-regular-font-size);
  }

  .text-title-bold{
   font-weight: var(--heading-400-bold-font-weight);
   font-size: var(--heading-400-bold-font-size);
  }

  .footer-text{
    width: 24rem;
  }
}

@media (max-width: 1140px) {
   .footer .footer-box{
    gap: 2rem; /* Converted from 48px */
  }
}

@media (max-width: 1000px) {
   .footer .footer-box{
    gap: 1rem; 
  }
  .text-title-regular{
   font-weight: var(--heading-400-regular-font-weight);
   font-size: var(--heading-400-regular-font-size);
  }

  .text-title-bold{
   font-weight: var(--heading-400-bold-font-weight);
   font-size: var(--heading-400-bold-font-size);
  }

  .footer-text{
    width: 20rem;
  }
}

@media (max-width: 920px) {
   .footer .footer-box{
    gap: 1rem; 
    padding-right: 4rem;
  }
  .text-title-regular{
   font-weight: var(--heading-400-regular-font-weight);
   font-size: var(--heading-400-regular-font-size);
  }

  .text-title-bold{
   font-weight: var(--heading-400-bold-font-weight);
   font-size: var(--heading-400-bold-font-size);
  }

  .footer-text{
    width: 18rem;
    font-size: var(--text-XS-regular-font-size);
    font-weight: var(--text-XS-regular-font-weight);
  }
}

@media (max-width: 856px) {
   .footer .footer-box{
    gap: 0.5rem; 
    padding-right: 4rem;
  }
  .text-title-regular{
   font-weight: var(--heading-400-regular-font-weight);
   font-size: var(--heading-400-regular-font-size);
  }

  .text-title-bold{
   font-weight: var(--heading-400-bold-font-weight);
   font-size: var(--heading-400-bold-font-size);
  }

  .footer-text{
    width: 16rem;
    font-size: var(--text-XS-regular-font-size);
    font-weight: var(--text-XS-regular-font-weight);
  }
}

@media (max-width: 820px) {
   .footer .footer-box{
    gap: 0.5rem; 
    padding-right: 4rem;
  }
  .text-title-regular{
   font-weight: var(--heading-400-regular-font-weight);
   font-size: var(--heading-400-regular-font-size);
  }

  .text-title-bold{
   font-weight: var(--heading-400-bold-font-weight);
   font-size: var(--heading-400-bold-font-size);
  }

  .footer-text{
   display: none;
  }
}


@media (max-width: 715px) {
   .footer .footer-box{
    gap: 0.5rem; 
    padding-right: 4rem;
  }
  .text-title-regular{
   font-weight: var(--heading-200-regular-font-weight);
   font-size: var(--heading-200-regular-font-size);
  }

  .text-title-bold{
   font-weight: var(--heading-200-bold-font-weight);
   font-size: var(--heading-200-bold-font-size);
  }

  .footer-text{
   display: none;
  }
}

@media (max-width: 612px) {
   .footer .footer-text-box{
    gap: 18rem; /* Converted from 48px */
  }

  .footer-text{
   display: flex;
    width: 100%;
  }

  .footer-link-button{
    width: 100%;
  }
}

@media (max-width: 583px) {
   .footer .footer-text-box{
    gap: 16rem; /* Converted from 48px */
  }

   .footer-text{
   display: flex;
  }
}

@media (max-width: 543px) {
   .footer .footer-text-box{
    gap: 14rem; /* Converted from 48px */
  }
}

@media (max-width: 509px) {
   .footer .footer-text-box{
    gap: 12rem; /* Converted from 48px */
  }
}

@media (max-width: 476px) {
   .footer .footer-text-box{
    gap: 9rem; /* Converted from 48px */
  }
}

@media (max-width: 440px) {
   .footer .footer-text-box{
    gap: 6rem; /* Converted from 48px */
  }
}

@media (max-width: 410px) {
   .footer .footer-text-box{
    gap: 4rem; /* Converted from 48px */
  }
}

@media (max-width: 398px) {
   .footer .footer-text-box{
    gap: 2.8rem; /* Converted from 48px */
  }
}

@media (max-width: 355px) {
   .footer .footer-text-box{
    gap: 1rem; /* Converted from 48px */
  }

  .footer-text{
    width: 100%;
  }

  .footer-link-button{
    width: 100%;
  }
}