.first-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 66px;
}


.arrivals-departure {
  display: flex;
  height: 460px;
  padding: 27px 21px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--brand-dark-grey-20, #dddedf);
}

.first-section .gc-arrivals-departure {
  width: 100%;
}

/* .station-intro {
  background: var(--Disruption-Blue, #d8e6fe);
  padding: 57px 0;
  width: 100%;
} */

/* .station-intro p {
  color: var(--Brand-Primary-Off-Black, #272727);
  text-align: center;
  font-family: "Source Sans Pro";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 auto;
  max-width: 79.125rem;
}

.station-intro p a {
  color: var(--Text, #763b04);
  font-family: "Source Sans Pro";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
} */

.station-details-accordion-container {
  display: flex;
  width: calc(100% - 32px);
  flex-direction: column;
  align-items: flex-start;
  gap: 38px;
}

.station-details-accordion-container #station-details {
  color: var(--Brand-Primary-Off-Black, #272727);
  font-family: Raleway;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 0;
}

.station-detail-accordion {
  display: flex;
  padding: 14px 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid var(--Brand-Primary-Orange, #f08300);
  background: #fff;
}

.station-detail-accordion li.feature-group {
  width: 100%;
}

.station-detail-accordion-label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}

.station-detail-accordion-label:hover {
  cursor: pointer;
}

