/* =========================================
   TABLETS (768px - 992px)
   ========================================= */
@media (min-width: 768px) and (max-width: 992px) {
  /* Layout Adjustments */
  .hero-grid,
  .dual-grid,
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Specific Sections */
  .stacked-images-container {
    height: 500px;
    max-width: 650px;
    margin: 0 auto;
  }

  .pricing-card.popular {
    transform: scale(1);
  }

  .pricing-image {
    height: 250px;
  }

  /* Make the residential grid wrap nicely on tablets */
  .sp-pricing-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Make the 3rd card span full width on tablet to keep balance */
  .sp-power-node.sp-node-enterprise {
    grid-column: 1 / -1;
  }

  /* Reset the scale on the featured card so it doesn't overlap weirdly on tablets */
  .sp-node-featured {
    transform: scale(1);
  }

  .cta-box h2 {
    font-size: 3rem;
  }

  /* Navbar / Menu */
  .nav-cta {
    display: none; /* Hide Contact button on Top Navbar */
  }

  .hamburger {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    right: -100%; /* Hide off-screen */
    flex-direction: column;
    background: var(--bg-surface);
    width: 100%;
    padding: 2rem 5%;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(32, 138, 34, 0.2);
    box-shadow: var(--shadow-soft);
    transition: right 0.4s ease;
    align-items: center;
  }

  .nav-links.active {
    right: 0;
  }

  /* Hamburger Animation */
  .hamburger.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .hamburger.is-active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

/* =========================================
   MOBILE PHONES (max-width: 767px)
   ========================================= */
@media (max-width: 767px) {
  /* Layout Adjustments */
  .section {
    padding: 4rem 0;
  }

  .hero-section {
    padding-top: 8rem;
  }

  .hero-grid,
  .dual-grid,
  .solution-grid,
  .grid-4,
  .grid-3,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Typography Adjustments */
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .pricing-image {
    height: 180px; /* Reduce height to save vertical space on mobile */
  }

  .pricing-content {
    padding: 0 1.5rem 2rem 1.5rem; /* Slightly tighter padding */
  }

  /* Stack the residential grid vertically on mobile */
  .sp-pricing-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .sp-power-node {
    padding: 2.5rem 1.5rem;
  }

  .sp-node-featured {
    transform: scale(1); /* Remove zoom on mobile */
  }

  .sp-node-title {
    font-size: 1.4rem;
  }

  .sp-amount {
    font-size: 3rem;
  }

  .sp-featured-tag {
    right: 1.5rem; /* Adjust tag padding for mobile */
  }

  .section-header h2,
  .text-content h2 {
    font-size: 2rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  /* Specific Sections */
  .stacked-images-container {
    height: 400px;
    max-width: 100%;
  }

  .solution-features {
    flex-direction: column;
  }

  /* Swhy us */

  .expertise-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cta-box {
    padding: 4rem 1.5rem; /* Reduce padding on mobile */
  }

  .cta-box h2 {
    font-size: 2.2rem;
  }

  .cta-box p {
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .cta-actions .btn {
    width: 100%; /* Make buttons full width on small screens */
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .legal-links a {
    margin: 0 0.5rem;
  }

  /* Navbar / Menu */
  .nav-cta {
    display: none; /* Hide Contact button on Top Navbar */
  }

  .hamburger {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    right: -100%; /* Hide off-screen */
    flex-direction: column;
    background: var(--bg-surface);
    width: 100%;
    padding: 2rem 5%;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(32, 138, 34, 0.2);
    box-shadow: var(--shadow-soft);
    transition: right 0.4s ease;
    align-items: center;
  }

  .nav-links.active {
    right: 0;
  }

  /* Hamburger Animation */
  .hamburger.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .hamburger.is-active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}