/* Mobile hero section styles */

@media (max-width: 576px) {
  /* Enhanced mobile styles for hero section */
  .v3 .hero-section {
    position: relative;
  }
  
  .v3 .hero-content {
    bottom: 110px;
  }
  
  .v3 .hero-title {
    margin-bottom: 30px;
  }
  
  /* Make buttons take full width with flex and gap */
  .v3 .hero-mobile-buttons {
    display: flex;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 15px; /* Gap between buttons */
  }

  .mobile-menu-container
  {
    left:15px;
    right:auto;
  }

  .navbar-toggler
  {
    left:15px;
    right:auto;
  }
  
  /* Both buttons take equal space */
  .v3 .btn-signin-mobile,
  .v3 .btn-join-mobile {
    flex: 1 1 0%; /* Grow and shrink proportionally, 0% basis to allow equal stretch */
    min-width: 0; /* Allow shrinking below content size if needed */
    padding: 12px 0; /* Vertical padding only */
    font-size: 16px;
    box-sizing: border-box;
  }
  
  /* Safari fix */
  @supports (-webkit-touch-callout: none) {
    .v3 .hero-mobile-buttons {
      justify-content: space-between;
      gap: 0;
    }
    
    .v3 .btn-signin-mobile {
      width: calc(50% - 7.5px);
      margin-right: 7.5px;
    }
    
    .v3 .btn-join-mobile {
      width: calc(50% - 7.5px);
      margin-left: 7.5px;
    }
  }
}

/* Ensure mobile buttons are properly aligned on very small screens */
@media (max-width: 360px) {
  .v3 .hero-content {
    bottom: 120px;
  }
  
  .v3 .hero-mobile-buttons {
    bottom: 50px;
  }
  
  .v3 .btn-signin-mobile,
  .v3 .btn-join-mobile {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
  }
}