/* Stocks Page Responsive Styles - Content Only, Absolutely No Navbar Changes */

/* Only target main content areas, never navbar */
@media screen and (max-width: 991px) {

  /* Hero section responsive - only inside main */
  main .inner-hero {
    min-height: 60vh !important;
    padding: 120px 0 60px 0 !important;
  }

  main .inner-hero .h1-title.large {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  main .inner-hero .title-white {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }

  main .inner-hero .subtitle-white {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Content sections responsive - only inside main */
  main .content-section-green {
    padding: 40px 15px !important;
  }

  main .content-section {
    padding: 40px 15px !important;
  }

  main ._2-content-section {
    padding: 40px 15px !important;
  }

  main .content-wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Typography responsive - only inside main */
  main .h2-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
  }

  main .h2-title-green {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
  }

  main .title {
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }

  main h3 {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }

  /* Green paragraph text - only inside main */
  main .split-paragraph-green {
    font-size: 16px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    padding: 0 !important;
  }

  /* Row and column layout responsive - only inside main */
  main .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }

  main .col-md-6 {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  main .col-md-3 {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  main .col-md-12 {
    width: 100% !important;
  }

  /* Two-column flex sections - only inside main */
  main .flex {
    flex-direction: column !important;
    gap: 30px !important;
  }

  main ._2-60-column {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  main ._50-column {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  main ._50-column-center {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  main ._77-column {
    width: 100% !important;
  }

  /* Split column layout - only inside main */
  main .split-column {
    flex-direction: column !important;
    gap: 30px !important;
  }

  main .split-column.reverse {
    flex-direction: column !important;
  }

  /* Images responsive - only inside main */
  main img {
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }

  /* Center alignment for stock feature boxes - only inside main */
  main center {
    text-align: center !important;
    margin-bottom: 30px !important;
  }

  /* Header border and structure for green sections - only inside main */
  main .header-flex-stretch {
    flex-direction: column !important;
    text-align: center !important;
  }

  main .header-border-flex {
    text-align: center !important;
    margin-bottom: 15px !important;
  }

  main ._2-top-padding {
    text-align: center !important;
  }

  main .green-line {
    margin: 0 auto !important;
  }

  /* Bottom border adjustments - only inside main */
  main .bottom-border {
    text-align: center !important;
    margin-bottom: 20px !important;
  }

  main .bottom-border.medium {
    text-align: center !important;
    margin-bottom: 15px !important;
  }

  main .top-border {
    margin-top: 30px !important;
  }

  /* Text adjustments - only inside main */
  main p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
  }

  /* Lists responsive - only inside main */
  main ul {
    padding-left: 20px !important;
    margin-bottom: 20px !important;
  }

  main ul li {
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
    font-size: 16px !important;
  }

  /* Center alignment for specific elements - only inside main */
  main .center {
    text-align: center !important;
  }

  /* Feature sections for stocks benefits - only inside main */
  main .flex-space {
    flex-direction: column !important;
    gap: 30px !important;
  }

  main .mobile-center {
    text-align: center !important;
  }

  main ._2-intro-feature {
    width: 100% !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    padding: 20px 15px !important;
  }

  main .intro-feature-icon {
    margin-bottom: 20px !important;
  }

  main ._3-feature-icon {
    margin: 0 auto 15px auto !important;
  }

  main .title-dark.small {
    font-size: 1.1rem !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }

  main .paragraph.medium {
    font-size: 14px !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  /* Heading container adjustments - only inside main */
  main .heading-container {
    text-align: center !important;
    margin-bottom: 30px !important;
  }

  main .flex-header {
    flex-direction: column !important;
    text-align: center !important;
  }

  main .heading-box {
    text-align: center !important;
    margin-bottom: 20px !important;
  }

  main .line {
    display: none !important;
  }

  /* Inner wrapper adjustments - only inside main */
  main .inner-wrapper {
    padding: 0 !important;
  }

  main .full-line {
    margin: 30px 0 !important;
  }

  /* Center icon adjustments - only inside main */
  main .center-icon {
    margin: 0 auto 20px auto !important;
  }
}

/* Footer responsive - separate from main content */
@media screen and (max-width: 991px) {
  .footer-section {
    padding: 40px 15px !important;
  }

  .footer-form {
    flex-direction: column !important;
    gap: 30px !important;
  }

  .footer-form>div {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
}

/* Tablet adjustments - only inside main */
@media screen and (min-width: 768px) and (max-width: 991px) {
  main .inner-hero .h1-title.large {
    font-size: 2.8rem !important;
  }

  main .h2-title,
  main .h2-title-green {
    font-size: 2rem !important;
  }

  main .content-section-green,
  main .content-section,
  main ._2-content-section {
    padding: 50px 25px !important;
  }

  main .col-md-3 {
    width: 48% !important;
    display: inline-block !important;
    margin-right: 2% !important;
  }
}