/* =========================================================
   Responsive CSS
   Breakpoints are ordered from large screens to small screens.
   This file only overrides layout values from main.css/header.css.
   ========================================================= */

/* Large laptops and small desktops: 1920px and below */
/* @media (max-width: 3840px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 56%;
    right: -6%;
  }
} */

@media (max-width: 2560px) {
  .hero-gardient {
    height: 900px;
  }

  .blur-orange {
    top: 700px;
  }

  .hero-orbit-wrapper {
    position: absolute;
    width: 56%;
    right: -6%;
  }

  .hero-image {
    position: relative;
    top: -140px;
    left: -30px;
    width: 700px;
  }

  .hero-title {
    font-size: 85px;
    margin-top: 40px;
  }

  .hero-title-2 {
    font-size: 92px;
    margin-top: 0px;
  }

  .hero-description {
    font-size: 18px;
    margin-top: 20px;
  }
}

@media (min-width: 1850px) and (max-width: 1920px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 59%;
    right: -6%;
  }

  .hero-gardient {
    height: 1100px;
  }

  .blur-orange {
    top: 900px;
  }

  .hero-image {
    position: relative;
    top: -158px;
    left: -30px;
    width: 700px;
  }

  .hero-title {
    font-size: 78px;
  }

  .hero-title-2 {
    font-size: 90px;
    margin-top: 0px;
  }

  .hero-description {
    font-size: 18px;
    margin-top: 20px;
  }

  .hero-content {
    padding-top: 40px;
  }

  .hero-email {
    margin-top: 30px;
  }
}

@media (min-width: 1600px) and (max-width: 1849px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 56%;
    right: -6%;
  }

  .hero-gardient {
    height: 1000px;
  }

  .blur-orange {
    top: 800px;
  }

  .hero-image {
    position: relative;
    top: -158px;
    left: -30px;
    width: 600px;
  }

  .hero-title {
    font-size: 75px;
  }

  .hero-title-2 {
    font-size: 82px;
    margin-top: 0px;
  }

  .hero-description {
    font-size: 18px;
    margin-top: 20px;
  }

  .hero-content {
    padding-top: 40px;
  }

  .hero-email {
    margin-top: 30px;
  }
}

@media (max-width: 1670px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 54%;
    right: -6%;
  }

  .hero-image {
    width: 600px;
  }

  .hero-title {
    font-size: 66px;
    margin-top: 20px;
  }

  .hero-title-2 {
    font-size: 80px;
    margin-top: 0px;
  }

  .hero-description {
    font-size: 18px;
    margin-top: 20px;
  }
}

@media (min-width: 1400px) and (max-width: 1440px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 54%;
    right: -6%;
  }

  .hero-title {
    font-size: 68px;
  }

  .hero-title-2 {
    font-size: 78px;
    margin-top: 0px;
  }

  .hero-description {
    font-size: 18px;
    margin-top: 20px;
  }

  .hero-image {
    width: 550px;
  }

  .hero-gardient {
    height: 900px;
  }

  .blur-orange {
    top: 700px;
  }
}

@media (min-width: 1280px) and (max-width: 1366px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 54%;
    right: -6%;
  }

  .hero-title {
    font-size: 65px;
  }

  .hero-title-2 {
    font-size: 75px;
    margin-top: 0px;
  }

  .hero-description {
    font-size: 18px;
    margin-top: 20px;
  }

  .hero-gardient {
    height: 900px;
  }

  .blur-orange {
    top: 700px;
  }

  .hero-image {
    width: 450px;
    top: -115px;
  }
}

/* Large laptops and small desktops: 1280px and below */
@media (max-width: 1280px) {
  .hero {
    min-height: 46.25rem;
  }

  .hero-top-text {
    top: 5rem;
    font-size: 0.9375rem;
  }

  .hero-content-wrapper {
    padding-top: 15.625rem;
  }

  .hero-content {
    max-width: 31.25rem;
  }

  .hero-title {
    font-size: 3.625rem;
  }

  .hero-title-2 {
    font-size: 4.25rem;
  }

  .hero-description {
    width: min(100%, 31.25rem);
    font-size: 18px;
  }

  .hero-email {
    margin-top: 30px;
  }
}

/* Compact laptops: 1152px and below */
@media (max-width: 1152px) {
  .hero {
    min-height: 43.125rem;
  }

  .hero-top-text {
    top: 4.375rem;
  }

  .hero-content-wrapper {
    padding-top: 14.375rem;
  }

  .hero-content {
    max-width: 26.875rem;
  }

  .hero-title {
    font-size: 3.1rem;
    letter-spacing: -0.0938rem;
  }

  .hero-title-2 {
    font-size: 3.625rem;
    letter-spacing: -0.125rem;
    margin-top: 0px;
  }

  .hero-description {
    width: min(100%, 25.625rem);
    margin-top: 20px;
    font-size: 18px;
  }

  .hero-email {
    margin-top: 30px;
    font-size: 18px;
  }

  .hero-button {
    width: 11.875rem;
    padding: 0.875rem 1.25rem;
  }

  .hero-image {
    width: 450px;
  }
}

/* Tablets landscape and small laptops: 1024px and below */
@media (max-width: 1024px) {
  .hero {
    min-height: 40.625rem;
  }

  .hero-gardient {
    height: 800px;
  }

  .blur-orange {
    top: 600px;
  }

  .hero-top-text {
    top: 3.4375rem;
    font-size: 0.875rem;
  }

  .hero-content-wrapper {
    padding-top: 12.5rem;
  }

  .hero-content {
    max-width: 24.375rem;
  }

  .hero-title {
    font-size: 2.45rem;
    margin-top: 15px;
    /* line-height: 112%; */
    letter-spacing: -0.0875rem;
  }

  .hero-title-2 {
    font-size: 2.9rem;
    margin-top: 0px;
    /* line-height: 96%; */
    letter-spacing: -0.1125rem;
  }

  .hero-description {
    width: min(100%, 22rem);
    margin-top: 20px;
    font-size: 18px;
  }

  .hero-email {
    margin-top: 30px;
    font-size: 18px;
  }

  .hero-button {
    width: 9rem;
    padding: 0.8125rem 1.125rem;
    font-size: 0.9375rem;
  }

  .hero-orbit-wrapper {
    position: absolute;
    width: 52%;
    right: -6%;
  }

  .hero-image {
    width: 380px;
  }
}

/* Tablets portrait: 900px and below */
@media (max-width: 900px) {
  .hero,
  .contact-container {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .middle-header-1,
  .middle-header-2 {
    white-space: normal;
    word-break: break-word;
    font-size: clamp(2.5rem, 7.5vw, 5rem);
    letter-spacing: -0.03em;
    line-height: 1.08;
  }

  .middle-header-1 {
    text-align: left;
  }

  .middle-header-2 {
    text-align: right;
  }

  .hero {
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 5rem;
  }

  .hero-top-text {
    position: static;
    max-width: 35rem;
    margin: 0 0 4rem auto;
    text-align: right;
  }

  .hero-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4.25rem;
    padding-top: 0;
  }

  .hero-content {
    max-width: 38.75rem;
  }

  .hero-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }

  .hero-title-2 {
    font-size: clamp(3rem, 5vw, 4.5rem);
    margin-top: 0px;
  }

  .hero-description {
    width: min(100%, 22rem);
    font-size: 18px;
  }

  .hero-orbit-wrapper {
    position: absolute;
    width: 54%;
    right: -7%;
  }

  .hero-image {
    position: relative;
    top: -90px;
    left: -30px;
    width: 350px;
  }
}

/* Phones: 560px and below */
@media (max-width: 560px) {
  .hero,
  .middle-header-container,
  .curve-vector-container,
  .what-we-help-container,
  .about-container,
  .project-header-container,
  .contact-container {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .middle-header-1,
  .middle-header-2 {
    font-size: clamp(1.875rem, 8vw, 2.75rem);
    letter-spacing: -0.025em;
  }

  .hero {
    padding-top: 5.5rem;
    padding-bottom: 3.75rem;
  }

  .hero-top-text {
    max-width: 20rem;
    margin-bottom: 3rem;
    font-size: 0.875rem;
  }

  .hero-title {
    font-size: 2.375rem;
    letter-spacing: -0.0688rem;
  }

  .hero-title-2 {
    font-size: 2.75rem;
    letter-spacing: -0.0813rem;
  }

  .hero-description {
    margin-top: 20px;
    font-size: 18px;
  }

  .hero-button {
    width: 100%;
    max-width: 13.75rem;
  }

  .hero-orbit-wrapper {
    min-height: 18.75rem;
  }

  .hero-orbit {
    width: 170%;
    left: -42%;
  }

  .hero-image {
    width: min(78vw, 20rem);
    top: -2.75rem;
  }

  .curve-vector-container > svg {
    min-width: 48.75rem;
    transform: translateX(-38%);
  }

  .curve-image-container {
    left: 26%;
    width: 6.875rem;
  }

  .central-vector-container {
    width: calc(100% - 2rem);
    margin-right: 1rem;
    margin-left: 1rem;
  }

  .central-vector-text {
    max-width: 78vw;
    white-space: normal;
  }

  .what-we-help-header,
  .what-we-help-header span {
    font-size: 2.25rem;
  }

  .our-technologies {
    height: 11.25rem;
  }

  .our-technologies-item {
    padding: 0.5625rem 1.125rem 0.6875rem;
    font-size: 0.9375rem;
  }

  .backend {
    left: 58%;
  }

  .learn-about-text-container {
    gap: 0.875rem;
  }

  .project-header {
    white-space: normal;
  }

  .email-container {
    gap: 0.625rem;
  }

  .email-address {
    font-size: clamp(1.25rem, 6vw, 2rem);
  }

  .curly-brace,
  .curly-brace-2 {
    font-size: 2rem;
  }
}

/* Small phones: 480px and below */
@media (max-width: 480px) {
  .middle-header-1,
  .middle-header-2 {
    font-size: clamp(1.625rem, 7.5vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .hero-title {
    font-size: 2.125rem;
  }

  .hero-title-2 {
    font-size: 2.4375rem;
  }
}

/* Extra small phones: 380px and below */
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.9375rem;
  }

  .hero-title-2 {
    font-size: 2.1875rem;
  }
}

/* ── Tablet ─────────────────────────────────────── */
@media (max-width: 900px) {
  .what-we-help-container {
    /* min-height: unset; */
    padding: 0 24px;
    padding-top: clamp(200px, 45vw, 369px);
    /* room for abs upper text */
  }

  .what-we-help-container-upper-text {
    position: absolute;
    top: 6%;
    /* right: 24px; */
    /* left: 24px; */
    /* width: auto; */
  }

  .what-we-help-bottom-container {
    position: relative;
    bottom: auto;
    width: 100%;
  }

  .what-we-help-container-lower {
    /* flex-direction: column; */
    align-items: center;
    gap: 40px;
  }

  .learn-about-features-container {
    width: 100%;
  }

  /* .what-we-help-header {
    text-align: center;
  } */
}

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 480px) {
  .what-we-help-container {
    padding: 0 16px;
    padding-top: 450px;
  }

  .what-we-help-header {
    font-size: clamp(2rem, 11vw, 3.2rem);
  }

  .what-we-help-header span {
    font-size: clamp(2rem, 11vw, 3.2rem);
  }

  .our-technologies {
    height: 160px;
  }

  .our-technologies-item {
    font-size: 13px;
    padding: 8px 18px 10px;
  }
}

