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

/* Mobile responsive styles for content areas only */
@media screen and (max-width: 991px) {

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

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

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

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

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

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

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

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

  .h4-title {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }

  /* Side padding text - large intro paragraph */
  .side-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

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

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

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

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

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

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

  /* Image blocks responsive */
  ._5-image-block {
    height: 250px !important;
    margin-bottom: 20px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Padding adjustments for content blocks */
  .right-padding.large {
    padding-right: 0 !important;
    padding-bottom: 20px !important;
  }

  .left-padding.large {
    padding-left: 0 !important;
    padding-top: 20px !important;
  }

  /* Features grid responsive */
  .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .feature {
    text-align: center !important;
    padding: 25px 15px !important;
    margin-bottom: 20px !important;
  }

  .title-dark.big {
    font-size: 2.5rem !important;
    margin-bottom: 10px !important;
  }

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

  /* Numbered sections and circles */
  .circle-red {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Header border and structure */
  .header-flex-stretch {
    flex-direction: column !important;
    text-align: center !important;
  }

  ._2-header-border {
    flex-direction: column !important;
    align-items: center !important;
  }

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

  /* Info boxes */
  .info-boxes {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .info-box {
    width: 100% !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  /* Lists responsive */
  ul {
    padding-left: 20px !important;
  }

  ul li {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
  }

  /* Text adjustments */
  p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    text-align: left !important;
  }

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

  /* Footer responsive */
  .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;
  }

  /* Blue section adjustments */
  .content-section.blue {
    padding: 40px 15px !important;
  }

  /* ESG section specific adjustments */
  .inner-wrapper {
    padding: 0 !important;
  }

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

  ._2-less-border {
    margin: 20px 0 !important;
  }
}

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

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

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