.station-overview-accordian .station-detail-accordion-label:hover {
  border-radius: var(--radius-radius-minimal, 6px) var(--radius-radius-minimal, 6px) 0px 0px;
  background: var(--colour-English-Rose, #CA123F);
}

.station-overview-accordian .station-detail-accordion-label:hover h4 {
  color: var(--colour-White, #FFF);
}

.station-detail-accordion-label h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--Brand-Primary-Off-Black, #272727);
  font-family: Raleway;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 0;
}

.station-detail-accordion-label span {
  font-family: Raleway;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: var(--Brand-Primary-Off-Black, #272727);
}

.feature-group h4::before {
  content: url(../images/icons/watting-room.png);
  font-size: 32px;
}

.icon-accessibility h4::before {
  content: url(../images/icons/accessibility-support.png);
  font-size: 32px;
}

.icon-airport h4::before,
.icon-businformation h4::before,
.icon-othertransportation h4::before {
  content: url(../images/icons/transport.png);
  font-size: 32px;
}

.icon-baggageservices h4::before {
  font-size: 32px;
}

.icon-mailandexpressservices h4::before {
  font-size: 32px;
}

.icon-cyclestorage h4::before {
  content: url(../images/icons/bicycle.png);
  font-size: 32px;
}

.icon-phonesinternetwi-fi h4::before {
  content: url(../images/icons/wifi.png);
  font-size: 32px;
}

.icon-parking h4::before {
  content: url(../images/icons/parking.png);
  font-size: 32px;
}

.icon-diningandshopping h4::before {
  content: url(../images/icons/essentials.png);
  font-size: 32px;
}

.icon-ticketingservicesinformation h4::before {
  content: url(../images/icons/ticketbuyingandcollection.png);
  font-size: 32px;
}

.icon-priorityloungeinformation h4::before {
  content: url(../images/icons/watting-room.png);
  font-size: 32px;
}

.station-detail-accordion-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  align-self: stretch;
}

.station-detail-accordion-label span.open::before {
  content: url(../images/open.svg);
  font-size: 24px;
}

.station-detail-accordion-label span::before {
  content: url(../images/close.svg);
  font-size: 24px;
}

.station-accordion-panel ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.station-accordion-panel ul li {
  display: flex;
  padding: 10px 5px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-bottom: 0.4px solid #8d8686;
  list-style: none;
  margin: 0 !important;
}

.station-accordion-panel ul li .feature-name {
  color: #0c2641;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Source Sans Pro";
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.station-accordion-panel ul li .feature-tick {
  display: none;
}

.station-accordion-panel ul li.have-tick .feature-description {
  display: flex;
  align-items: center;
  gap: 4px;
}

.station-accordion-panel ul li .feature-description.no {
  display: flex;
  align-items: center;
  gap: 4px;
}

.station-accordion-panel ul li .feature-description {
  color: #0c2641;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Source Sans Pro";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.station-accordion-panel ul li.have-tick .feature-description::before {
  content: url(../images/check.svg);
}

.station-accordion-panel ul li .feature-description.no::before {
  content: url(../images/cross.svg);
  font-size: 24px;
  width: 24px;
}

.station-accordion-panel ul li .feature-description a {
  color: var(--Text, #763b04);
}

/* @media screen and (max-width: 1219px) {
  .first-section {
    flex-direction: column;
    width: calc(100% - 32px);
  }

  .important-features {
    padding: 22px 29px;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
    box-shadow: 0px 4px 21.7px 0px rgba(0, 0, 0, 0.11);
    width: 100%;
  }

  .important-features h3 {
    font-size: 28px;
  }

  .important-features-listing {
    flex-direction: column;
    gap: 24px;
  }

  .important-features-listing li {
    width: 100%;
  }

  .arrivals-departure {
    width: 100%;
  }

  .station-intro {
    padding: 57px 12px;
  }

  .station-intro p {
    width: calc(100% - 32px);
  }

  .station-details-accordion-container {
    width: calc(100% - 32px);
  }

  .station-details-accordion-container #station-details {
    font-size: 20px;
  }
} */



.xc-block--station .address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.xc-block--station .ticket-office {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* @media (max-width: 1219px) {
  .xc-block--station .station-map-info {
    width: calc(100% - 24px);
    left: 12px;
    right: 12px;
  }

  .xc-block--station .google-map {
    visibility: hidden;
    margin-bottom: -56px;
    margin-top: -28px;
  }
} */

.coh-link:hover {
  cursor: pointer;
}

.coh-container-boxed:has(.gc-community-hub-container) {
  margin-right: 0px;
}




/* cross-country css */

.station-features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 64px;
  align-self: stretch;
  background-color: #F8EFE3;
  padding-top: 56px;
  padding-bottom: 72px;
}

.station-features>div {
  width: 100%;
}

.important-features {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.important-features h3 {
  color: var(--colour-English-Rose, #CA123F);
  font-family: "rooney-sans";
  font-size: 36px;
  font-style: italic;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}

.important-features-listing {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 64px 24px;
  width: 100%;
  justify-content: center;
}

.important-features-listing li {
  width: 169px;
  color: #000;
  text-align: center;
  font-family: "rooney-sans";
  font-size: var(--size-H4, 24px);
  font-style: italic;
  font-weight: 700;
  line-height: normal;
}

.important-features-listing li span {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

.important-features-listing li span::before {
  background-size: 82px;
  content: "";
  height: 82px;
  width: 82px;
  background-repeat: no-repeat;
}

#waiting-room::before {
  background-image: url(../images/xc-waiting-room.svg);

}

#ticket-machine::before {
  background-image: url(../images/ticket-machine.svg);
}

#baby-changing-facilities::before {
  background-image: url(../images/baby-changing-facilities.svg);
}

#baby-change::before {
  background-image: url(../images/baby-change.svg);
}

#phone-box::before {
  background-image: url(../images/phone-box.svg);
}

#toilets::before {
  background-image: url(../images/toilets.svg);
}

#trolleys::before {
  background-image: url(../images/trolleys.svg);
}

#station-buffet::before {
  background-image: url(../images/station-buffet.svg);
}

#post-box::before {
  background-image: url(../images/post-box.svg);
}

#shops::before {
  background-image: url(../images/shops.svg);
}

#showers::before {
  background-image: url(../images/showers.svg);
}

#atm-machine::before {
  background-image: url(../images/atm.svg);
}

#bureau-de-change::before {
  background-image: url(../images/bureau-de-change.svg);
}

#telephones::before {
  background-image: url(../images/icons/Telephones.svg);
}

#cycle-storage-availability::before {
  background-image: url(../images/cycle_storage.svg);

}

#car-parking::before {
  background-image: url(../images/parking.svg);
}


#impaired-access-staff::before,
#impaired-access-step-free-access::before {
  background-image: url(../images/wheelchairs.svg);
}

#tourist-information::before{
  background-image: url(../images/icons/tourist_information.png);
}

/* #cycle-storage-availability::before {
  background-image: url(../images/cycle-storage.svg);

} */

#wi-fi::before {
  background-image: url(../images/wifi.svg);

}

/* #car-parking::before {
  background-image: url(../images/parking.svg);

} 

#shop::before {
  background-image: url(../images/parking.svg);

} */

