{box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  overflow: hidden;
}


.big-container {
    position: relative; /* IMPORTANT: This is the positioning context for absolute squares */
    width: 100vw; /* Take full viewport width */
    min-height: 100vh; /* Take full viewport height */
}

.text-container{
  position: absolute;
  top: 30%;
  left: 10%;
}

.back-home{
  position:absolute;
  bottom:60%;
  right:20%;
  text-decoration:none;
}

.about-title {
  position: absolute;
  top: 10%;
  left: 20%;
  transform: translate(-50%, -30%);
  
  font-family: "Funnel Display", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 4rem;
    color: black;
    white-space: nowrap;
    z-index: 10;
}

@media (max-width: 768px) {
    .about-title {
        position: static;
        font-size: 3rem;
        top: 10%; /* Adjusted top to be a little lower for mobile */
        left: 50%; /* Center it horizontally */
        white-space: normal; /* Allow the text to wrap */
        width: 100%; /* Give it a width to wrap within */
        text-align: center; /* Center the multi-line text */
        transform: none;
    }
    .text-container,
    .container2 {
        position: static; /* CHANGED: Revert to static positioning on mobile for stacking */
        width: 90%; /* Use most of the screen width */
        max-width: none; /* Remove the max-width restriction on mobile */
        margin: 10px auto; /* Center with margins */
        text-align: center;
    }
    .back-home{
      position: static;
      bottom: 10%;
      left:10%;
    }
}
@media (max-width: 480px) {
    .about-title {
        font-size: 2rem;
    }
    .text-container,
    .container2 {
        padding: 15px; /* Less padding on small screens */
    }
}