/* ── Tablet ─────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-gardient {
    height: 600px;
  }

  .blur-orange {
    top: 400px;
  }
}

@media (max-width: 800px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 54%;
    right: -6%;
  }

  .hero-image {
    position: relative;
    top: -90px;
    left: -30px;
    width: 280px;
  }

  .hero-title {
    font-size: 35px;
  }

  .hero-title-2 {
    font-size: 42px;
    margin-top: 0px;
  }
}

/* ── Tablet: curve + central vector ───────────── */
@media (max-width: 900px) {
  /* .curve-vector-container {
    margin-top: clamp(40px, 10vw, 100px);
  } */

  /* .curve-text-container {
 
    margin: clamp(16px, 3vw, 24px) 24px 0;
  } */

  .central-vector-container {
    width: calc(100% - 48px);
    margin-left: 24px;
    margin-right: 24px;
    margin-top: clamp(40px, 10vw, 100px);
  }

  .text-1 {
    left: 2%;
    top: 30%;
  }

  .text-2 {
    right: 6%;
    top: 74%;
  }

  .central-vector-main-text {
    top: 52%;
  }
}

/* 375px hero composition */
@media (max-width: 560px) {
  .header-container {
    padding: 0.875rem 0.75rem;
  }

  .language-selector {
    width: auto;
    gap: 0.625rem;
  }

  .language-option {
    font-size: 0.6875rem;
    letter-spacing: -0.01rem;
  }

  .logo img {
    width: 8rem;
    height: 2.285rem;
  }

  .hero {
    min-height: 45.75rem;
    padding: 5.125rem 0.75rem 5.25rem;
  }

  .hero-content-wrapper {
    gap: 0;
    padding-top: 0;
  }

  .hero-content {
    max-width: none;
  }

  .hero-title {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.025rem;
  }

  .hero-title-2 {
    max-width: 13.375rem;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: -0.0625rem;
  }

  .hero-description {
    width: min(100%, 14rem);
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: -0.0125rem;
  }

  .hero-orbit-wrapper {
    min-height: 17.5rem;
    margin-top: 1.375rem;
  }

  .hero-orbit {
    width: 118%;
    top: -0.187rem;
    left: 0%;
  }

  .hero-image {
    width: 175px;
    top: -2.7rem;
    left: 37%;
    transform: translateX(-50%);
    height: 175px;
  }

  .hero-top-text {
    font-size: 0.475rem;
  }

  .hero-email {
    font-size: 18px;
    margin-top: 30px;
  }

  .hero-button {
    width: 11.25rem;
    padding: 0.4rem 0rem;
    font-size: 0.5rem;
    width: 100%;
    max-width: 6.6rem;
    border-radius: 5px;
    margin-top: 5px;
  }

  .what-we-help-container {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .central-vector-container {
    width: calc(100% - 2rem);
    margin-right: 1rem;
    margin-left: 1rem;
  }

  .contact-language-container {
    left: 1rem;
    right: 1rem;
    flex-direction: column-reverse;
    gap: 0.375rem;
    text-align: center;
  }

  .contact-language-option,
  .contact-language-option-2 {
    margin: 0;
  }

  .contact-language-option-2 {
    position: static;
  }
}

@media (max-width: 480px) {
  .hero-top-text {
    position: absolute;
    top: 36rem;
    right: auto;
    left: 50%;
    width: min(15.25rem, calc(100vw - 3rem));
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.35;
    letter-spacing: -0.0125rem;
    z-index: 3;
  }

  .hero-email {
    position: absolute;
    top: 39.25rem;
    right: 0;
    left: 0;
    margin: 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.0125rem;
    z-index: 3;
  }

  .hero-button {
    position: absolute;
    top: 57rem;
    left: 50%;
    box-sizing: border-box;
    width: 10.75rem;
    max-width: none;
    min-height: 3rem;
    margin: 0;
    padding: 0.875rem 1rem;
    transform: translateX(-50%);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: -0.0125rem;
    z-index: 3;
  }
}

@media (max-width: 1439px) {
  .main-container {
    --hero-gradient-height: clamp(
      900px,
      calc(900px + (1440px - 100vw) * 0.42),
      1180px
    );
    --blur-orange-top: calc(
      var(--hero-gradient-height) - clamp(170px, 16vw, 220px)
    );
    --blur-orange-height: clamp(
      400px,
      calc(400px + (1440px - 100vw) * 0.08),
      460px
    );
    --section-blur-width: clamp(1100px, 170vw, 2200px);
  }

  /* .hero-gardient {
    height: var(--hero-gradient-height);
  }

  .blur-orange {
    top: var(--blur-orange-top);
    height: var(--blur-orange-height);
  } */

  .blur-yellow,
  .blur-pink,
  .blur-blue,
  .blur-pink2,
  .blur-gray,
  .blur-yellow2 {
    display: none;
  }

  .middle-header-container,
  .curve-vector-container,
  .central-vector-container,
  .what-we-help-container,
  .about-container,
  .project-header-container,
  .contact-container {
    isolation: isolate;
  }

  .curve-vector-container::before,
  .central-vector-container::before,
  .what-we-help-container::before,
  .about-container::before,
  .project-header-container::before,
  .contact-container::before {
    content: "";
    position: absolute;
    left: 50%;
    width: var(--section-blur-width);
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    filter: blur(142px);
  }

  .curve-vector-container::before {
    top: clamp(-10px, 5vw, 60px);
    height: clamp(240px, 26vw, 360px);
    opacity: 0.6;
    background: #ffb34f;
  }

  .central-vector-container::before {
    top: 4%;
    height: clamp(240px, 28vw, 380px);
    opacity: 0.6;
    background: #f9d5ea;
  }

  .what-we-help-container::before {
    top: clamp(40px, 15vw, 140px);
    height: clamp(440px, 70vw, 760px);
    background: #74b4fa;
  }

  .about-container::before {
    top: clamp(110px, 70vw, 472px);
    height: clamp(320px, 36vw, 560px);
    opacity: 0.6;
    background: #f9d5ea;
  }

  .project-header-container::before {
    top: clamp(10px, 4vw, 60px);
    height: clamp(240px, 22vw, 380px);
    background: #b8bec8;
  }

  .contact-container::before {
    bottom: -120px;
    height: clamp(300px, 30vw, 500px);
    opacity: 0.6;
    background: #ffb34f;
  }
}

@media (max-width: 744px) {
  /* .main-container {
    --hero-gradient-height: clamp(780px, 130vw, 980px);
    --section-blur-width: 190vw;
  } */

  .curve-vector-container::before {
    top: 0;
    height: clamp(220px, 34vw, 300px);
  }

  .central-vector-container::before {
    top: 10%;
    height: clamp(220px, 34vw, 320px);
  }

  .what-we-help-container::before {
    top: clamp(80px, 16vw, 140px);
    height: clamp(360px, 56vw, 560px);
  }

  .about-container::before {
    top: clamp(90px, 14vw, 140px);
    height: clamp(260px, 42vw, 420px);
  }

  .project-header-container::before {
    top: 0;
    height: clamp(220px, 34vw, 320px);
  }

  .contact-container::before {
    bottom: -100px;
    height: clamp(260px, 42vw, 420px);
  }
}

@media (max-width: 480px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 120%;
    right: 18%;
  }

  .hero-orbit-wrapper {
    min-height: 17.5rem;
    margin-top: 27.375rem;
  }

  .hero-title {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.025rem;
  }

  .hero-title-2 {
    max-width: 100%;
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: -0.0625rem;
  }

  .hero-description {
    width: min(100%, 20rem);
    margin-top: 0.875rem;
    font-size: 1rem;
    line-height: 1.45;
    letter-spacing: -0.0125rem;
  }

  .hero-image {
    width: clamp(220px, 96vw, 400px);
    height: clamp(220px, 96vw, 400px);
    top: clamp(-10rem, -40vw, -3rem);
    left: clamp(50%, 72vw, 64%);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .hero-gardient {
    height: 900px;
  }

  .blur-orange {
    position: absolute;
    top: 700px;
    left: -40%;
    width: 200%;
    height: 400px;
    z-index: 0;
    background: #f5b799;
    filter: blur(80px);
  }

  .blur-orange {
    top: 700px;
  }

  .hero-top-text {
    position: absolute;
    top: 50rem;
    right: auto;
    left: 50%;
    width: min(20.25rem, calc(100vw - 3rem));
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--Black, #23252a);
    text-align: center;
    font-family: "Ivar Text";
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.6px;
  }

  .hero-email {
    position: absolute;
    top: 55rem;
    right: 0;
    left: 0;
    margin: 0;
    text-align: center;
    z-index: 3;
    color: var(--Black, #23252a);
    font-family: "Work Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .hero-button {
    position: absolute;
    top: 57rem;
    left: 50%;
    box-sizing: border-box;
    width: 10.75rem;
    max-width: none;
    min-height: 3rem;
    margin: 0;
    padding: 0.875rem 1rem;
    transform: translateX(-50%);
    border-radius: 0.5rem;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.0125rem;
    z-index: 3;
  }

  .hero {
    min-height: 51rem;
    padding: 5.125rem 0.75rem 5.25rem;
  }

  .middle-header-container {
    padding-top: 12rem;
  }

  .blur-orange {
    top: 650px;
  }

  .middle-header-1,
  .middle-header-2 {
    font-size: clamp(1.625rem, 14vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .curve-media {
    position: relative;
    width: 70rem;
    transform: rotate(15deg);
    left: -40%;
  }

  .curve-image-container {
    left: 25%;
    width: 12.875rem;
    transform: rotate(-15deg);
    top: 5%;
  }

  .curve-text-container {
    display: flex;
    width: clamp(260px, 33vw, 445px);
    width: clamp(150px, 89vw, 427px);
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 10vw, 40px);
    position: absolute;
    top: clamp(-110px, 60vw, 225px);
    right: clamp(20px, 16vw, 270px);
    right: calc(27% + 38 * ((100vw - 1920px) / 604));
    left: 5%;
    right: 5%;
  }

  .curve-text {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;
    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .curve-vector-container::before {
    top: clamp(-10px, 80vw, 200px);
    height: clamp(220px, 100vw, 500px);
  }

  .central-vector-container {
    width: calc(100% - 2rem);
    margin-right: 1rem;
    margin-left: 1rem;
    margin-top: 26rem;
  }

  .text-1 {
    left: 2%;
    top: 200%;
  }

  .text-2 {
    right: 2%;
    top: 250%;
  }

  .central-vector {
    position: absolute;
    inset: 0;
    width: 140%;
    height: 140%;
    transform: scaleY(-1) rotate(10deg);
    transform-origin: center;
    left: -20%;
  }

  .what-we-help-container::before {
    top: clamp(80px, 250vw, 800px);
    height: clamp(360px, 180vw, 800px);
  }

  .central-vector-container::before {
    top: 50%;
    height: clamp(220px, 225vw, 800px);
  }

  .central-vector-main-text {
    top: 70%;
  }

  .central-vector-main-text {
    width: clamp(220px, 80.7vw, 550px);
    color: var(--Black, #23252a);
    font-family: "Satoshi", sans-serif;
    font-size: clamp(20px, 9.1vw, 44px);
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 44.08px */
    letter-spacing: -0.76px;
    display: block;
    text-align: left;
  }

  .central-vector-main-span-text {
    color: var(--Black, #23252a);
    font-size: clamp(20px, 9.1vw, 44px);
    font-style: italic;
    font-family: "Ivar Text", serif;
    font-weight: 500;
    line-height: 116%;
    /* 44.08px */
    letter-spacing: -0.76px;
  }

  .what-we-help-container::before {
    top: clamp(80px, 250vw, 800px);
    height: clamp(360px, 180vw, 800px);
  }

  .what-we-help-bottom-container {
    position: relative;
    bottom: auto;
    width: 100%;
    top: 21rem;
  }

  .what-we-help-container-upper-text {
    width: clamp(150px, 89vw, 428px);
    left: 5%;
    right: 5%;
    top: 30%;
  }

  .what-we-help-container-lower {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .our-technologies {
    height: 16rem;
    width: 100%;
  }

  .our-technologies-item {
    display: inline-flex;
    padding: 16px 48px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    color: #23252a;
    font-family: "Ivar Text", serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.72px;
  }

  .web-mobile {
    transform: rotate(-35.664deg);
    left: -4%;
    top: 31%;
  }

  .cloud-devops {
    left: 3.2%;
    bottom: 0.4%;
  }

  .ai {
    left: 24%;
    top: 47%;
  }

  .backend {
    left: 48.5%;
    top: 62.9%;
    transform: rotate(36.998deg);
  }

  .about {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    color: #23252a;
    font-family: Satoshi, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 30rem;
  }

  .about-container::before {
    top: clamp(90px, 250vw, 750px);
    height: clamp(260px, 430vw, 1300px);
  }

  .project-header-container {
    margin-top: clamp(40px, 50vw, 188px);
  }

  .about-container {
    padding-top: clamp(24px, 6vw, 48px);
    padding-bottom: clamp(24px, 100vw, 375px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .project-header {
    font-family: "Ivar Text", serif;
    font-size: clamp(1.625rem, 17vw, 5rem);
    font-style: italic;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: clamp(-2px, -0.4vw, -6px);
    opacity: 0.4;
    background: linear-gradient(90deg, #ffa631 5.34%, #3e3e3e 112.4%);
    background-clip: border-box;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    padding-right: 0.12em;
    padding-bottom: 0.08em;
  }

  .hero-content-wrapper {
    gap: 0;
    padding-top: 20px;
  }

  .curve-company-name {
    color: #4b4d51;
    font-family: "Ivar Text", serif;
    font-size: clamp(18px, 6vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.03em;
  }

  .language-option {
    font-size: 16px;
  }

  .about-container {
    padding-top: clamp(20px, 5vw, 40px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header-container2 {
    justify-content: flex-start;
    left: 0%;
  }

  .about-header {
    padding-right: 0;
  }

  .header-title,
  .header-title2 {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.18;
  }

  .orbit-section {
    display: none;
  }

  /* Stacked vertical profile cards */
  .profiles-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    height: auto;
    padding-top: 125px;
    padding-bottom: 20px;
    width: 100%;
  }

  .profile-container3,
  .profile-container4 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  /* Orbit SVG curves behind each card */
  .profile-orbit-mobile {
    display: block;
    position: absolute;
    width: 95vw;
    left: 50%;
    transform: translateX(-50%);
    top: -15%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
  }

  .profile-container3 .profile-orbit-mobile {
    top: 19%;
  }

  .profile-container4 .profile-orbit-mobile {
    transform: translateX(-50%);
    transform-origin: center;
    top: -10%;
  }

  /* Photo card */
  .profile-card-img-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
  }

  .profile-image-container {
    width: 100%;
    height: auto;
    max-height: 358px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
  }

  .linkedin-badge {
    position: absolute;
    bottom: 14px;
    right: 12px;
    width: clamp(40px, 8vw, 56px);
    height: clamp(40px, 8vw, 56px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .linkedin-badge svg {
    width: 16px;
    height: 16px;
  }

  /* Name + role */
  .profile-info-container {
    z-index: 1;
    position: relative;
    padding-left: 2px;
  }

  .profile-info3 {
    gap: 4px;
  }

  .mission-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .profile-role {
    font-size: 12px;
    color: #757677;
  }

  /* Quote */
  .about-text-container {
    margin-top: 28px;
    width: 100%;
    padding-bottom: 28px;
  }

  .about-text-container p {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.45;
    letter-spacing: -0.02em;
  }

  .curve-highlight {
    font-size: clamp(18px, 2vw, 26px);
  }

  .central-vector-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .central-vector-span-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .what-we-help-container-upper-text p {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;

    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .header-title {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Medium */
    font-family: Satoshi;
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -0.8px;
  }

  .header-title2 {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Italic */
    font-family: "Ivar Text";
    font-size: 3rem;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -1.2px;
    text-align: right;
    margin-top: -12%;
  }

  .about-text-container p {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .mission-title {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .profile-role {
    color: var(--Light-gray-text, #757677);

    /* 📱Body/B2-Italic */
    font-family: "Ivar Text";
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .project-header-container {
    height: clamp(220px, 68vw, 505px);
  }

  .contact-text-container {
    height: clamp(220px, 68vw, 505px);
  }

  .project-header-container::before {
    top: 0;
    height: clamp(220px, 100vw, 400px);
  }

  .footer-svg {
    width: clamp(220px, 157vw, 700px);
    height: clamp(250px, 134vw, 550px);
    margin-left: clamp(-110px, -28vw, -50px);
    margin-right: clamp(-20px, -5vw, -50px);
  }

  .contact-container {
    height: clamp(340px, 140vw, 700px);
  }

  .contact-container::before {
    bottom: -100px;
    height: clamp(260px, 100vw, 525px);
  }

  .text-2 {
    right: 2%;
    top: 245%;
  }

  .curve-company-name {
    color: #4b4d51;
    font-family: "Ivar Text", serif;
    font-size: clamp(18px, 6vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.03em;
  }

  .learn-about-text-container p {
    font-size: 1.125rem;
  }

  .header-title-de {
    font-size: 35px;
  }

  .header-title2-de {
    font-size: 35px;
    text-align: left;
    margin-top: 0%;
  }

  .hero-orbit {
    position: absolute;
    width: 118%;
    height: 61%;
    top: 38%;
    left: 89%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-size: 35px;
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 21rem;
  }
}

@media (max-width: 460px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 120%;
    right: 18%;
  }

  .hero-orbit-wrapper {
    min-height: 17.5rem;
    margin-top: 27.375rem;
  }

  .hero-title {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.025rem;
  }

  .hero-title-2 {
    /* max-width: 16.375rem; */
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: -0.0625rem;
  }

  .hero-description {
    width: min(100%, 20rem);
    margin-top: 0.875rem;
    font-size: 1rem;
    line-height: 1.45;
    letter-spacing: -0.0125rem;
  }

  .hero-image {
    width: clamp(220px, 96vw, 400px);
    height: clamp(220px, 96vw, 400px);
    top: clamp(-10rem, -40vw, -3rem);
    left: clamp(50%, 72vw, 64%);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .hero-gardient {
    height: 900px;
  }

  .blur-orange {
    position: absolute;
    top: 700px;
    left: -40%;
    width: 200%;
    height: 400px;
    z-index: 0;
    background: #f5b799;
    filter: blur(80px);
  }

  .blur-orange {
    top: 700px;
  }

  .hero-top-text {
    position: absolute;
    top: 50rem;
    right: auto;
    left: 50%;
    width: min(20.25rem, calc(100vw - 3rem));
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--Black, #23252a);
    text-align: center;
    font-family: "Ivar Text";
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.6px;
  }

  .hero-email {
    position: absolute;
    top: 55rem;
    right: 0;
    left: 0;
    margin: 0;
    text-align: center;
    z-index: 3;
    color: var(--Black, #23252a);
    font-family: "Work Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .hero-button {
    position: absolute;
    top: 57rem;
    left: 50%;
    box-sizing: border-box;
    width: 10.75rem;
    max-width: none;
    min-height: 3rem;
    margin: 0;
    padding: 0.875rem 1rem;
    transform: translateX(-50%);
    border-radius: 0.5rem;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.0125rem;
    z-index: 3;
  }

  .hero {
    min-height: 51rem;
    padding: 5.125rem 0.75rem 5.25rem;
  }

  .middle-header-container {
    padding-top: 12rem;
  }

  .blur-orange {
    top: 650px;
  }

  .middle-header-1,
  .middle-header-2 {
    font-size: clamp(1.625rem, 14vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .curve-media {
    position: relative;
    width: 70rem;
    transform: rotate(15deg);
    left: -40%;
  }

  .curve-image-container {
    left: 25%;
    width: 12.875rem;
    transform: rotate(-15deg);
    top: 5%;
  }

  .curve-text-container {
    display: flex;
    width: clamp(260px, 33vw, 445px);
    width: clamp(150px, 89vw, 410px);
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 10vw, 40px);
    position: absolute;
    top: clamp(-110px, 60vw, 225px);
    right: clamp(20px, 16vw, 270px);
    right: calc(27% + 38 * ((100vw - 1920px) / 604));
    left: 5%;
    right: 5%;
  }

  .curve-text {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;
    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .curve-vector-container::before {
    top: clamp(-10px, 80vw, 200px);
    height: clamp(220px, 100vw, 500px);
  }

  .central-vector-container {
    width: calc(100% - 2rem);
    margin-right: 1rem;
    margin-left: 1rem;
    margin-top: 26rem;
  }

  .text-1 {
    left: 2%;
    top: 200%;
  }

  .text-2 {
    right: 2%;
    top: 250%;
  }

  .central-vector {
    position: absolute;
    inset: 0;
    width: 140%;
    height: 140%;
    transform: scaleY(-1) rotate(10deg);
    transform-origin: center;
    left: -20%;
  }

  .what-we-help-container::before {
    top: clamp(80px, 250vw, 800px);
    height: clamp(360px, 180vw, 800px);
  }

  .central-vector-container::before {
    top: 50%;
    height: clamp(220px, 225vw, 800px);
  }

  .central-vector-main-text {
    top: 70%;
  }

  .central-vector-main-text {
    width: clamp(220px, 80.7vw, 550px);
    font-size: clamp(20px, 8.6vw, 37px);
    color: var(--Black, #23252a);
    font-size: clamp(20px, 9.1vw, 44px);
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 44.08px */
    letter-spacing: -0.76px;
    display: block;
    text-align: left;
  }

  .central-vector-main-span-text {
    color: var(--Black, #23252a);
    font-size: clamp(20px, 9.1vw, 44px);
    font-weight: 500;
    line-height: 116%;
    /* 44.08px */
    letter-spacing: -0.76px;
  }

  .what-we-help-container::before {
    top: clamp(80px, 250vw, 800px);
    height: clamp(360px, 180vw, 800px);
  }

  .what-we-help-bottom-container {
    position: relative;
    bottom: auto;
    width: 100%;
    top: 18rem;
  }

  .what-we-help-container-upper-text {
    width: clamp(150px, 89vw, 410px);
    left: 5%;
    right: 5%;
    top: 30%;
  }

  .what-we-help-container-lower {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .our-technologies {
    height: 16rem;
    width: 100%;
  }

  .our-technologies-item {
    display: inline-flex;
    padding: 16px 48px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    color: #23252a;
    font-family: "Ivar Text", serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.72px;
  }

  .web-mobile {
    transform: rotate(-35.664deg);
    left: -4%;
    top: 31%;
  }

  .cloud-devops {
    left: 3.2%;
    bottom: 0.4%;
  }

  .ai {
    left: 25%;
    top: 47%;
  }

  .backend {
    left: 50.5%;
    top: 62.9%;
    transform: rotate(36.998deg);
  }

  .about {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    color: #23252a;
    font-family: Satoshi, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 30rem;
  }

  .about-container::before {
    top: clamp(90px, 250vw, 750px);
    height: clamp(260px, 430vw, 1300px);
  }

  .project-header-container {
    margin-top: clamp(40px, 50vw, 188px);
  }

  .about-container {
    padding-top: clamp(24px, 6vw, 48px);
    padding-bottom: clamp(24px, 100vw, 375px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .project-header {
    font-family: "Ivar Text", serif;
    font-size: clamp(1.625rem, 17vw, 5rem);
    font-style: italic;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: clamp(-2px, -0.4vw, -6px);
    opacity: 0.4;
    background: linear-gradient(90deg, #ffa631 5.34%, #3e3e3e 112.4%);
    background-clip: border-box;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    padding-right: 0.12em;
    padding-bottom: 0.08em;
  }

  .hero-content-wrapper {
    gap: 0;
    padding-top: 20px;
  }

  .curve-company-name {
    color: #4b4d51;
    font-family: "Ivar Text", serif;
    font-size: clamp(18px, 6vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.03em;
  }

  .language-option {
    font-size: 16px;
  }

  .about-container {
    padding-top: clamp(20px, 5vw, 40px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header-container2 {
    justify-content: flex-start;
    left: 0%;
  }

  .about-header {
    padding-right: 0;
  }

  .header-title,
  .header-title2 {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.18;
  }

  .orbit-section {
    display: none;
  }

  /* Stacked vertical profile cards */
  .profiles-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    height: auto;
    padding-top: 100px;
    padding-bottom: 20px;
    width: 100%;
  }

  .profile-container3,
  .profile-container4 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  /* Orbit SVG curves behind each card */
  .profile-orbit-mobile {
    display: block;
    position: absolute;
    width: 95vw;
    left: 50%;
    transform: translateX(-50%);
    top: -15%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
  }

  .profile-container3 .profile-orbit-mobile {
    top: 23%;
  }

  .profile-container4 .profile-orbit-mobile {
    transform: translateX(-50%);
    transform-origin: center;
    top: -10%;
  }

  /* Photo card */
  .profile-card-img-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
  }

  .profile-image-container {
    width: 100%;
    height: auto;
    max-height: 358px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
  }

  .linkedin-badge {
    position: absolute;
    bottom: 14px;
    right: 12px;
    width: clamp(40px, 8vw, 56px);
    height: clamp(40px, 8vw, 56px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .linkedin-badge svg {
    width: 16px;
    height: 16px;
  }

  /* Name + role */
  .profile-info-container {
    z-index: 1;
    position: relative;
    padding-left: 2px;
  }

  .profile-info3 {
    gap: 4px;
  }

  .mission-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .profile-role {
    font-size: 12px;
    color: #757677;
  }

  /* Quote */
  .about-text-container {
    margin-top: 28px;
    width: 100%;
    padding-bottom: 28px;
  }

  .about-text-container p {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.45;
    letter-spacing: -0.02em;
  }

  .curve-highlight {
    font-size: clamp(18px, 2vw, 26px);
  }

  .central-vector-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .central-vector-span-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .what-we-help-container-upper-text p {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;

    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .header-title {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Medium */
    font-family: Satoshi;
    font-size: 2.9rem;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -0.8px;
  }

  .header-title2 {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Italic */
    font-family: "Ivar Text";
    font-size: 2.9rem;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -1.2px;
    text-align: right;
    margin-top: -12%;
  }

  .about-text-container p {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .mission-title {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .profile-role {
    color: var(--Light-gray-text, #757677);

    /* 📱Body/B2-Italic */
    font-family: "Ivar Text";
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .project-header-container {
    height: clamp(220px, 68vw, 505px);
  }

  .contact-text-container {
    height: clamp(220px, 68vw, 505px);
  }

  .project-header-container::before {
    top: 0;
    height: clamp(220px, 100vw, 400px);
  }

  .footer-svg {
    width: clamp(220px, 157vw, 680px);
    height: clamp(250px, 134vw, 550px);
    margin-left: clamp(-110px, -28vw, -50px);
    margin-right: clamp(-20px, -5vw, -50px);
  }

  .contact-container {
    height: clamp(340px, 140vw, 700px);
  }

  .contact-container::before {
    bottom: -100px;
    height: clamp(260px, 100vw, 525px);
  }

  .text-2 {
    right: 2%;
    top: 245%;
  }

  .curve-company-name {
    color: #4b4d51;
    font-family: "Ivar Text", serif;
    font-size: clamp(18px, 6vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.03em;
  }

  .header-title-de {
    font-size: 35px;
  }

  .header-title2-de {
    font-size: 35px;
    text-align: left;
    margin-top: 0%;
  }

  .hero-orbit {
    position: absolute;
    width: 118%;
    height: 61%;
    top: 38%;
    left: 88%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-size: 35px;
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 22rem;
  }
}

@media (max-width: 440px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 120%;
    right: 18%;
  }

  .hero-orbit-wrapper {
    min-height: 17.5rem;
    margin-top: 27.375rem;
  }

  .hero-title {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.025rem;
  }

  .hero-title-2 {
    /* max-width: 16.375rem; */
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: -0.0625rem;
  }

  .hero-description {
    width: min(100%, 20rem);
    margin-top: 0.875rem;
    font-size: 1rem;
    line-height: 1.45;
    letter-spacing: -0.0125rem;
  }

  .hero-image {
    width: clamp(220px, 96vw, 400px);
    height: clamp(220px, 96vw, 400px);
    top: clamp(-10rem, -40vw, -3rem);
    left: clamp(50%, 74vw, 64%);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .hero-gardient {
    height: 900px;
  }

  .blur-orange {
    position: absolute;
    top: 700px;
    left: -40%;
    width: 200%;
    height: 400px;
    z-index: 0;
    background: #f5b799;
    filter: blur(80px);
  }

  .blur-orange {
    top: 700px;
  }

  .hero-top-text {
    position: absolute;
    top: 50rem;
    right: auto;
    left: 50%;
    width: min(20.25rem, calc(100vw - 3rem));
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--Black, #23252a);
    text-align: center;
    font-family: "Ivar Text";
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.6px;
  }

  .hero-email {
    position: absolute;
    top: 55rem;
    right: 0;
    left: 0;
    margin: 0;
    text-align: center;
    z-index: 3;
    color: var(--Black, #23252a);
    font-family: "Work Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .hero-button {
    position: absolute;
    top: 57rem;
    left: 50%;
    box-sizing: border-box;
    width: 10.75rem;
    max-width: none;
    min-height: 3rem;
    margin: 0;
    padding: 0.875rem 1rem;
    transform: translateX(-50%);
    border-radius: 0.5rem;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.0125rem;
    z-index: 3;
  }

  .hero {
    min-height: 51rem;
    padding: 5.125rem 0.75rem 5.25rem;
  }

  .middle-header-container {
    padding-top: 12rem;
  }

  .blur-orange {
    top: 650px;
  }

  .middle-header-1,
  .middle-header-2 {
    font-size: clamp(1.625rem, 14vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .curve-media {
    position: relative;
    width: 70rem;
    transform: rotate(15deg);
    left: -40%;
  }

  .curve-image-container {
    left: 25%;
    width: 12.875rem;
    transform: rotate(-15deg);
    top: 5%;
  }

  .curve-text-container {
    display: flex;
    width: clamp(260px, 33vw, 445px);
    width: clamp(150px, 89vw, 392px);
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 10vw, 40px);
    position: absolute;
    top: clamp(-110px, 60vw, 225px);
    right: clamp(20px, 16vw, 270px);
    right: calc(27% + 38 * ((100vw - 1920px) / 604));
    left: 5%;
    right: 5%;
  }

  .curve-text {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;
    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .curve-vector-container::before {
    top: clamp(-10px, 80vw, 200px);
    height: clamp(220px, 100vw, 500px);
  }

  .central-vector-container {
    width: calc(100% - 2rem);
    margin-right: 1rem;
    margin-left: 1rem;
    margin-top: 26rem;
  }

  .text-1 {
    left: 2%;
    top: 200%;
  }

  .text-2 {
    right: 2%;
    top: 250%;
  }

  .central-vector {
    position: absolute;
    inset: 0;
    width: 140%;
    height: 140%;
    transform: scaleY(-1) rotate(10deg);
    transform-origin: center;
    left: -20%;
  }

  .what-we-help-container::before {
    top: clamp(80px, 250vw, 800px);
    height: clamp(360px, 180vw, 800px);
  }

  .central-vector-container::before {
    top: 50%;
    height: clamp(220px, 225vw, 800px);
  }

  .central-vector-main-text {
    top: 70%;
  }

  .central-vector-main-text {
    width: clamp(220px, 80.7vw, 550px);
    font-size: clamp(20px, 8.6vw, 37px);
    color: var(--Black, #23252a);
    font-size: clamp(20px, 9.1vw, 44px);
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 44.08px */
    letter-spacing: -0.76px;
    display: block;
    text-align: left;
  }

  .central-vector-main-span-text {
    font-size: clamp(20px, 8.6vw, 37px);
    color: var(--Black, #23252a);
    font-size: clamp(20px, 9.1vw, 44px);
    font-weight: 500;
    line-height: 116%;
    /* 44.08px */
    letter-spacing: -0.76px;
  }

  .what-we-help-container::before {
    top: clamp(80px, 250vw, 800px);
    height: clamp(360px, 180vw, 800px);
  }

  .what-we-help-bottom-container {
    position: relative;
    bottom: auto;
    width: 100%;
    top: 18rem;
  }

  .what-we-help-container-upper-text {
    width: clamp(150px, 89vw, 392px);
    left: 5%;
    right: 5%;
    top: 30%;
  }

  .what-we-help-container-lower {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .our-technologies {
    height: 16rem;
    width: 100%;
  }

  .our-technologies-item {
    display: inline-flex;
    padding: 16px 48px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    color: #23252a;
    font-family: "Ivar Text", serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.72px;
  }

  .web-mobile {
    transform: rotate(-35.664deg);
    left: -4%;
    top: 31%;
  }

  .cloud-devops {
    left: 3.2%;
    bottom: 0.4%;
  }

  .ai {
    left: 27%;
    top: 47%;
  }

  .backend {
    left: 53.5%;
    top: 63.9%;
    transform: rotate(36.998deg);
  }

  .about {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    color: #23252a;
    font-family: Satoshi, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 30rem;
  }

  .about-container::before {
    top: clamp(90px, 250vw, 750px);
    height: clamp(260px, 430vw, 1300px);
  }

  .project-header-container {
    margin-top: clamp(40px, 50vw, 188px);
  }

  .about-container {
    padding-top: clamp(24px, 6vw, 48px);
    padding-bottom: clamp(24px, 100vw, 375px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .project-header {
    font-family: "Ivar Text", serif;
    font-size: clamp(1.625rem, 17vw, 5rem);
    font-style: italic;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: clamp(-2px, -0.4vw, -6px);
    opacity: 0.4;
    background: linear-gradient(90deg, #ffa631 5.34%, #3e3e3e 112.4%);
    background-clip: border-box;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    padding-right: 0.12em;
    padding-bottom: 0.08em;
  }

  .hero-content-wrapper {
    gap: 0;
    padding-top: 20px;
  }

  .curve-company-name {
    color: #4b4d51;
    font-family: "Ivar Text", serif;
    font-size: clamp(18px, 6vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.03em;
  }

  .language-option {
    font-size: 16px;
  }

  .about-container {
    padding-top: clamp(20px, 5vw, 40px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header-container2 {
    justify-content: flex-start;
    left: 0%;
  }

  .about-header {
    padding-right: 0;
  }

  .header-title,
  .header-title2 {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.18;
  }

  .orbit-section {
    display: none;
  }

  /* Stacked vertical profile cards */
  .profiles-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    height: auto;
    padding-top: 65px;
    padding-bottom: 20px;
    width: 100%;
  }

  .profile-container3,
  .profile-container4 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  /* Orbit SVG curves behind each card */
  .profile-orbit-mobile {
    display: block;
    position: absolute;
    width: 95vw;
    left: 50%;
    transform: translateX(-50%);
    top: -15%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
  }

  .profile-container3 .profile-orbit-mobile {
    top: 25%;
  }

  .profile-container4 .profile-orbit-mobile {
    transform: translateX(-50%);
    transform-origin: center;
    top: -10%;
  }

  /* Photo card */
  .profile-card-img-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
  }

  .profile-image-container {
    width: 100%;
    height: auto;
    max-height: 358px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
  }

  .linkedin-badge {
    position: absolute;
    bottom: 14px;
    right: 12px;
    width: clamp(40px, 8vw, 56px);
    height: clamp(40px, 8vw, 56px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .linkedin-badge svg {
    width: 16px;
    height: 16px;
  }

  /* Name + role */
  .profile-info-container {
    z-index: 1;
    position: relative;
    padding-left: 2px;
  }

  .profile-info3 {
    gap: 4px;
  }

  .mission-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .profile-role {
    font-size: 12px;
    color: #757677;
  }

  /* Quote */
  .about-text-container {
    margin-top: 28px;
    width: 100%;
    padding-bottom: 28px;
  }

  .about-text-container p {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.45;
    letter-spacing: -0.02em;
  }

  .curve-highlight {
    font-size: clamp(18px, 2vw, 26px);
  }

  .central-vector-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .central-vector-span-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .what-we-help-container-upper-text p {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;

    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .header-title {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Medium */
    font-family: Satoshi;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -0.8px;
  }

  .header-title2 {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Italic */
    font-family: "Ivar Text";
    font-size: 2.8rem;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -1.2px;
    text-align: right;
    margin-top: -12%;
  }

  .about-text-container p {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .mission-title {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .profile-role {
    color: var(--Light-gray-text, #757677);

    /* 📱Body/B2-Italic */
    font-family: "Ivar Text";
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .project-header-container {
    height: clamp(220px, 68vw, 505px);
  }

  .contact-text-container {
    height: clamp(220px, 68vw, 505px);
  }

  .project-header-container::before {
    top: 0;
    height: clamp(220px, 100vw, 400px);
  }

  .footer-svg {
    width: clamp(220px, 157vw, 650px);
    height: clamp(250px, 134vw, 550px);
    margin-left: clamp(-110px, -28vw, -50px);
    margin-right: clamp(-20px, -5vw, -50px);
  }

  .contact-container {
    height: clamp(340px, 140vw, 700px);
  }

  .contact-container::before {
    bottom: -100px;
    height: clamp(260px, 100vw, 525px);
  }

  .text-2 {
    right: 2%;
    top: 245%;
  }

  .curve-company-name {
    color: #4b4d51;
    font-family: "Ivar Text", serif;
    font-size: clamp(18px, 6vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.03em;
  }

  .header-title-de {
    font-size: 35px;
  }

  .header-title2-de {
    font-size: 35px;
    text-align: left;
    margin-top: 0%;
  }

  .hero-orbit {
    position: absolute;
    width: 127%;
    height: 55%;
    top: 42%;
    left: 92%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 22rem;
  }
}

/* ── About container: 375px and below ────────────── */
@media (max-width: 420px) {
  .hero-orbit-wrapper {
    position: absolute;
    width: 120%;
    right: 18%;
  }

  .hero-orbit-wrapper {
    min-height: 17.5rem;
    margin-top: 27.375rem;
  }

  .hero-title {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.025rem;
  }

  .hero-title-2 {
    /* max-width: 16.375rem; */
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: -0.0625rem;
  }

  .hero-description {
    width: min(100%, 20rem);
    margin-top: 0.875rem;
    font-size: 1rem;
    line-height: 1.45;
    letter-spacing: -0.0125rem;
  }

  .hero-image {
    width: clamp(220px, 96vw, 400px);
    height: clamp(220px, 96vw, 400px);
    top: clamp(-10rem, -40vw, -3rem);
    left: clamp(50%, 76vw, 64%);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .hero-gardient {
    height: 900px;
  }

  .blur-orange {
    position: absolute;
    top: 700px;
    left: -40%;
    width: 200%;
    height: 400px;
    z-index: 0;
    background: #f5b799;
    filter: blur(80px);
  }

  .blur-orange {
    top: 700px;
  }

  .hero-top-text {
    position: absolute;
    top: 50rem;
    right: auto;
    left: 50%;
    width: min(20.25rem, calc(100vw - 3rem));
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--Black, #23252a);
    text-align: center;
    font-family: "Ivar Text";
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.6px;
  }

  .hero-email {
    position: absolute;
    top: 55rem;
    right: 0;
    left: 0;
    margin: 0;
    text-align: center;
    z-index: 3;
    color: var(--Black, #23252a);
    font-family: "Work Sans";
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .hero-button {
    position: absolute;
    top: 57rem;
    left: 50%;
    box-sizing: border-box;
    width: 10.75rem;
    max-width: none;
    min-height: 3rem;
    margin: 0;
    padding: 0.875rem 1rem;
    transform: translateX(-50%);
    border-radius: 0.5rem;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.0125rem;
    z-index: 3;
  }

  .hero {
    min-height: 51rem;
    padding: 5.125rem 0.75rem 5.25rem;
  }

  .middle-header-container {
    padding-top: 12rem;
  }

  .blur-orange {
    top: 650px;
  }

  .middle-header-1,
  .middle-header-2 {
    font-size: clamp(1.625rem, 14vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .curve-media {
    position: relative;
    width: 70rem;
    transform: rotate(15deg);
    left: -40%;
  }

  .curve-image-container {
    left: 25%;
    width: 12.875rem;
    transform: rotate(-15deg);
    top: 5%;
  }

  .curve-text-container {
    display: flex;
    width: clamp(260px, 33vw, 445px);
    width: clamp(150px, 89vw, 365px);
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 10vw, 40px);
    position: absolute;
    top: clamp(-110px, 60vw, 225px);
    right: clamp(20px, 16vw, 270px);
    right: calc(27% + 38 * ((100vw - 1920px) / 604));
    left: 5%;
    right: 5%;
  }

  .curve-text {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;
    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .curve-vector-container::before {
    top: clamp(-10px, 80vw, 200px);
    height: clamp(220px, 100vw, 500px);
  }

  .central-vector-container {
    width: calc(100% - 2rem);
    margin-right: 1rem;
    margin-left: 1rem;
    margin-top: 26rem;
  }

  .text-1 {
    left: 2%;
    top: 200%;
  }

  .text-2 {
    right: 2%;
    top: 250%;
  }

  .central-vector {
    position: absolute;
    inset: 0;
    width: 140%;
    height: 140%;
    transform: scaleY(-1) rotate(10deg);
    transform-origin: center;
    left: -20%;
  }

  .what-we-help-container::before {
    top: clamp(80px, 250vw, 800px);
    height: clamp(360px, 180vw, 800px);
  }

  .central-vector-container::before {
    top: 50%;
    height: clamp(220px, 225vw, 800px);
  }

  .central-vector-main-text {
    top: 70%;
  }

  .central-vector-main-text {
    width: clamp(220px, 80.7vw, 550px);
    font-size: clamp(20px, 8.6vw, 37px);
    color: var(--Black, #23252a);
    font-size: clamp(20px, 9.1vw, 44px);
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 44.08px */
    letter-spacing: -0.76px;
    display: block;
    text-align: left;
  }

  .central-vector-main-span-text {
    font-size: clamp(20px, 8.6vw, 37px);
    color: var(--Black, #23252a);
    font-size: clamp(20px, 9.1vw, 44px);
    font-weight: 500;
    line-height: 116%;
    /* 44.08px */
    letter-spacing: -0.76px;
  }

  .what-we-help-container::before {
    top: clamp(80px, 250vw, 800px);
    height: clamp(360px, 180vw, 800px);
  }

  .what-we-help-bottom-container {
    position: relative;
    bottom: auto;
    width: 100%;
    top: 18rem;
  }

  .what-we-help-container-upper-text {
    width: clamp(150px, 89vw, 367px);
    left: 5%;
    right: 5%;
    top: 30%;
  }

  .what-we-help-container-lower {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .our-technologies {
    height: 16rem;
    width: 100%;
  }

  .our-technologies-item {
    display: inline-flex;
    padding: 16px 48px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    color: #23252a;
    font-family: "Ivar Text", serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.72px;
  }

  .web-mobile {
    transform: rotate(-35.664deg);
    left: -4%;
    top: 31%;
  }

  .cloud-devops {
    left: 3.2%;
    bottom: 0.4%;
  }

  .ai {
    left: 28%;
    top: 47%;
  }

  .backend {
    left: 56.5%;
    top: 63.9%;
    transform: rotate(36.998deg);
  }

  .about {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    color: #23252a;
    font-family: Satoshi, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 30rem;
  }

  .about-container::before {
    top: clamp(90px, 250vw, 750px);
    height: clamp(260px, 430vw, 1300px);
  }

  .project-header-container {
    margin-top: clamp(40px, 50vw, 188px);
  }

  .about-container {
    padding-top: clamp(24px, 6vw, 48px);
    padding-bottom: clamp(24px, 100vw, 375px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .project-header {
    font-family: "Ivar Text", serif;
    font-size: clamp(1.625rem, 17vw, 5rem);
    font-style: italic;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: clamp(-2px, -0.4vw, -6px);
    opacity: 0.4;
    background: linear-gradient(90deg, #ffa631 5.34%, #3e3e3e 112.4%);
    background-clip: border-box;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    padding-right: 0.12em;
    padding-bottom: 0.08em;
  }

  .hero-content-wrapper {
    gap: 0;
    padding-top: 20px;
  }

  .curve-company-name {
    color: #4b4d51;
    font-family: "Ivar Text", serif;
    font-size: clamp(18px, 6vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.03em;
  }

  .language-option {
    font-size: 16px;
  }

  .about-container {
    padding-top: clamp(20px, 5vw, 40px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header-container2 {
    justify-content: flex-start;
    left: 0%;
  }

  .about-header {
    padding-right: 0;
  }

  .header-title,
  .header-title2 {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.18;
  }

  .orbit-section {
    display: none;
  }

  /* Stacked vertical profile cards */
  .profiles-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    height: auto;
    padding-top: 65px;
    padding-bottom: 20px;
    width: 100%;
  }

  .profile-container3,
  .profile-container4 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  /* Orbit SVG curves behind each card */
  .profile-orbit-mobile {
    display: block;
    position: absolute;
    width: 95vw;
    left: 50%;
    transform: translateX(-50%);
    top: -15%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
  }

  .profile-container3 .profile-orbit-mobile {
    top: 30%;
  }

  .profile-container4 .profile-orbit-mobile {
    transform: translateX(-50%);
    transform-origin: center;
    top: -10%;
  }

  /* Photo card */
  .profile-card-img-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
  }

  .profile-image-container {
    width: 100%;
    height: auto;
    max-height: 358px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
  }

  .linkedin-badge {
    position: absolute;
    bottom: 14px;
    right: 12px;
    width: clamp(40px, 8vw, 56px);
    height: clamp(40px, 8vw, 56px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .linkedin-badge svg {
    width: 16px;
    height: 16px;
  }

  /* Name + role */
  .profile-info-container {
    z-index: 1;
    position: relative;
    padding-left: 2px;
  }

  .profile-info3 {
    gap: 4px;
  }

  .mission-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .profile-role {
    font-size: 12px;
    color: #757677;
  }

  /* Quote */
  .about-text-container {
    margin-top: 28px;
    width: 100%;
    padding-bottom: 28px;
  }

  .about-text-container p {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.45;
    letter-spacing: -0.02em;
  }

  .curve-highlight {
    font-size: clamp(18px, 2vw, 26px);
  }

  .central-vector-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .central-vector-span-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .what-we-help-container-upper-text p {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;

    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .header-title {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Medium */
    font-family: Satoshi;
    font-size: 2.7rem;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -0.8px;
  }

  .header-title2 {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Italic */
    font-family: "Ivar Text";
    font-size: 2.7rem;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -1.2px;
    text-align: right;
    margin-top: -12%;
  }

  .about-text-container p {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .mission-title {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .profile-role {
    color: var(--Light-gray-text, #757677);

    /* 📱Body/B2-Italic */
    font-family: "Ivar Text";
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .project-header-container {
    height: clamp(220px, 68vw, 505px);
  }

  .contact-text-container {
    height: clamp(220px, 68vw, 505px);
  }

  .project-header-container::before {
    top: 0;
    height: clamp(220px, 100vw, 400px);
  }

  .footer-svg {
    width: clamp(220px, 155vw, 631px);
    height: clamp(250px, 134vw, 550px);
    margin-left: clamp(-110px, -28vw, -50px);
    margin-right: clamp(-20px, -5vw, -50px);
  }

  .contact-container {
    height: clamp(340px, 140vw, 700px);
  }

  .contact-container::before {
    bottom: -100px;
    height: clamp(260px, 100vw, 525px);
  }

  .text-2 {
    right: 2%;
    top: 245%;
  }

  .curve-company-name {
    color: #4b4d51;
    font-family: "Ivar Text", serif;
    font-size: clamp(18px, 6vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    letter-spacing: -0.03em;
  }

  .header-title-de {
    font-size: 32px;
  }

  .header-title2-de {
    font-size: 32px;
    text-align: left;
    margin-top: 0%;
  }

  .hero-orbit {
    position: absolute;
    width: 127%;
    height: 55%;
    top: 42%;
    left: 92%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-size: 32px;
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 24rem;
  }
}

@media (max-width: 412px) {
  .what-we-help-container-upper-text-de {
    top: 25%;
  }

  .backend {
    left: 58.5%;
    top: 64.9%;
    transform: rotate(36.998deg);
  }

  .ai {
    left: 30%;
    top: 47%;
  }

  .middle-header-container {
    z-index: -1;
  }

  .hero-orbit {
    position: absolute;
    width: 127%;
    height: 55%;
    top: 42%;
    left: 92%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .what-we-help-bottom-container-de {
    top: 20rem;
  }
}

@media (max-width: 395px) {
  .hero-title {
    font-size: 2.9rem;
  }

  .hero-image {
    width: clamp(220px, 96vw, 400px);
    height: clamp(220px, 96vw, 400px);
    top: clamp(-10rem, -40vw, -3rem);
    left: clamp(50%, 76vw, 64%);
    transform: translateX(-50%);
  }

  .hero-top-text {
    font-size: 14px;
  }

  /* .hero-orbit {
    top: 50%;
    margin-top: -90%;
  } */

  .curve-text-container {
    left: 5%;
    right: 5%;
  }

  .curve-image-container {
    left: 32%;
    width: 10.875rem;
    transform: rotate(-15deg);
    top: 27%;
  }

  .curve-media {
    left: -65%;
  }

  .central-vector-container {
    margin-top: 24rem;
  }

  /* .central-vector-main-text {
    font-size: 35px;
  } */

  /* .central-vector-main-span-text {
    font-size: 35px;
  } */

  .our-technologies-item {
    padding: 15px 35px;
    font-size: 22px;
  }

  .cloud-devops {
    left: 5.2%;
    bottom: 0.4%;
  }

  .web-mobile {
    left: -2%;
    top: 39%;
  }

  .ai {
    left: 32%;
    top: 51.3%;
  }

  .backend {
    left: 55.5%;
    top: 66.9%;
  }

  .header-title {
    font-size: 2.6rem;
  }

  .header-title2 {
    font-size: 2.6rem;
  }

  .header-title-de {
    font-size: 30px;
  }

  .header-title2-de {
    font-size: 30px;
  }

  .profile-info-container {
    padding-left: 22px;
  }

  .profile-card-img-wrap {
    width: 85%;
  }

  .mission-title {
    font-size: 20px;
  }

  .profile-role {
    font-size: 12px;
  }

  .about-text-container p {
    font-size: 25px;
  }

  .profiles-row {
    gap: 6rem;
  }

  .text-1 {
    left: 0%;
    top: 200%;
  }

  .text-2 {
    right: 0%;
    top: 252%;
  }

  .what-we-help-container-upper-text {
    width: clamp(150px, 90vw, 338px);
    left: 5%;
    right: 5%;
    top: 26%;
  }

  .what-we-help-bottom-container {
    position: relative;
    bottom: auto;
    width: 100%;
    top: 16rem;
  }

  .about {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    color: #23252a;
    font-family: Satoshi, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 20rem;
  }

  .profile-container3,
  .profile-container4 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  .profile-container3 .profile-orbit-mobile {
    top: 28%;
  }

  .curve-text-container {
    top: clamp(-110px, 65vw, 240px);
  }

  .project-header-container {
    margin-top: clamp(40px, 20vw, 188px);
  }

  .hero-orbit {
    position: absolute;
    width: 127%;
    height: 55%;
    top: 42%;
    left: 93%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .profiles-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    height: auto;
    padding-top: 65px;
    padding-bottom: 20px;
    width: 100%;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-size: 30px;
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 17rem;
  }
}

@media (max-width: 375px) {
  .language-option {
    font-size: 16px;
  }

  .about-container {
    padding-top: clamp(20px, 5vw, 40px);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header-container2 {
    justify-content: flex-start;
  }

  .about-header {
    padding-right: 0;
  }

  .header-title,
  .header-title2 {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.18;
  }

  .orbit-section {
    display: none;
  }

  /* Stacked vertical profile cards */
  .profiles-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    height: auto;
    padding-top: 60px;
    padding-bottom: 20px;
    width: 100%;
  }

  .profile-container3,
  .profile-container4 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }

  /* Orbit SVG curves behind each card */
  .profile-orbit-mobile {
    display: block;
    position: absolute;
    width: 95vw;
    left: 50%;
    transform: translateX(-50%);
    top: -15%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
  }

  .profile-container3 .profile-orbit-mobile {
    top: 28%;
  }

  .profile-container4 .profile-orbit-mobile {
    transform: translateX(-50%);
    transform-origin: center;
    top: -10%;
  }

  /* Photo card */
  .profile-card-img-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden;
  }

  .profile-image-container {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
  }

  .hero-top-text {
    font-size: 14px;
  }

  .linkedin-badge {
    position: absolute;
    bottom: 14px;
    right: 12px;
    width: clamp(40px, 8vw, 56px);
    height: clamp(40px, 8vw, 56px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .linkedin-badge svg {
    width: 16px;
    height: 16px;
  }

  /* Name + role */
  .profile-info-container {
    z-index: 1;
    position: relative;
    padding-left: 2px;
  }

  .profile-info3 {
    gap: 4px;
  }

  .mission-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .profile-role {
    font-size: 12px;
    color: #757677;
  }

  /* Quote */
  .about-text-container {
    margin-top: 28px;
    width: 100%;
    padding-bottom: 28px;
  }

  .about-text-container p {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.45;
    letter-spacing: -0.02em;
  }

  .curve-highlight {
    font-size: clamp(15px, 2vw, 26px);
  }

  .central-vector-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .central-vector-span-text {
    font-size: clamp(14px, 7vw, 26px);
  }

  .what-we-help-container-upper-text p {
    color: var(--Gray-text, #4b4d51);
    text-align: justify;

    /* 📱Body/B2-Regular */
    font-family: "Work Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .header-title {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Medium */
    font-family: Satoshi;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -0.8px;
  }

  .header-title2 {
    color: var(--Black, #23252a);

    /* 📱Header/H2-Italic */
    font-family: "Ivar Text";
    font-size: 2.5rem;
    font-style: italic;
    font-weight: 400;
    line-height: 116%;
    /* 46.4px */
    letter-spacing: -1.2px;
    text-align: right;
    margin-top: -12%;
  }

  .about-text-container p {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .mission-title {
    color: var(--Black, #23252a);

    /* 📱Header/H3-Medium */
    font-family: Satoshi;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 116%;
    /* 27.84px */
    letter-spacing: -0.48px;
  }

  .profile-role {
    color: var(--Light-gray-text, #757677);

    /* 📱Body/B2-Italic */
    font-family: "Ivar Text";
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    letter-spacing: -0.32px;
  }

  .project-header-container {
    height: clamp(220px, 68vw, 505px);
  }

  .contact-text-container {
    height: clamp(220px, 68vw, 505px);
  }

  .project-header-container::before {
    top: 0;
    height: clamp(220px, 100vw, 400px);
  }

  .footer-svg {
    width: clamp(220px, 156vw, 572px);
    height: clamp(250px, 134vw, 550px);
    margin-left: clamp(-110px, -28vw, -50px);
    margin-right: clamp(-20px, -5vw, -50px);
  }

  .contact-container {
    height: clamp(340px, 140vw, 700px);
  }

  .contact-container::before {
    bottom: -100px;
    height: clamp(260px, 100vw, 525px);
  }

  .text-2 {
    right: 2%;
    top: 250%;
  }

  .header-title-de {
    font-size: 30px;
  }

  .header-title2-de {
    font-size: 34px;
    margin-top: 0%;
    text-align: left;
  }

  .ai {
    left: 33%;
    top: 51.3%;
  }

  .backend {
    left: 57.5%;
    top: 65.9%;
  }

  .what-we-help-container-upper-text-de {
    top: 22%;
  }

  .hero-orbit {
    position: absolute;
    width: 127%;
    height: 55%;
    top: 42%;
    left: 94%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-size: 30px;
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 15rem;
  }
}

@media (max-width: 360px) {
  .hero-title {
    font-size: 2.75rem;
  }

  .hero-image {
    width: clamp(220px, 96vw, 400px);
    height: clamp(220px, 96vw, 400px);
    top: clamp(-10rem, -40vw, -3rem);
    left: clamp(50%, 76vw, 64%);
    transform: translateX(-50%);
  }

  .hero-top-text {
    font-size: 14px;
  }

  .curve-text-container {
    left: 5%;
    right: 5%;
  }

  .curve-image-container {
    left: 25%;
    width: 10.875rem;
    transform: rotate(-15deg);
    top: 10%;
  }

  .curve-media {
    left: -65%;
  }

  .central-vector-container {
    margin-top: 24rem;
  }

  /* .central-vector-main-text {
    font-size: 30px;
  } */

  /* .central-vector-main-span-text {
    font-size: 30px;
  } */

  .our-technologies-item {
    padding: 15px 30px;
    font-size: 22px;
  }

  .web-mobile {
    left: -4%;
    top: 39.2%;
  }

  .ai {
    left: 31%;
    top: 52.3%;
  }

  .backend {
    left: 54.5%;
    top: 64.9%;
  }

  .header-title {
    font-size: 2.3rem;
  }

  .header-title2 {
    font-size: 2.3rem;
  }

  .profile-info-container {
    padding-left: 22px;
  }

  .profile-card-img-wrap {
    width: 85%;
  }

  .mission-title {
    font-size: 20px;
  }

  .profile-role {
    font-size: 12px;
  }

  .about-text-container p {
    font-size: 20px;
  }

  .profiles-row {
    gap: 6rem;
  }

  .text-1 {
    left: 0%;
    top: 200%;
  }

  .text-2 {
    right: 0%;
    top: 252%;
  }

  .what-we-help-container-upper-text {
    width: clamp(150px, 90vw, 338px);
    left: 5%;
    right: 5%;
    top: 26%;
  }

  .what-we-help-bottom-container {
    position: relative;
    bottom: auto;
    width: 100%;
    top: 12rem;
  }

  .about {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    color: #23252a;
    font-family: Satoshi, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 20rem;
  }

  .what-we-help-container-upper-text-de {
    top: 23%;
  }

  .profile-container3 .profile-orbit-mobile {
    top: 30%;
  }

  .backend {
    left: 54.5%;
    top: 62.9%;
  }

  .header-title-de {
    font-size: 28px;
  }

  .header-title2-de {
    font-size: 34px;
    margin-top: 0%;
    text-align: left;
  }

  .hero-orbit {
    position: absolute;
    width: 127%;
    height: 55%;
    top: 42%;
    left: 96%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-size: 28px;
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 17rem;
  }
}

@media (max-width: 340px) {
  .hero-title {
    font-size: 2.55rem;
  }

  .hero-image {
    width: clamp(220px, 96vw, 400px);
    height: clamp(220px, 96vw, 400px);
    top: clamp(-10rem, -40vw, -3rem);
    left: clamp(50%, 76vw, 64%);
    transform: translateX(-50%);
  }

  .hero-top-text {
    font-size: 12px;
  }

  .curve-text-container {
    left: 5%;
    right: 5%;
  }

  .curve-image-container {
    left: 25%;
    width: 10.875rem;
    transform: rotate(-15deg);
    top: 10%;
  }

  .curve-media {
    left: -65%;
  }

  .central-vector-container {
    margin-top: 24rem;
  }

  /* .central-vector-main-text {
    font-size: 28px;
  } */

  /* .central-vector-main-span-text {
    font-size: 28px;
  } */

  .our-technologies-item {
    padding: 12px 24px;
    font-size: 22px;
  }

  .web-mobile {
    left: -4%;
    top: 43.2%;
  }

  .ai {
    left: 31%;
    top: 57.3%;
  }

  .backend {
    left: 54.5%;
    top: 64.9%;
  }

  .header-title {
    font-size: 2.2rem;
  }

  .header-title2 {
    font-size: 2.2rem;
  }

  .profiles-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    height: auto;
    padding-top: 60px;
    padding-bottom: 20px;
    width: 100%;
  }

  .profile-info-container {
    padding-left: 22px;
  }

  .profile-card-img-wrap {
    width: 85%;
  }

  .mission-title {
    font-size: 20px;
  }

  .profile-role {
    font-size: 12px;
  }

  .about-text-container p {
    font-size: 20px;
  }

  .profiles-row {
    gap: 6rem;
  }

  .text-1 {
    left: 0%;
    top: 200%;
  }

  .text-2 {
    right: 0%;
    top: 252%;
  }

  .what-we-help-container-upper-text {
    width: clamp(150px, 90vw, 338px);
    left: 5%;
    right: 5%;
    top: 26%;
  }

  .what-we-help-bottom-container {
    position: relative;
    bottom: auto;
    width: 100%;
    top: 12rem;
  }

  .about {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    color: #23252a;
    font-family: Satoshi, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    top: 20rem;
  }

  .header-title-de {
    font-size: 26px;
  }

  .header-title2-de {
    font-size: 32px;
    margin-top: 0%;
    text-align: left;
  }

  .profile-container3 .profile-orbit-mobile {
    top: 32%;
  }

  .what-we-help-container-upper-text {
    width: clamp(150px, 90vw, 338px);
    left: 5%;
    right: 5%;
    top: 23%;
  }

  .what-we-help-container-upper-text-de {
    top: 20%;
  }

  .hero-orbit {
    position: absolute;
    width: 127%;
    height: 55%;
    top: 42%;
    left: 100%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-size: 26px;
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 17rem;
  }
}

@media (max-width: 320px) {
  .hero-title {
    font-size: 2.45rem;
  }

  .hero-image {
    width: clamp(220px, 96vw, 400px);
    height: clamp(220px, 96vw, 400px);
    top: clamp(-10rem, -40vw, -3rem);
    left: clamp(50%, 76vw, 64%);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .hero-top-text {
    font-size: 12px;
  }

  .curve-media {
    left: -65%;
  }

  .central-vector-container {
    margin-top: 24rem;
  }

  /* .central-vector-main-text {
    font-size: 28px;
  } */

  /* .central-vector-main-span-text {
    font-size: 28px;
  } */

  .our-technologies-item {
    padding: 12px 24px;
    font-size: 22px;
  }

  .web-mobile {
    left: -4%;
    top: 43.2%;
  }

  .ai {
    left: 31%;
    top: 57.3%;
  }

  .backend {
    left: 54.5%;
    top: 62.9%;
  }

  .header-title {
    font-size: 2.1rem;
  }

  .header-title2 {
    font-size: 2.1rem;
  }

  .profiles-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
    height: auto;
    padding-top: 60px;
    padding-bottom: 20px;
    width: 100%;
  }

  .profile-info-container {
    padding-left: 22px;
  }

  .profile-card-img-wrap {
    width: 85%;
  }

  .mission-title {
    font-size: 20px;
  }

  .profile-role {
    font-size: 12px;
  }

  .about-text-container p {
    font-size: 20px;
  }

  .profiles-row {
    gap: 6rem;
  }

  .text-1 {
    left: 0%;
    top: 200%;
  }

  .text-2 {
    right: 0%;
    top: 254%;
  }

  .curve-text-container {
    left: 5%;
    right: 5%;
  }

  .header-title-de {
    font-size: 26px;
  }

  .header-title2-de {
    font-size: 30px;
    margin-top: 0%;
    text-align: left;
  }

  .hero-orbit {
    position: absolute;
    width: 127%;
    height: 55%;
    top: 42%;
    left: 100%;
    margin-left: -160px;
    margin-top: -160px;
  }

  .header-title2 {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
  }

  .header-title2-de {
    font-size: 26px;
    font-family: "Ivar Text", serif;
    font-style: italic;
  }

  .what-we-help-bottom-container-de {
    top: 17rem;
  }
}