/* --------------------------------------------------------------
   Typewriter Styles (Fixed - No Content Movement)
-------------------------------------------------------------- */
/* Container - FIXED: Reserve enough vertical space */
.wallahi-homepage .typewriter-container {
  width: 100%;
  max-width: 600px;
  margin: 20px auto 10px; /* REDUCED: from 40px auto 0 to 20px auto 10px */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px; /* REDUCED: from 180px to 120px */
  position: relative;
}

/* Inline wrapper - RESTORED: Your original layout */
.wallahi-homepage .typewriter-inner {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
  min-height: 1.2em;
}

/* Text styling */
.wallahi-homepage .typewriter-text {
  font-size: var(--typewriter-font-size-desktop);
  font-weight: 600;
  color: #000;
  display: inline;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
  vertical-align: middle; /* FIXED: Align with cursor */
}

.wallahi-homepage .gradient-text {
  background: linear-gradient(
    to right,
    rgb(255, 0, 221),
    rgb(255, 0, 0)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline;
}

/* Cursor styling - FIXED: Proper vertical alignment */
.wallahi-homepage .typewriter-cursor {
  font-size: var(--typewriter-font-size-desktop);
  font-weight: 300;
  color: #000000;
  display: inline;
  margin-left: 2px;
  line-height: 1;
  vertical-align: middle; /* FIXED: Align with text */
  animation: tw-blink 1s steps(1,start) infinite;
}

/* Blink keyframes */
@keyframes tw-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Desktop specific */
@media (min-width: 768px) {
  .wallahi-homepage .typewriter-container {
    display: flex;
    justify-content: center;
    min-height: 100px; /* REDUCED: from 120px to 100px */
  }
  .wallahi-homepage .typewriter-inner {
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
  }
}

/* Mobile adjustments - FIXED: No movement */
@media (max-width: 767px) {
  .wallahi-homepage { 
    min-height: 75vh; 
    padding: 16px; 
  }
  .wallahi-homepage .typewriter-container { 
    margin: 25px auto 0; 
    min-height: 150px; /* FIXED: Reserve space for wrapped text */
    display: block; /* Back to block for proper wrapping */
  }
  /* ALLOW WRAPPING ONLY ON MOBILE - but reserve the space */
  .wallahi-homepage .typewriter-inner {
    display: inline-block;
    white-space: normal;
    text-align: left;
    min-height: 120px; /* FIXED: Reserve space */
    width: 100%;
  }
  .wallahi-homepage .typewriter-text {
    font-size: var(--typewriter-font-size-mobile);
    white-space: pre-wrap;
    text-align: left;
    line-height: 1.3;
    vertical-align: middle; /* FIXED: Align with cursor */
  }
  .wallahi-homepage .typewriter-cursor {
    font-size: var(--typewriter-font-size-mobile);
    vertical-align: middle; /* FIXED: Proper alignment */
  }
  /* Buttons - FIXED: Positioned lower with enough space */
  .wallahi-homepage .hero-url {
    margin-top: 80px; /* FIXED: More space above buttons */
  }

  /* --- ADD MARGIN BELOW AVATAR SLIDER ON MOBILE --- */
  .wallahi-homepage .avatars-slider-section {
    margin-bottom: 30px; /* Add space below the slider */
  }

  /* --- MOBILE SPECIFIC ADJUSTMENTS FOR SLIDER --- */
  /* Override centered content for the slider section */
  .wallahi-homepage .avatars-slider-section,
  .wallahi-homepage .avatars-slider-container,
  .wallahi-homepage .avatars-slider {
     max-width: 100vw; /* Override parent's max-width */
     width: 100vw;     /* Span full viewport width */
     margin-left: calc(50% - 50vw); /* Center the full-width element */
     margin-right: calc(50% - 50vw);
     padding-left: 0;
     padding-right: 0;
  }

  /* Adjust typewriter container width to match mobile layout */
  .wallahi-homepage .typewriter-container,
  .wallahi-homepage .typewriter-inner {
     max-width: calc(100% - 20px); /* Account for any minor gutters if needed */
     margin-left: auto;
     margin-right: auto;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .wallahi-homepage .typewriter-container {
    min-height: 140px;
  }
  .wallahi-homepage .typewriter-inner {
    min-height: 110px;
  }
  .wallahi-homepage .hero-url {
    margin-top: 70px;
  }
  /* Adjust slider margin for smaller screens */
  .wallahi-homepage .avatars-slider-section {
    margin-bottom: 25px;
  }
}