/* 
 * Support & Monitoring Page - Mobile Optimization CSS
 * 针对 support.html 页面的专属移动端适配
 */

@media screen and (max-width: 767px) {

  /* ============================================
     Hero Section
     ============================================ */
  .lrn-started-inner {
    min-height: auto !important;
    padding: 100px 0 60px 0 !important;
  }

  .lrn-started-inner h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .lrn-started-inner p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 0 15px !important;
  }

  /* ============================================
     Support Services (Issue 1)
     ============================================ */
  
  .wrapper > section:nth-of-type(2) {
    padding: 50px 0 !important;
  }

  /* Hide the overlapping icon container (the one with top: -95px) */
  .wrapper > section:nth-of-type(2) .element-anim-1 div[style*="top: -95px"] {
    display: none !important;
  }

  /* Adjust padding of the text container since icon is gone */
  .wrapper > section:nth-of-type(2) .element-anim-1 div[style*="padding: 40px 30px"] {
    padding: 25px 20px !important;
  }

  /* Adjust Image Height */
  .wrapper > section:nth-of-type(2) .element-anim-1 div[style*="height: 250px"] {
    height: 200px !important;
  }

  /* Text Adjustments */
  .wrapper > section:nth-of-type(2) h4 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  .wrapper > section:nth-of-type(2) p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
  }

  /* Hide check icons in the bottom text */
  .wrapper > section:nth-of-type(2) div[style*="display: flex"] i {
    display: none !important;
  }

  /* Third Card (Performance Tuning) - Adjust padding & Hide Icon */
  .wrapper > section:nth-of-type(2) div[style*="padding: 50px 40px"] {
    padding: 25px 20px !important;
  }

  .wrapper > section:nth-of-type(2) .row:nth-of-type(2) .col-md-2 {
    display: none !important;
  }

  .wrapper > section:nth-of-type(2) .row:nth-of-type(2) h4 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  .wrapper > section:nth-of-type(2) .row:nth-of-type(2) p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ============================================
     Comprehensive Monitoring Capabilities (Issue 2)
     ============================================ */
  
  .wrapper > section:nth-of-type(3) {
    padding: 50px 0 !important;
  }

  .wrapper > section:nth-of-type(3) .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  /* Force 2 Columns */
  .wrapper > section:nth-of-type(3) .col-xs-12 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
  }

  /* Card Styling Adjustment */
  .wrapper > section:nth-of-type(3) div[style*="padding: 30px 20px"] {
    padding: 15px 10px !important;
    height: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Icon Circle Size - Hide Icon */
  .wrapper > section:nth-of-type(3) div[style*="width: 80px"] {
    display: none !important;
  }

  /* Icon Font Size */
  .wrapper > section:nth-of-type(3) i {
    display: none !important;
  }

  /* Text Size */
  .wrapper > section:nth-of-type(3) h5 {
    font-size: 15px !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .wrapper > section:nth-of-type(3) p {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

}