@media (min-width: 768px) {
    :root { 
        --container-padding: 2rem;
    }

    .hero-section { 
        text-align: left;
    }
    .hero-section .lead { 
      margin-left: 0;
      margin-right: 0;
    }
    .hero-buttons { 
        flex-direction: row;
        justify-content: flex-start; 
    }
}


@media (max-width: 767.98px) {
    :root { 
        --section-padding: 3rem 0;
        --font-size-h1: clamp(1.8rem, 5vw, 2.5rem);
        --font-size-h2: clamp(1.5rem, 4vw, 2.2rem);
    }

     .navbar-light .navbar-collapse {
        background-color: var(--light-color); 
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--card-shadow);
        border: 1px solid var(--border-color);
    }


  .hero-buttons { 
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  .hero-buttons .btn { 
      width: 100%;
  }

  .feature-card .card-body { 
    padding: 1.25rem;
  }

  .pricing-card { 
    margin-bottom: 1.5rem; 
  }
  .popular-plan { 
      transform: scale(1); 
  }
}