/* Mobile Overflow Fixes for Aksara Systems
 * Priorities 1-3: Containers, Hero, Typography
 * Covers ~95% of horizontal overflow issues
 */

@media screen and (max-width: 767px) {
  /* PRIORITY 1: Container Fixes */
  .container-2,
  .aksara-systems--container {
    width: 100% !important;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  /* PRIORITY 2: Hero Section */
  .ix_full-screen-background {
    width: 100% !important;
    min-width: 100%;
  }

  /* PRIORITY 3: Typography & Spacing */
  .page-intro-title.is-animation,
  .page-intro-title.is-webdesign,
  .page-intro-title.is-skills {
    margin-left: 0 !important;
  }

  .page-padding {
    padding-right: 4vw;
    padding-left: 4vw;
  }

  /* Bonus: Card Animations */
  .ix_card-stack-explode-card.is-ix-1 {
    transform: translate(-10vw, -20vh) !important;
  }

  .ix_card-stack-explode-card.is-ix-6 {
    transform: translate(10vw, 10vh) !important;
  }
}

@media screen and (max-width: 767px) {
  .card_body {
    padding: 1rem;
  }
}

.selling-point{
  padding-top: 3rem;
}

/* Mobile Navigation Visibility Fixes */
@media screen and (max-width: 991px) {
  /* Fix transparent mobile nav menu */
  .nav-menu-2 {
    background-color: #262626 !important;  /* Solid white background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* Add subtle shadow for depth */
  }

  /* Fix transparent nav bar */
  .nav-2 {
    background-color: #262626 !important;  /* 95% opaque white */
    backdrop-filter: blur(10px);  /* Keep blur effect */
    -webkit-backdrop-filter: blur(10px);
  }

  /* Fix invisible hamburger button when open */
  .nav-btn.w--open {
    background-color: rgba(255, 255, 255, 0.2) !important;  /* Slight visible background */
  }

  /* Ensure nav links are visible with proper contrast */
  .nav_link-2 {
    color: #bbb !important;  /* Dark text for contrast */
  }

  /* Improve nav link visibility on hover/active */
  .nav_link-2:hover,
  .nav_link-2:focus {
    color: #fff !important;
  }
}