.tx-container {
  padding-top: 0rem;
  background-image: url("./hero.jpg");
  margin-top: 0px;
  height: calc(100vh);
  background-size: cover;
  position: relative;
}

.hero-dark-gradient {
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background: black;
}

.hero-content {
  position: absolute;
  bottom: 80px;
  width: 100%;
  height: 20rem;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2.4rem;
}

.tx-hero {
  color: var(--md-default-bg-color);
  justify-content: center;
  width: 61rem;
  margin: auto;
  padding: 0 20px;
  padding-bottom: 156px;
  max-width: 100%;
}

.tx-hero h1 {
  margin-bottom: 1rem;
  text-wrap: balance;
  color: currentColor;
  text-align: center;
  font-weight: 700;
  background-color: var(--md-primary-bg-color);
}

.tx-hero__content {
  padding-bottom: 1rem;
  margin: 0 auto;
}

.tx-hero__image {
  width: 24rem;
  height: 24rem;
  order: 1;
}

.tx-hero .hero-text {
  color: var(--md-light-text);
  font-size: 48px;
  line-height: 60px;
  max-width: 735px;
  font-weight: 700;
  text-shadow: 0 4px 4px var(--md-accent-bg-color--dark-opacity);
}

.feature-item h2 svg {
  height: 30px;
  text-wrap: balance;
  float: center;
  margin-right: 10px;
  transform: translateY(10%);
}

.content-container {
  padding: 5.2rem 1rem;
}

.content-container a {
  /* color: #000; */
  text-decoration: underline;
  font-weight: bold;
}

.content-container header h1 {
  width: 100%;
  text-align: center;
  text-wrap: balance;
  font-weight: 300;
  font-size: 48px;
  line-height: 47px;
  margin-bottom: 60px;
}

.content-container header h1.white {
  color: #ffffff;
}

.content-container.gofs {
  color: rgb(0, 0, 0);
  background: var(--md-primary-fg-color);
}

.content-container.qa {
  color: rgb(0, 0, 0);
  background: var(--md-primary-bg-color);
}

.content-container.dark header h1 {
  color: var(--md-default-fg-color);
  text-align: center;
}

.content-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 61rem;
}

.microtransit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  width: 100%;
}

.microtransit-item {
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  hyphens: none;
  align-items: center;
  text-align: center;
  text-wrap: balance;
  font-size: 18px;
  line-height: 22px;
}

.microtransit-item p {
  overflow-wrap: break-word;
  text-wrap: balance;
  hyphens: none;
  hyphens: auto;
}

.gofs-container {
  background: #fff;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
  padding: 5% 10%;
}

.gofs-container p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  line-height: 1.5;
}

.gofs-container a {
  /* color: #000; */
  text-decoration: underline;
  font-weight: bold;
}

/* Key Questions on Using... layout */
.gofs-qa {
  padding: clamp(24px, 5vw, 48px) 0;
  background: var(--md-primary-bg-color);
}

.gofs-qa__wrap a {
  /* color: #000; */
  text-decoration: underline;
  font-weight: bold;
}

.gofs-qa__wrap {
  display: grid;
  margin: 0 auto;
  text-wrap: balance;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  width: 100%;
  align-items: center;

  margin-left: auto;
  margin-right: auto;
  max-width: 61rem;
}

/* Left visual (circle + phone image) */
.gofs-visual {
  position: relative;
  align-items: center;
  object-fit: contain;
}

/* Right column */
.gofs-qa__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gofs-qa__heading {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-wrap: balance;
  margin: 0 0 8px 0;
}

/* FAQ items */
.gofs-faq__item {
  margin: 0;
}

.gofs-faq__title {
  color: var(--md-primary-fg-color);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px 0;
  text-wrap: balance;
}

