/* ===========================
   MAIN CONTAINER
=========================== */
.TABLE-OF-CONTENT {
  width: 100%;
  height: 100vh;            /* fixed viewport height */
  position: relative;
  overflow-x: hidden;       /* prevent horizontal overflow */
  overflow-y: hidden;       /* prevent vertical overflow */
  box-sizing: border-box;   /* include padding in height */
  padding-bottom: 0;        /* remove extra bottom padding */
}

.cubitrek-UI {
  width: clamp(150px, 20vw, 300px);  /* smaller width */
  max-width: 90vw;
  height: auto;
  object-fit: contain;  /* maintain aspect ratio */
  display: block;
  margin: 0 auto;       /* center horizontally if needed */
}

/* ===========================
   BACK BUTTON
=========================== */
.component {
  position: absolute;
  top: 30px;
  left: 30px;
  width: clamp(30px, 4vw, 40px);
}

/* ===========================
   LOGO BOTTOM LEFT
=========================== */
.asset {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: clamp(28px, 4vw, 40px);
}

/* ===========================
   EXPAND ARROW (BOTTOM RIGHT)
=========================== */
.si-expand-more {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: clamp(40px, 6vw, 60px);
}

/* ===========================
   ABOUT US HEADING
=========================== */
.about-us {
  position: absolute;
  top: 20%;
  left: 8%;
  font-size: clamp(40px, 7vw, 70px);
  font-family: "Unbounded-Medium", Helvetica;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 43%,
    rgba(153, 153, 202, 0.79) 81%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===========================
   LINE UNDER HEADING (below .about-us)
=========================== */
.div-user-select-none {
  position: absolute;
  top: 28%;      /* adjusted to be below about-us */
  left: 8%;
  width: 40%;
  max-width: 90vw;
}

/* ===========================
   FIRST PARAGRAPH
=========================== */
.div {
  position: absolute;
  top: 25%;
  right: 8%;
  width: min(600px, 80%);
  font-size: clamp(14px, 1.2vw, 18px);
  color: white;
  font-family: "Unbounded-Light", Helvetica;
  line-height: 1.6;
  max-width: 90vw;
}

/* ===========================
   SECOND PARAGRAPH
=========================== */
.p {
  position: absolute;
  top: 55%;
  left: 8%;
  width: min(650px, 85%);
  font-size: clamp(14px, 1.2vw, 18px);
  color: white;
  font-family: "Unbounded-Light", Helvetica;
  line-height: 1.6;
  max-width: 90vw;
}

/* ===========================
   RIGHT SIDE IMAGE
=========================== */
.element {
  position: absolute;
  top: 35%;
  right: 8%;
  width: clamp(260px, 28vw, 480px);
  aspect-ratio: 1;
  object-fit: cover;
  mix-blend-mode: exclusion;
  max-width: 90vw;
}

/* ===========================
   MOBILE RESPONSIVE FIXES
=========================== */
@media (max-width: 900px) {
  .TABLE-OF-CONTENT {
    padding-top: 40px;      /* top spacing */
    padding-bottom: 0;      /* remove bottom padding */
    margin-left: auto;
    margin-right: auto;
    max-width: 100vw;
    height: 100vh;          /* fix height on smaller screens */
    overflow-y: hidden;     /* prevent vertical scroll */
    box-sizing: border-box; /* include padding */
  }

  .TABLE-OF-CONTENT .div,
  .TABLE-OF-CONTENT .p,
  .TABLE-OF-CONTENT .about-us,
  .TABLE-OF-CONTENT .element {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 20px auto 0 auto;  /* remove bottom margin */
    text-align: center;
    max-width: 90vw;
  }

  .div-user-select-none {
    position: relative;
    margin: 10px auto 0 auto;   /* remove bottom margin */
    width: 60%;
    max-width: 90vw;
    display: block;
  }

  .element {
    margin-top: 40px;
    margin-bottom: 0;          /* ensure no bottom margin */
    right: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

@media (max-width: 600px) {
  .TABLE-OF-CONTENT {
    padding: 20px 20px 0 20px; /* remove bottom padding */
    height: 100vh;             /* fixed viewport height */
    overflow-y: hidden;        /* no vertical scroll */
  }
}