#seated-area::before {
  background-image: url(../images/icons/Seated_Area.svg);
}

.xc-block--station .station-map {
  position: relative;
  min-height: 500px;
}

.staion-detail-banner-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xc-block--station .station-map-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  flex-direction: column;
  gap: 48px;
}

.station-map-info-container {
  position: absolute;
  top: 0;
  width: 100%;
  right: 0;
  left: 0;
  z-index: 1;
  padding: 40px 0;
}

.xc-block--station .station-map-info {
  margin: 0;
  padding: 32px 70px 24px 32px;
  display: flex;
  width: 643px;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  border-radius: 6px 40px 6px 6px;
  background: rgba(255, 255, 255, 0.94);
}

.xc-block--station .station-map-info h3 {
  color: #CA123F;
  font-family: "rooney-sans";
  font-size: 32px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
}


.xc-block--station .station-map-info .station-map-wrapper h3 {
  color: #CA123F;
  font-family: "rooney-sans";
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
}

.xc-block--station .address p,
.xc-block--station .ticket-office p {
  color: #000;
  font-family: "rooney-sans";
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
}

.xc-block--station .station-map-info .button {
  display: flex;
  padding: var(--spacing-3, 24px) var(--spacing-4, 32px);
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #FFF;
  font-family: "rooney-sans";
  font-size: var(--size-Primary-Button-Text, 24px);
  font-style: italic;
  font-weight: 700;
  line-height: normal;
  width: fit-content;
  background-color: #000;
  border-radius: 6px;
  margin-top: -16px;
}

.xc-about-station-main-container {
  background-color: #F8EFE3;
  padding-top: 80px;
  padding-bottom: 80px;
}

.xc-about-station-boxed-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.xc-about-station-heading {
  color: #CA123F;
  font-family: "rooney-sans";
  font-size: 36px;
  font-style: italic;
  font-weight: 700;
  line-height: 40px;
}

.xc-about-station-boxed-container p,
.xc-about-station-description {
  color: #000;
  font-family: "rooney-sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.xc-about-station-description p{
  margin-bottom: 24px;
}

/* Vishal ---main container css code starts */
.station-overview-main-container {
  gap: 0px 38px;
  padding: 0 7rem 5rem;
}

/* vishal ---- css code ends */

.station-overview-accordian .local-taxi-table {
  width: 100%;
  border-collapse: unset;
  padding: 0px 32px 24px 32px;
}

.station-overview-accordian .local-taxi-table tbody {
  background-color: rgb(231, 205, 216);
}

.station-overview-accordian .local-taxi-table tbody tr:nth-child(2n) td {
  background-color: rgb(243, 229, 235);
}

.station-overview-accordian .local-taxi-table tr td {
  text-align: left;
  vertical-align: top;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: initial;
  padding: 0.8em;
}

