/* =========================================
   TABLETS (768px - 992px)
========================================= */
@media (min-width: 768px) and (max-width: 992px) {
  /* Hide Top Bar & Header CTA */
  .top-bar {
    display: none;
  }
  .header-contact-btn {
    display: none;
  }
  .menu-toggle {
    display: block;
  }

  /* Hamburger Menu Layout */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(2, 7, 18, 0.98);
    flex-direction: column;
    padding: 30px 0;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid var(--border-color);

    /* Off-screen by default */
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Hero Section */
  .hero-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  #hero {
    padding: 60px 5vw 80px 5vw;
  }
  .hero-content h1 {
    font-size: 3.8rem;
  }
  .hero-visual {
    height: 450px;
    margin-top: 20px;
  }
  .hero-img-wrapper {
    width: 100%;
  }

  /* Structural Fixes */
  .vision-mission {
    grid-template-columns: 1fr;
  }
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  /* The .grid-4 class will automatically break into 2 columns here, 
     we just need to tighten the inner padding slightly */
  .feature-card {
    padding: 32px 24px;
  }
}

/* =========================================
   MOBILE PHONES (max-width: 767px)
========================================= */
@media (max-width: 767px) {
  /* Hide Top Bar & Header CTA */
  .top-bar {
    display: none;
  }
  .header-contact-btn {
    display: none;
  }
  .menu-toggle {
    display: block;
  }

  /* Global Spacing */
  section {
    padding: 60px 0;
  }

  /* Hamburger Menu Layout */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(2, 7, 18, 0.98);
    flex-direction: column;
    padding: 30px 0;
    gap: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid var(--border-color);

    /* Off-screen by default */
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Hero Section */
  #hero {
    padding: 40px 5vw 80px 5vw;
  }
  .hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-content h1 {
    font-size: 2.75rem;
  }
  .hero-content p {
    font-size: 1.05rem;
  }

  /* Micro Stats Stack */
  .hero-micro-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
  }
  .stat-divider {
    width: 100%;
    height: 1px;
  }

  /* Buttons */
  .cta-buttons {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }
  .cta-buttons a,
  .cta-buttons button {
    width: 100%;
  }

  /* Hero Visual & Float Cards */
  .hero-visual {
    height: 380px;
    margin-top: 30px;
  }
  .hero-img-wrapper {
    width: 100%;
  }
  .glass-float-card.float-top-right {
    top: 20px;
    right: 10px;
    padding: 12px 16px;
  }
  .glass-float-card.float-bottom-left {
    top: auto;
    bottom: 20px;
    left: 10px;
    padding: 12px 16px;
  }
  .float-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .float-value {
    font-size: 1.15rem;
  }

  /* Grids to Single Column */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* General Typography & Spacing */
  .section-title {
    font-size: 2.25rem;
  }
  .vision-mission {
    grid-template-columns: 1fr;
  }

  /* CTA Inner Section */
  .cta-wrapper {
    padding: 50px 24px;
  }
  .cta-content h2 {
    font-size: 2.25rem;
  }

  /* Contact Adjustments */
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .input-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Footer Adjustments */
  .footer-grid {
    gap: 40px;
  }

  /* The .grid-4 class will automatically break into 1 column */
  .feature-card {
    padding: 32px 24px;
    align-items: center; /* Center contents on mobile */
    text-align: center;
  }

  .feature-card:hover {
    transform: translateY(
      -4px
    ); /* Less aggressive jump on small touch screens */
  }
}