/* Main Index Page Responsive CSS - Mobile */

@media screen and (max-width: 768px) {
  .welcome-container {
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-color: #e6faf3 !important;
    overflow: hidden !important;
  }

  .layer {
    background-size: cover !important;
    background-position: center bottom !important;
    inset: -10% !important;
  }

  /* Content Centering */
  .content {
    margin-bottom: 100px !important;
    padding: 20px !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .title {
    gap: 0px !important;
    margin-bottom: 25px !important;
  }

  .title-top {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }

  .title-bottom {
    font-size: 46px !important;
    line-height: 1.2 !important;
    margin-top: -5px !important;
  }

  /* Get Started Button */
  .get-started-btn {
    padding: 16px 50px !important;
    font-size: 18px !important;
    border-radius: 50px !important;
    height: auto !important;
    width: auto !important;
    line-height: normal !important;
    display: inline-block !important;
    box-shadow: 0px 10px 30px -10px #00FFAA !important;
    background: #FFFFFF !important;
    color: #15875F !important;
  }

  /* Overlay TChing-gif.gif for extra aesthetic */
  .welcome-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: url('/static/images/TChing-gif.gif') no-repeat center;
    background-size: contain;
    z-index: 15;
    opacity: 0.15;
    pointer-events: none;
  }

  /* Layer 4: Trees - Right side only like desktop */
  .layer-top {
    background-position: right 70px !important;
    background-size: auto 100% !important;
    z-index: 1 !important;
  }

  /* Combined grass images on separate pseudo-element for better stacking */
  .welcome-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      url("/static/images/images/layer 1 - grass left side.png") no-repeat left bottom,
      url("/static/images/images/layer 1 - grass right side.png") no-repeat right bottom;
    background-size: 60% auto, 60% auto;
    z-index: 18;
    pointer-events: none;
  }

  .layer-mid-butterflies1 {
    background-size: 100px auto !important;
    background-position: left 10% bottom 200px !important;
    z-index: 1000 !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
  }

  .layer-mid-butterflies2 {
    background-size: 100px auto !important;
    background-position: right 10% bottom 200px !important;
    z-index: 1000 !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
  }
}