/* =======================================================
   Tablets and Mobile Devices (Max Width: 991px)
   ======================================================= */
@media (max-width: 991px) {
  /* --- 1. Mobile Menu Styles --- */
  .desktop-nav,
  .desktop-btn {
    display: none; /* Hide Desktop Elements */
  }

  .mobile-menu-toggle {
    display: block; /* Show Mobile Menu Toggle */
  }

  .mobile-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--bg-white);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
  }

  .mobile-nav.is-open {
    max-height: 400px; /* Adjust based on menu size */
  }

  .mobile-nav-menu {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .mobile-btn {
    margin-top: 10px;
    display: inline-block;
    width: 100%;
  }

  /* Hamburger Animation to 'X' */
  .mobile-menu-toggle.is-active .hamburger-line:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }
  .mobile-menu-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  /* --- 2. General Layout Adjustments --- */
  .padding-y {
    padding: 50px 0;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  /* Convert Grids to single column on mobile */
  .grid-2-cols,
  .grid-3-cols,
  .grid-4-cols {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .features-list {
    flex-direction: column;
    gap: 10px;
  }

  /* --- 3. Content Ordering on Mobile --- */
  .story-images {
    grid-row: 1; /* Move image above text on mobile (Grid specific) */
  }

  .reverse-mobile {
    display: flex;
    flex-direction: column-reverse; /* For alternating layouts */
  }
}