.station-overview-accordian .local-taxi-table tr td a {
  background-image: linear-gradient(rgb(202 18 63), rgb(202 18 63));
  background-repeat: no-repeat;
  background-size: 0% 0.125em;
  padding-bottom: 0.25em;
  margin-bottom: -0.25em;
  font-weight: bold;
  color: var(--colour-English-Rose, #CA123F);
  background-position: left bottom 0.0625em;
  transition: background-size 0.5s, color 0.5s;
}

.station-overview-heading-container {
  display: flex;
  padding: var(--spacing-10, 80px) var(--spacing-15, 120px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-10, 80px);
  align-self: stretch;
}

.station-overview-main-container #station-details {
  color: var(--colour-English-Rose, #CA123F);
  /* Typography/Headings/H2 */
  font-family: var(--font-family-all, "rooney-sans");
  font-size: var(--size-H2, 36px);
  font-style: italic;
  font-weight: 700;
  line-height: var(--spacing-5, 40px);
  /* 111.111% */
}

.station-overview-accordian {
  border: none;
  border-radius: 0;
  gap: 15px;
  padding: 0;
  border-bottom: 1.5px solid rgba(205, 195, 186, 0.80);
}

.station-overview-accordian .station-detail-accordion-label {
  padding: var(--spacing-2, 16px) var(--spacing-4, 32px);
}

.station-overview-heading-bacground {
  border-radius: var(--radius-radius-minimal, 6px) var(--radius-radius-minimal, 6px) 0px 0px;
  background: var(--colour-English-Rose, #CA123F);
}

.station-overview-panel-open {
  border-radius: 6px;
  border: 2px solid var(--colour-Shadow-Cream, #CDC3BA);
}

.station-overview-accordian .station-detail-accordion-label h4 {
  color: var(--colour-Black, #000);
  /* Typography/Headings/H4 */
  font-family: var(--font-family-all, "rooney-sans");
  font-size: var(--size-H4, 28px);
  font-style: italic;
  font-weight: 700;
  gap: 24px;
  line-height: normal;
}

.station-overview-accordian .station-overview-heading-bacground h4 {
  color: var(--colour-White, #FFF);
}

.station-overview-accordian .station-detail-accordion-label span {
  font-family: "rooney-sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: var(--Brand-Primary-Off-Black, #272727);
}

.station-overview-accordian .feature-group h4::before {
  content: url(../images/icons/XC_Icon_Passenger_services_80x80px.svg);
  font-size: 32px;
  max-height: 62px;
}

.station-overview-accordian .icon-restrooms h4::before {
  content: url(../images/icons/Toilets.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
  font-size: 32px;  
}

.station-overview-accordian .icon-stationlocationdirections h4::before {
  content: url(../images/icons/XC_Icon_Station_Location_Direction.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
  font-size: 32px;
}

.station-overview-accordian .icon-stationinformation h4::before {
  content: url(../images/icons/XC_Icon_station_facalities_80x80px.svg);
  font-size: 32px;  
}

.station-overview-accordian .icon-accessibility h4::before {
  content: url(../images/icons/XC_Icon_Accessibility_EnglishRose_80x80px.svg);
  font-size: 32px;
}

.station-overview-accordian .icon-airport h4::before {
  content: url(../images/icons/XC_icon_airport.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
}

.station-overview-accordian .icon-businformation h4::before{
  content: url(../images/icons/XC_Icon_Bus_Service_EnglishRose_80x80px.svg);
  font-size: 32px;
}

.station-overview-accordian .icon-taxiinformation h4::before{
  content: url(../images/icons/XC_Icon_Taxi_Rank_EnglishRose_80x80px.svg);
  font-size: 32px;
}

.station-overview-accordian .icon-othertransportation h4::before {
  content: url(../images/icons/XC_Icon_Ferry_Connection_EnglishRose_80x80px.svg);
  font-size: 32px;
}
.station-overview-accordian .icon-stationseatingareas h4::before {
  content: url(../images/icons/Seated_Area.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
  font-size: 32px;
}

.station-overview-accordian .icon-ticketinghours  h4::before {
  content: url(../images/icons/Ticket_Machine.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
  font-size: 32px;
}

.station-overview-accordian .icon-baggageservices h4::before {
  content: url(../images/icons/XC_Icon_Baggage.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
}

.station-overview-accordian .icon-mailandexpressservices h4::before {
  content: url(../images/icons/XC_Icon_Parking_EnglishRose_80x80px.svg);
  font-size: 32px;
}

.station-overview-accordian .icon-cyclestorage h4::before {
  content: url(../images/icons/XC_Icon_Cycle_Storage_EnglishRose_80x80px.svg);
  font-size: 32px;
}

.station-overview-accordian .icon-phonesinternetwi-fi h4::before {
  content: url(../images/icons/Telephones.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
  font-size: 32px;
}

.station-overview-accordian .icon-parking h4::before {
  content: url(../images/icons/parking.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
  font-size: 32px;
}

.station-overview-accordian .icon-diningandshopping h4::before {
  font-size: 32px;
  content: url(../images/icons/Shopping.svg);
  transform: scale(0.0928);
  display: inline-block;
  transform-origin: top left;
  width: 62px;
}

.station-overview-accordian .icon-ticketingservicesinformation h4::before {
  content: url(../images/icons/XC_Icon_Ticket_Collection_EnglishRose_80x80px.svg);
  font-size: 32px;
}

.station-overview-accordian .icon-priorityloungeinformation h4::before {
  content: url(../images/icons/XC_Icon_Advanced_Bookings_EnglishRose_80x80px.svg);
  font-size: 32px;
}

.station-overview-accordian .icon-rentalcar h4::before {
  content: url(../images/icons/XC_Icon_Ferry_Connection_EnglishRose_80x80px.svg);
  font-size: 32px;
}

.station-overview-accordian .station-detail-accordion-label span::before {
  content: url(../images/icons/XC_Icon_accordian_close.svg);
  font-size: 24px;
}

.station-overview-accordian .station-detail-accordion-label:hover span::before {
  content: url(../images/icons/XC_Icon_accordian_close_white.svg);
  font-size: 24px;
}

.station-overview-accordian .station-detail-accordion-label span.open::before {
  content: url(../images/icons/XC_Icon_Accordian_open.svg);
  font-size: 24px;
}

.station-overview-accordian .station-accordion-panel ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin-top: 0;
  margin-bottom: 0;
}

.station-overview-accordian .station-accordion-panel p {
  padding: var(--spacing-3, 24px) var(--spacing-4, 32px);
  line-height: normal;
  font-size: 1.25rem;
}

.station-overview-accordian .station-accordion-panel ul li {
  display: flex;
  padding: var(--spacing-3, 24px) var(--spacing-4, 32px);
  border-bottom: 0.4px solid #CDC3BA;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.station-overview-accordian .station-accordion-panel ul li:last-child {
  border-bottom: none;
}

.station-overview-accordian .station-accordion-panel ul li .feature-name {
  color: #0c2641;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "rooney-sans";
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  line-height: normal;
}

.station-overview-accordian .station-accordion-panel ul li .feature-description,
.station-overview-accordian .station-accordion-panel p  {
  color: #0c2641;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "rooney-sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.station-overview-accordian .station-accordion-panel ul li .feature-description p {
  color: #0c2641;
  font-feature-settings: "liga" off, "clig" off;
  font-family: "rooney-sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0;
}

.station-overview-accordian .station-accordion-panel ul li.have-tick .feature-description::before {
  content: url(../images/icons/XC_Icon_Tick_EnglishRose_80x80px_green.svg);
}

.station-overview-accordian .station-accordion-panel ul li .feature-description.no::before {
  content: url(../images/icons/XC_Icon_cancel_80x80px.svg);
  font-size: 22px;
  height: 22px;
  width: 22px;
}

.station-overview-heading-container {
  padding: 40px 16px 80px;
}

/* Vishal's css ends */

/* Start of Search Banner CSS*/
.station-banner {
  display: flex;
  flex-direction: row;
  padding: 48px 32px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  /* Gradient setup */
  background: linear-gradient(to top, #F5A706 50%, #CA123F 50%);
  background-size: 100% 200%;
  background-position: bottom;
  border-radius: 6px;

  /* Transition when going bottom → top (collapsed state) */
  transition: background-position 0.2s ease-in-out 0.2s, 
              border-radius 0.6s ease-in-out 0.6s;
}

.station-banner:has(.expanded) {
  background-position: top;
  border-radius: 6px 6px 0 0;

  /* Transition when going top → bottom (expanded state) → no delay */
  transition: background-position 0.1s ease-in-out, 
              border-radius 0.6s ease-in-out;
}


.station-banner-description {
  color: #000;
  font-family: "rooney-sans";
  font-size: 32px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
}

.station-banner-description:has(+ .expanded) {
  color: white;
  transition: color 0.2s ease-in-out;
}

.buy-tickets {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 24px 48px;
  border-radius: 6px;
  color: #000;
  font-family: "rooney-sans";
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
  min-width: 120px;
  width: fit-content !important;
}

.buy-tickets::after {
  content: "";
  background-image: url(../images/icons/XC-Icon-down-arrow.svg);
  background-repeat: no-repeat;
  background-position-y: 5px;
  background-position-x: center;
  background-size: 12px 12px;
  width: 12px;
  height: 16px;
}

.xc-search-expanded-qtt-main-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s linear;
  border-radius: 0 0 6px 6px;
  background-color: #ca123f;
}

.xc-search-expanded-qtt-main-container.expanded {
  max-height: 800px;
  background-color: #CA123F;
  margin-top: -20px;
  transition: max-height .3s linear .1s;
}

.buy-tickets.expanded {
  background-color: #ffffff;
  font-size: 0;
  gap: 0;
}

.buy-tickets.expanded::after {
  font-size: 24px;
  content: "Close ×";
  background-image: unset;
  width: unset;
  height: unset
}

.delay-repay {
  min-width: 202px;
}

.buy-ticket-arrow-icon {
  background-image: url(../images/icons/XC-Icon-down-arrow.svg);
  background-repeat: no-repeat;
  background-position-y: 5px;
  background-position-x: center;
  background-size: 12px 12px;
  display: inline-block;
  width: 12px;
  height: 20px;
}

/* End of Search Banner CSS*/

@media screen and (min-width: 1200px) and (max-width: 1511px) {
  .important-features-listing li {
    width: calc(16.66% - 20px);
  }

  .xc-block--station .station-overview-main-container {
    padding: 0 6.05rem 5rem;
  }

  .important-features-listing li {
    font-size: 22px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {

  .important-features-listing {
    gap: 64px 48px;
  }

  .xc-block--station .station-overview-main-container {
    padding: 0 1.25rem 5rem;
    width: 100%;
    margin: 0;
  }

  .station-overview-accordian .station-accordion-panel ul li .feature-name {
    font-size: 18px;
  }

  .important-features-listing li {
    width: 160px;
    font-size: 22px;
  }

  .xc-block--station .station-map-info h3 {
    font-size: 28px;
  }

  .station-overview-main-container #station-details {
    font-size: var(--size-H2, 34px);
  }

  .xc-block--station .station-map-info .station-map-wrapper h3 {
    font-size: 18px;
  }

  .xc-block--station .address p,
  .xc-block--station .ticket-office p {
    font-size: 18px;
  }

  .xc-about-station-heading {
    font-size: 34px;
  }

  .xc-about-station-boxed-container p,
  .xc-about-station-description {
    font-size: 22px;
  }

  .station-overview-accordian .station-detail-accordion-label h4 {
    font-size: var(--size-H4, 22px);
  }

  .station-banner {
    padding: 48px 16px;
  }

  .station-banner-description {
    font-size: 28px;
  }
}

@media (max-width: 1199px) {
  .station-overview-heading-container {
    padding-bottom: 64px;
  }

  .station-overview-accordian .station-accordion-panel ul li .feature-description,
  .station-overview-accordian .station-accordion-panel p {
    font-size: 16px;
  }
}

@media (max-width: 767px) {

  .important-features-listing {
    gap: 64px 16px;
  }

  .xc-block--station .station-overview-main-container {
    padding: 0 1.25rem 5rem;
    margin: 0;
    width: 100%;
  }

  .station-overview-main-container #station-details {
    font-size: var(--size-H2, 30px);
  }

  .station-overview-accordian .station-detail-accordion-label h4 {
    font-size: var(--size-H4, 20px);
  }

  .station-overview-accordian .station-accordion-panel ul li .feature-name {
    font-size: 16px;
  }

  .station-overview-accordian .station-detail-accordion-label {
    padding: var(--spacing-2, 16px);
  }

  .important-features-listing li {
    width: calc(50% - 8px);
    font-size: 22px;
  }

  .important-features-listing li span::before {
    background-size: 72px;
    height: 72px;
    width: 72px;
  }

  .xc-block--station .station-map-wrapper {
    gap: 32px;
  }

  .xc-block--station .station-map-info {
    padding: 40px 16px 24px 16px;
    width: 328px;
  }

  .xc-block--station .station-map-info h3 {
    font-size: 24px;
  }

  .xc-block--station .station-map-info .station-map-wrapper h3 {
    font-size: 20px;
  }

  .xc-block--station .address p,
  .xc-block--station .ticket-office p {
    font-size: 16px;
  }

  .xc-block--station .station-map-info .button {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 22px;
  }

  .xc-about-station-main-container {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .xc-about-station-heading {
    font-size: 30px;
  }

  .xc-about-station-boxed-container p,
  .xc-about-station-description {
    font-size: 20px;
  }

  .swap-button {
    transform: rotate(90deg);
  }

  .station-overview-accordian .station-accordion-panel ul li,
  .station-overview-accordian .station-accordion-panel p .station-overview-accordian .local-taxi-table {
    padding: var(--spacing-2, 16px);
  }

  .station-banner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 16px;
    justify-content: center;
    align-items: center;
  }

  .station-banner-description {
    font-size: 26px;
    text-align: center;
  }

  .buy-tickets {
    width: 100%;
  }

  .delay-repay {
    min-width: 186px;
  }

  .searchresults-buy-tickets {
    font-size: 22px;
  }
}