.gofs-faq__text {
  color: var(--md-secondary-fg-color-white);
  opacity: 0.9;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.who-can-i-contact {
  margin-top: 0px;
  margin-bottom: 0px;
  text-wrap: balance;
}

.white-thick-hr {
  border: none;
  background-color: #fff;
  height: 4px;
  margin: 40px 0;
  /* adjust this single value to tune both sides */
}

/** Which standard(s) should be used? section **/
.mdx-list {
  display: grid;
  grid-template-columns: 1fr 2fr auto 2fr;
  grid-auto-rows: auto;
  gap: 12px;
}

.mdx-list>* {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px;
  border-top: 2px solid var(--md-secondary-fg-color-white);
}

.mdx-list>*:last-child {
  border-bottom: 2px solid var(--md-secondary-fg-color-white);
}

.mdx-list-item {
  display: contents;
  /* let children participate directly in grid */
}

.mdx-list-item>* {
  justify-content: flex-start;
  /* was center before */
}

.mdx-list-item:nth-child(1)>*,
.mdx-list-item:nth-child(3)>* {
  padding-left: 5px;
  padding-right: 5px;
}

.icon-span-2 {
  grid-row: span 2;
}

.mdx-list-item .icon-holder {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdx-list-item .arrow-holder {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-holder-double {
  flex-direction: column;
  margin-top: 30px;
  gap: 30px;
  /* Adjust spacing between arrows as needed */
  height: auto;
}

.mdx-list-item .text-content {
  width: calc(100% - 84px - 30px);
}

/** TODO: make this into a generic h3 style **/
.mdx-list-item .text-content h3 {
  font-weight: 700;
  line-height: 30px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 26px;
  text-wrap: balance;
  color: #333333;
  /** TODO: change into var **/
}

.mdx-list-item .text-content h3.light {
  font-weight: 400;
  margin-bottom: 15px;
  text-wrap: balance;
}

/** TODO: make this into a generic p style **/
.mdx-list-item .content {
  font-weight: 400;
  line-height: 30px;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 26px;
}

/**/

.mdx-list-item .icon-header {
  width: 100%;
  display: flex;
  align-items: center;
}

.mdx-list-item .icon-header h2 {
  margin: 0;
  margin-left: 0.6rem;
}

.mdx-list-item .icon-header .icon-holder {
  width: 2.2rem;
  height: 2.2rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-holder {
  grid-column: 1;
}

.text-content:nth-of-type(1) {
  grid-column: 2;
}

.arrow-holder {
  grid-column: 3;
}

.text-content:nth-of-type(2) {
  grid-column: 4;
}

.mdx-list-item .icon-header svg {
  fill: #AEEA00;
}

/* Which standard section */
:root {
  --icon-size: 84px;
  --arrow-size: 32px;
}

.whichstandard {
  display: grid;
  grid-template-columns: var(--icon-size) 2fr auto 2fr;
  /* cols 1..4 */
  grid-auto-rows: auto;
  gap: 12px;
  align-items: center;
}

.whichstandard>* {
  display: contents;
}

/* Row items */
.whichstandard__item>* {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  height: 100%;
}

.whichstandard__item {
  border-top: 4px solid var(--md-secondary-fg-color-gray);
}

.whichstandard__item:last-child {
  border-bottom: 4px solid var(--md-secondary-fg-color-gray);
}

.whichstandard__rule,
.whichstandard__rule-bottom {
  display: block;
  grid-column: 1 / -1;
  height: 4px;
  background: var(--md-secondary-fg-color-gray);
  margin: 0;
}

.whichstandard__item--no-icon .whichstandard__rule {
  display: none !important;
}

/* Columns placement */
.whichstandard__icon {
  grid-column: 1;
  width: var(--icon-size);
  height: var(--icon-size);
  justify-content: center;
}

.whichstandard__icon img,
.whichstandard__arrow img {
  width: 100%;
  /* NEW */
  height: 100%;
  /* NEW */
  object-fit: contain;
  /* NEW */
}

.whichstandard__what {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  /* stack title + subtitle */
  justify-content: center;
  /* center vertically in the grid cell */
  align-items: flex-start;
  /* left-align text in desktop */
  text-align: left;
}

.whichstandard__arrow {
  grid-column: 3;
  width: var(--arrow-size)+10px;
  height: var(--arrow-size);
  justify-content: center;
  padding-right: 10px;
}

.whichstandard__answer {
  grid-column: 4;
}

/* Merge icon over rows 3–4 */
.whichstandard__item--icon-span-2 .whichstandard__icon {
  grid-row: span 2;
  /* already there */
  align-self: center;
  /* NEW: centers between rows 3 & 4 */
  /* keep its fixed height so it doesn't stretch across both rows */
  height: var(--icon-size);
}

/* Row 4 has no icon: shift its cells right */
.whichstandard__item--no-icon .whichstandard__what {
  grid-column: 2;
}

.whichstandard__item--no-icon .whichstandard__arrow {
  grid-column: 3;
}

.whichstandard__item--no-icon .whichstandard__answer {
  grid-column: 4;
}

/* Typography preserved */
.whichstandard__what h3,
.whichstandard__answer h3 {
  font-weight: 700;
  line-height: 30px;
  margin: 0;
  font-size: 26px;
  text-wrap: balance;
  color: #333333;
}

.whichstandard__answer h3.light,
.whichstandard__what h3.light {
  font-weight: 400;
  margin-bottom: 0px;
}

/* Double arrow layout if used */
.whichstandard__arrow--double {
  flex-direction: column;
  gap: 30px;
  height: auto;
}

.whichstandard__what,
.whichstandard__answer {
  padding-top: 6px;
  padding-bottom: 0;
}

.learn-more-button-container {
  margin-top: 60px;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

/** why choose gtfs section end **/

.top-hr {
  margin-top: 42px;
  align-items: center;
}

.feature-item {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  box-sizing: border-box;
  /* top | right | bottom | left */
  padding: 3px 20px 7px 20px;
  word-break: break-word;
}

.feature-item h2 {
  color: #333;
  font-weight: 300;
  font-size: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: inherit;
}

.feature-item p {
  font-size: 16px;
  line-height: 1.8em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: #111;
  margin: 0 0 10px;
  display: block;
}


/* Small tablets */
@media screen and (max-width: 1000px) {
  .tx-container {
    background-position: -350px center;
  }

  .gofs-qa__wrap {
    grid-template-columns: 1fr;
  }

  .gofs-visual {
    display: none;
  }

  .who-can-i-contact {
    margin-top: 5px;
    margin-bottom: 0px;
    text-wrap: balance;
  }
}

/* Small tablets */
@media screen and (max-width: 800px) {
  .tx-container {
    background-position: -500px center;
  }

  .gofs-qa__wrap {
    grid-template-columns: 1fr;
  }

  .gofs-visual {
    display: none;
  }

  .who-can-i-contact {
    margin-top: 10px;
    margin-bottom: 0px;
    text-wrap: balance;
  }
}

/* Phones */
@media screen and (max-width: 600px) {
  .tx-container {
    background-position: -750px center;
  }

  .hero-content {
    bottom: 0;
  }

  .tx-hero {
    padding-bottom: 10px;
    transform: scale(0.99);
    transform-origin: top center;
  }

  .tx-hero .hero-text {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .mdx-list {
    grid-template-columns: 1fr;
    /* single column */
  }

  .mdx-list>* {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px;
    border-top: 4px solid var(--md-secondary-fg-color-gray);
  }

  .mdx-list>*:first-child {
    border-top: none;
  }

  .mdx-list>*:last-child {
    border-bottom: 4px solid var(--md-secondary-fg-color-gray);
  }

  .mdx-list-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .mdx-list-item>* {
    justify-content: center;
    text-align: center;
  }

  .mdx-list-item .text-content {
    width: 100%;
    text-align: center;
  }

  .mdx-list-item .text-content a {
    font-weight: 400;
  }

  .mdx-list-item .icon-holder {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    margin-right: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mdx-list-item .arrow-holder {
    display: none;
  }

  .mdx-list-item .arrow-holder-double {
    display: none;
  }

  .mdx-list-item .text-content h3 {
    text-align: center;
    font-weight: 700;
  }

  .mdx-list-item .text-content h3.light {
    font-weight: 400;
  }

  .mdx-list-item .content {
    margin-left: -80px;
  }

  .microtransit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
  }

  .microtransit-item {
    flex-direction: column;
    /* was row */
    align-items: center;
    /* center horizontally */
    text-align: center;
    /* center text */
    padding: 16px 20px;
    /* optional: slightly tighter vertical padding */
  }

  .microtransit-item:last-child {
    border-bottom: 2px solid var(--md-secondary-fg-color-white);
  }

  .microtransit-item svg {
    margin: 0 0 12px 0;
    /* remove right gap, add space below icon */
  }

  .microtransit-item div {
    text-align: center;
    width: 100%;
  }

  .arrow-holder {
    display: none;
  }

  .arrow-holder-double {
    display: none;
  }

  .gofs-qa__wrap {
    grid-template-columns: 1fr;
  }

  .gofs-visual {
    display: none;
  }

  .who-can-i-contact {
    margin-top: 15px;
    margin-bottom: 0px;
    text-wrap: balance;
  }

  .whichstandard {
    padding-inline-start: 0;
    /* was default ~40px causing extra left space */
    margin-inline-start: 0;
    list-style: none;
  }

  /* put every piece in the single column */
  .whichstandard__icon,
  .whichstandard__what,
  .whichstandard__answer,
  .whichstandard__rule,
  .whichstandard__rule-bottom {
    grid-column: 1 / -1 !important;
    /* KEEP */
    display: flex;
    /* or block, depending on the element */
  }

  .whichstandard__rule,
  .whichstandard__rule-bottom {
    display: none !important;
  }

  /* hide arrow on mobile (keep if you already have this) */
  .whichstandard__arrow {
    display: none;
  }

  /* center the narrow icon box within the grid track */
  .whichstandard__icon {
    justify-self: center;
    width: calc(var(--icon-size) + 10px);
    /* icon width + 5px padding each side */
    padding: 0 5px;
  }

  .whichstandard__icon img {
    display: block;
    margin: 0 auto;
  }

  /* center text blocks horizontally */
  .whichstandard__what,
  .whichstandard__answer {
    align-items: center;
    /* override desktop flex-start */
    justify-content: center;
    /* keep vertical balance if row grows */
    text-align: center;
  }

  .whichstandard__what::after,
  .whichstandard__answer::after {
    content: none !important;
  }

  /* show the existing row rule element, but only from the 2nd row on */
  .whichstandard>li:not(:first-of-type) .whichstandard__rule {
    display: block !important;
    /* re-enable if previously hidden */
    grid-column: 1 / -1 !important;
    /* span full width */
    height: 4px;
    background: #F0F0F0;
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .whichstandard>li.whichstandard__item--no-icon .whichstandard__rule {
    display: none !important;
  }

  /* keep any bottom rule disabled */
  .whichstandard__rule-bottom {
    display: none !important;
  }

}

@media screen and (min-width: 60em) {
  .md-sidebar--secondary {
    display: none;
  }

  .tx-hero__content {
    max-width: 22rem;
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
    margin-left: 1rem;
    margin-right: 4rem;
    align-items: center;
  }
}

@media screen and (min-width: 76.25em) {

  .md-sidebar--primary {
    display: none;
  }

  .top-hr {
    width: 100%;
    display: flex;
    max-width: 61rem;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0.2rem;
  }

  .bottom-hr {
    margin-top: 10px;
    width: 100%;
    display: flex;
    max-width: 61rem;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0.2rem;
  }

  .feature-item {
    flex: 1;
    min-width: 0;
  }

  .feature-item:hover {
    background-color: var(--md-highlight-color);
    border-radius: 3px;
  }
}

/** Animations **/
.fade-in,
.fade-in-2,
.fade-in-3 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in.visible,
.fade-in-2.visible,
.fade-in-3.visible {
  opacity: 1;
  transform: translateY(0);
}

.no-js .fade-in,
.no-js .fade-in-2,
.no-js .fade-in-3 {
  opacity: 1;
  transform: translateY(0);
}