/* ===== MOBILE STYLES ===== */
/* Applies to screens 768px and smaller */

@media (max-width: 768px) {

  /* ===== GLOBAL TEXT SIZE ===== */
  body {
    font-size: 18px;
  }
  
  .pricing-row {
  flex-direction: column;
}

  /* ===== HEADINGS ===== */
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }
  

  /* ===== CONTAINER ===== */
  .container {
    padding: 15px;
  }

  /* ===== BUTTON ===== */
  .btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
  }

  /* ===== ABOUT SECTION STACK ===== */
  .about {
    flex-direction: column;
    text-align: center;
  }

  .about img {
    width: 100%;
    max-width: 300px;
    margin-bottom: 15px;
  }

  /* ===== LIST FIX ===== */
  ul, ol {
    width: 100%;
  }

  /* ===== FOOTER STACK ===== */
  .footer-columns {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  /* ===== SOCIAL ICONS ===== */
  .social img {
    width: 65px;
  }

}

/* ===== MOBILE NAV ===== */
@media (max-width: 768px) {

  .nav-container {
    flex-direction: column;
    gap: 10px;
  }

  .nav-menu {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

}

/* ===== FIX NAV BACKGROUND ON MOBILE ===== */
@media (max-width: 768px) {

  .main-nav {
    background: #2e7d32 !important;
    width: 100%;
  }

  .nav-container {
    background: #2e7d32;
    width: 100%;
  }

}

/* ===== HOW IT WORKS MOBILE ===== */
@media (max-width: 768px) {

  .how-row {
    flex-direction: column;
    align-items: center;
  }

}

/* ===== PAYMENT SECTION MOBILE ===== */
@media (max-width: 768px) {

  .payment-row {
    flex-direction: column;
    align-items: center;
  }

}