/* =====================================
   GOOD FAITH – RESPONSIVE.CSS
   Author: Good Faith
   Purpose: Responsive adjustments for mobile and tablet
   ===================================== */

/* -----------------------------
   HERO SECTION RESPONSIVE
----------------------------- */
@media (max-width: 1200px) {
  .hero-section {
    padding: 60px 20px;
  }

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

  .hero-subtext {
    font-size: 1rem;
  }

  .hero-wrapper {
    gap: 20px;
  }
}

/* -----------------------------
   TABLET / SMALL DESKTOP
----------------------------- */
@media (max-width: 992px) {
  .hero-wrapper {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-content, .hero-visual {
    flex: 1 1 100%;
  }

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

  .structured-block {
    margin-bottom: 20px;
    padding: 18px;
  }

  .btn-external {
    padding: 10px 20px;
    margin-bottom: 10px;
  }
}

/* -----------------------------
   MOBILE DEVICES
----------------------------- */
@media (max-width: 576px) {
  .hero-title {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .hero-subtext {
    font-size: 0.95rem;
  }

  .structured-block h4 {
    font-size: 1.1rem;
  }

  .structured-block p {
    font-size: 0.9rem;
  }

  .hero-visual img {
    max-width: 100%;
    height: auto;
  }

  .btn-external {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
    margin-bottom: 15px;
  }

  .page-container {
    padding: 0 15px;
  }
}

/* -----------------------------
   NAVBAR / FOOTER RESPONSIVE
----------------------------- */
@media (max-width: 768px) {
  .navbar .nav-link {
    font-size: 0.95rem;
    margin-left: 10px;
    text-align: center;
  }

  footer {
    padding: 30px 15px;
    font-size: 0.9rem;
  }

  footer ul.list-inline li {
    display: block;
    margin-bottom: 10px;
  }
}

/* -----------------------------
   CASE STUDIES / SERVICES GRID
----------------------------- */
@media (max-width: 768px) {
  .structured-block {
    width: 100%;
  }
}