:root {
  --window-background: #1A2023;
  --footer-foreground: #bbb;
  --new-ui-foreground: #1881CC;
  --interface-foreground: #FAB3A9;
  --meshing-foreground: #A8F9FF;
  --computation-foreground: #C2C094;
  --mapping-foreground: #BDADEA;
  --accessibility-foreground: #7FB285;
  --demos-foreground: #FFB685;
  --roadmap-foreground: #8655d4;
  --faq-foreground: #e0d867;
  --button: #1881CC;
  --button-hover: #0D5385;
  --link: #6BC2FF;
  --default-max-width: 1200px;
  --default-extend-width: 1600px;
}

p {
  font-size: 20px;
  color: white;
}

h1 {
  font-size: 24px;
  color: var(--window-background);
}

h2 {
  font-size: 16px;
  color: white;
}

@media (max-width: 1200px) {
  p {
    font-size: 16px;
    color: white;
  }

  h1 {
    font-size: 18px;
    color: var(--window-background);
  }

  h2 {
    font-size: 14px;
    color: white;
  }
}

@media (max-width: 750px) {
  p {
    font-size: 14px;
    color: white;
  }

  h1 {
    font-size: 14px;
    color: var(--window-background);
  }

  h2 {
    font-size: 12px;
    color: white;
  }
}

@font-face {
  font-family: 'SegoeUI';
  src: url('../../fonts/segoeuithis.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SegoeUIBold';
  src: url('../../fonts/segoeuithibd.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SegoeUIItalics';
  src: url('../../fonts/segoeuithisi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* TODO: Awesomefonts */

body {
  /* font-family: 'SegoeUI'; */
}

/*Content between HEC header/footer.*/
/*#content {
  background: var(--window-background);
}*/

#app {
  margin: 0;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), /* Main black layer */
  radial-gradient(circle at 100% 0%, rgba(0, 50, 100, 0.4), transparent 50%), /* Blue essence #1 */
  radial-gradient(circle at 00% 30%, rgba(0, 50, 100, 0.24), transparent 50%), /* Blue essence #1 */
  radial-gradient(circle at 70% 80%, rgba(0, 50, 100, 0.3), transparent 50%), /* Blue essence #2 */
  radial-gradient(circle at 50% 50%, rgba(0, 50, 100, 0.3), transparent 50%); /* Blue essence #3 */
  background-blend-mode: screen; /* Blends the layers */
  background-size: cover; /* Ensures it covers the entire screen */
  z-index: -1;
}

#content {
  background: transparent !important;
  backdrop-filter: blur(50px);
}

  #content::after {
    filter: none !important;
  }

#site-footer {
  width: 100%;
  color: var(--footer-foreground);
}

  /*paragraphs in footer*/
  #site-footer p {
    color: var(--footer-foreground);
  }

  /*a items in footer*/
  #site-footer a {
    color: var(--footer-foreground) !important;
  }


/*footer backgrund*/
#skin-footer-background {
  background: var(--window-background);
}

/*entire background*/
html, body, footer {
  background: var(--window-background) !important;
}

/*header that says "US Army Corps of Engineers*/
#header-title {
  background: rgba(26, 32, 35, 0.8);
  backdrop-filter: blur(16px);
  color: white;
  border-radius: 0 0 8px 8px !important;
}

.footer-description p {
  font-size: 14px;
}

/*navigation header*/
#header-menu {
  backdrop-filter: blur(16px);
  background: rgba(0, 0, 0, 0.8);
}

/*breadcrumb*/
.breaderbox {
  display: none;
}

/*search bar*/
#site-search {
  border-radius: 6px !important;
}

.a2025content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  align-self: center;
}

#beta-tag {
  margin: -30px 0 48px 0;
  font-weight: 900;
  font-size: 28px;
  color: #1881cc;
}

.chunk-header {
  font-size: 48px;
  align-self: flex-start;
  font-weight: 600;
  margin: 256px 0 24px 24px;
  max-width: var(--default-max-width);
}

@media(max-width: 1200px) {
  .a2025content {
    padding: 48px;
  }

  #beta-tag {
    margin: -20px 0 100px 0;
    font-size: 20px;
  }

  .chunk-header {
    font-size: 40px;
  }
}

@media(max-width: 750px) {
  .a2025content {
    padding: 24px;
  }

  #beta-tag {
    margin: -10px 0 100px 0;
    font-size: 14px;
  }

  .chunk-header {
    font-size: 34px;
  }
}

.ras-header-image {
  object-fit: cover !important;
  padding: 24px 24px 0px 24px;
  width: 50%;
  margin: 0px 0 0 0 !important;
  min-width: 400px;
  max-width: 800px;
}

.ras-header-image-background {
  object-fit: cover !important;
  padding: 24px;
  width: 75%;
  margin: 100px 0 200px 0 !important;
  filter: blur(100px);
}

/*section-block*/
.section-block-fiftyfifty {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: row;
  margin: 24px 0 24px 0;
}

.section-block-twothirds {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: row;
  margin: 24px 0 24px 0;
}

.section-block-twothirds-left {
  flex: 2 !important;
}

/*section-horizontal*/
.section-horizontal {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  margin: 24px 0 24px 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow */
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

  .section-horizontal:hover {
    transform: scale(1.015); /* Slightly increases the size */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Adds a more pronounced shadow */
  }

  .section-horizontal > img {
    width: 50%;
    border-radius: 12px 12px 0 0;
    margin: 24px 24px 0 24px;
    align-self: flex-end;
  }

.section-block-quarter {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: row;
  margin: 24px 0 24px 0;
}

/*section-horizontal-reverse*/
.section-horizontal-reverse {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  margin: 24px 0 24px 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow */
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

  .section-horizontal-reverse p {
    align-self: flex-end;
    text-align: right;
  }

  .section-horizontal-reverse:hover {
    transform: scale(1.015); /* Slightly increases the size */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Adds a more pronounced shadow */
  }

  .section-horizontal-reverse > img {
    width: 50%;
    border-radius: 12px 12px 0 0;
    margin: 24px 24px 0 24px;
    align-self: flex-end;
  }


/*section-vertical-left*/
.section-vertical-left {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column-reverse;
  margin: 0 24px 0 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow */
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

  .section-vertical-left:hover {
    transform: scale(1.015); /* Slightly increases the size */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Adds a more pronounced shadow */
  }

  .section-vertical-left > img {
    width: 95%;
    margin: 0 0 12px 0;
    border-radius: 12px;
    align-self: center;
  }

.section-vertical-right {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column-reverse;
  margin: 0 0 0 24px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow */
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

  .section-vertical-right:hover {
    transform: scale(1.015); /* Slightly increases the size */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Adds a more pronounced shadow */
  }

  .section-vertical-right > img {
    width: 95%;
    margin: 0 0 12px 0;
    border-radius: 12px;
    align-self: center;
  }

/*section-content*/
.section-content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
  width: 50%;
  padding: 24px 24px 24px 24px;
}

.section-header {
  color: #149ee3;
  font-weight: 600;
  font-size: 22px;
  max-width: var(--default-max-width);
}

.section-description {
  font-weight: 500;
  font-size: 16px;
  opacity: 0.85;
  line-height: 2;
}

.section-content-vertical {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 36px 36px 36px 36px;
}


@media(max-width: 750px) {
  .section-horizontal {
    flex-direction: column-reverse;
    justify-content: stretch;
    align-items: flex-start;
  }

    .section-horizontal > img {
      margin: 24px;
      border-radius: 8px;
      width: 90%;
    }

  .section-content {
    width: 100%;
  }

  .section-block-fiftyfifty {
    flex-direction: column;
    margin: 48px 0 48px 0;
  }

  .section-vertical-left {
    margin: 0;
  }

  .section-vertical-right {
    margin: 48px 0 0 0;
  }

  .section-block-twothirds {
    flex-direction: column;
    margin: 48px 0 48px 0;
  }

  .section-block-twothirds-left {
  }

  .section-horizontal-reverse {
    flex-direction: column;
    margin: 48px 0 48px 0;
  }

    .section-horizontal-reverse p {
      align-self: flex-start;
      text-align: left;
    }

    .section-horizontal-reverse > img {
      margin: 24px;
      border-radius: 8px;
      width: 90%;
    }
}

/* Section List with Images */
.section-list {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%; /* Adjust as needed */
  margin: 20px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.00);
  border-radius: 16px;
  max-width: var(--default-max-width);
}

.section-list-container {
  display: flex;
  max-width: 100%;
  height: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  padding: 10px;
  border-radius: 16px;
}

  .section-list-container.left {
    flex: 1;
  }

  .section-list-container.right {
    flex: 2;
    width: 120%;
    position: relative; /* Required for absolute positioning of images */
    /* width: 100%; /* Ensure the right container takes up its space */
    /* height: 300px; /* Adjust based on your design */
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(50%);
  }

.section-list-bullet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  margin-bottom: 30px; /* Space between items */
  background: rgba(255, 255, 255, 0.05);
  text-align: left; /* Center text horizontally */
  border-radius: 16px;
  height: auto;
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Image Styles */
.right img {
  opacity: 0; /* Initially hide all images */
  transition: opacity 0.2s ease; /* Smooth transition for opacity */
  position: absolute; /* Ensure images stack on top of each other */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure images cover the area */
}

/* Ensure other images are hidden when hovering */
.section-list-container.right:hover img {
  opacity: 1;
}

.image-center-large {
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically (if container has height) */
  width: 100%; /* Adjust as necessary */
  height: auto; /* Adjust as necessary */
  max-width: var(--default-extend-width);
}

  .image-center-large img {
    border-radius: 16px;
    max-width: 100%; /* Prevent overflow */
    height: auto; /* Maintain aspect ratio */
  }


.image-right img {
  position: relative;
  border-radius: 16px;
  width: 100%;
  align-items: center;
  object-fit: contain;
  border-radius: 16px;
  transform: translateX(50%);
}

/*Individual Sections*/
#ras-new-ui {
  color: var(--new-ui-foreground) !important;
  max-width: var(--default-extend-width);
  margin: 0 10%;
}

  #ras-new-ui .chunk-header {
    color: var(--new-ui-foreground) !important;
    max-width: var(--default-max-width);
  }

  #ras-new-ui .section-header {
    color: var(--new-ui-foreground) !important;
    max-width: var(--default-max-width);
  }

#ras-interface {
  max-width: var(--default-max-width);
}

  #ras-interface .chunk-header {
    color: var(--interface-foreground) !important;
  }

  #ras-interface .section-header {
    color: var(--interface-foreground) !important;
  }

#ras-meshing {
  max-width: var(--default-max-width);
}

  #ras-meshing .chunk-header {
    color: var(--meshing-foreground) !important;
  }

  #ras-meshing .section-header {
    color: var(--meshing-foreground) !important;
  }

#ras-computation {
  max-width: var(--default-max-width);
}

  #ras-computation .chunk-header {
    color: var(--computation-foreground) !important;
  }

  #ras-computation .section-header {
    color: var(--computation-foreground) !important;
  }

#ras-mapping {
  max-width: var(--default-max-width);
}

  #ras-mapping .chunk-header {
    color: var(--mapping-foreground) !important;
  }

  #ras-mapping .section-header {
    color: var(--mapping-foreground) !important;
  }

#ras-accessibility {
  max-width: var(--default-max-width);
}

  #ras-accessibility .chunk-header {
    color: var(--accessibility-foreground) !important;
  }

  #ras-accessibility .section-header {
    color: var(--accessibility-foreground) !important;
  }

#ras-demos {
  width: 100%;
  max-width: var(--default-max-width);
}

  #ras-demos .chunk-header {
    color: var(--demos-foreground) !important;
  }

#ras-demos-content {
  align-self: center;
  justify-self: center;
  text-align: center;
  margin: 0px 0px 20px 12px;
  font-weight: 500;
  opacity: 0.85;
  font-size: 16px;
  max-width: var(--default-max-width);
}

#ras-roadmap {
  max-width: var(--default-max-width);
}

  #ras-roadmap .chunk-header {
    color: var(--roadmap-foreground) !important;
  }

#ras-faq-header {
  color: var(--faq-foreground) !important;
}

#ras-roadmap-content {
  text-indent: each-line 64px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 2;
  max-width: var(--default-max-width);
  margin-bottom: 40px;
  font-size: 16px;
  margin: 24px 24px 48px 24px;
}

@media(max-width: 750px) {
  #ras-roadmap-content {
    text-indent: each-line 24px;
  }
}

#ras-faq {
  max-width: var(--default-max-width);
}

  #ras-faq .chunk-header {
    color: var(--faq-foreground) !important;
  }

  #ras-faq .section-header {
    color: var(--faq-foreground) !important;
  }

#ras-outro {
  max-width: var(--default-max-width);
}

#ras-outro .chunk-header {
  margin: 0px 0 24px 24px;
  color: var(--faq-foreground) !important;
}

#ras-closing {
  max-width: var(--default-max-width);
  margin: 256px 48px 0px 48px;
  font-size: 16px;
}

.box-usace-wrapper {
  position: fixed;
  left: 0;
  margin: 48px 48px 48px 48px;
}

.box-usace a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 700;
}

.box-usace li {
  border-width: 0 !important;
  border-radius: 8px;
  text-align: right;
}

.box-usace a {
  border-width: 0 !important;
  border-radius: 8px;
  text-align: right;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
}

  .box-usace a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(24px);
    color: white !important;
  }

.ras-collage-image {
  border-radius: 16px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
  border: 1px solid #333;
  margin: 0px 0px 256px 0px;
}

.ras-collage-image-small {
  max-width: 50%;
}

.ras-collage-image-regular {
  max-width: 66%;
}

.ras-collage-image-large {
  max-width: 99%;
}

#collage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 50%;
}

#ras-preamble {
  color: #1881cc;
}

#preamble {
  max-width: 100%;
}

.preamble-wrapper {
  max-width: var(--default-max-width);
  flex-direction: column;
  padding: 24px;
}

#preamble-content {
  text-indent: each-line 64px;
  font-weight: 500;
  margin: 0px 0 48px 0;
  opacity: 0.85;
  line-height: 2;
  max-width: var(--default-max-width);
}

@media(max-width: 750px) {
  #collage {
    flex-direction: column;
    max-width: var(--default-max-width);
  }

  .ras-collage-image {
    margin: 0 0 48px 0 !important;
    width: 100%;
    max-width: 70%;
  }

  #preamble-content {
    text-indent: each-line 24px;
  }
}

.preamble-greeting {
  align-self: center;
  justify-self: center;
  text-align: center;
  margin: 0px 0 48px 0;
  font-weight: 600;
  max-width: var(--default-max-width);
}

#preamble-closing {
}

/* Use the whole width of the page */
#content .page-container {
  max-width: 10000px !important;
}

#site-footer .page-container {
  max-width: var(--default-max-width) !important;
}

#main-header .page-container {
  max-width: var(--default-max-width);
}

/* Roadmap */
.year {
  padding: 20px;
  width: 100%;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex: 1; /* Allow year boxes to stretch equally */
  font-size: 16px; /* Default font size */
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.year h1 {
  font-weight: bold;
  color: white;
  font-size: 36px;
}

.year-fy25 {
  /*background-color: var(--interface-foreground);*/
}

.year-fy26 {
  /*background-color: var(--meshing-foreground);*/
}

.year-fy27 {
  /*background-color: var(--mapping-foreground);*/
}

.features {
  flex: 4;
  display: flex;
  padding-left: 20px;
  flex-direction: column;
  gap: 20px;
}

.feature-header {
  margin-bottom: 12px;
  margin-left: 8px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  margin-top: 96px;
}

.feature-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* Allow wrapping of cards */
}

/* Equal height for all cards */
.feature-row {
  align-items: stretch; /* Ensure all cards in a row stretch equally */
}

.feature-card:hover {
  transform: scale(1.05); /* Slightly grow the card on hover */
}

.actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;

  margin: 48px 0 96px 0;
}

/* Download Button */
.download-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  border-radius: 12px;
  margin: 0 0 0 0;
  width: fit-content;
}

.download-container img {
  margin: 0 0 0 0;
}

.icon-caption-container {
  display: flex;
  flex-direction: column; /* Stack icon and caption vertically */
  align-items: center;
  margin-top: -10px;
  margin-right: 20px;
  background-color: transparent;
}

.icon {
  width: 96px;
  height: 48px;
  margin-bottom: 5px;
  background-color: transparent;
}

.download-caption {
  font-size: 14px;
  text-align: center;
  font-weight: 900;
  margin: -4px 0 0 0;
  color: #1881cc;
  font-family: 'Open Sans';
}

.button-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  align-content: center;
  background-color: transparent;
}

.download-button {
  display: inline-flex; /* Use flexbox to align icon and text */
  align-items: center;
  padding: 14px 45px;
  font-size: 20px;
  color: white !important;
  background-color: var(--button);
  border: none;
  border-radius: 12px;
  text-decoration: none; /* Remove underline */
  transition: background-color 0.1s ease;
  line-height: 28px;
  margin-bottom: 7px;
}

  .download-button .icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    margin-bottom: 0px;
    vertical-align: middle;
    display: block;
  }

  .download-button:hover {
    background-color: var(--button-hover); /* Darker shade on hover */
    text-decoration: none; /* Remove underline */
  }

.download-info {
  font-size: 12px;
  color: white;
  text-align: center;
}

.link-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: transparent;
  margin-bottom: 100px;
}

  .link-row span {
    margin: 0 5px;
  }

.clickable-link {
  display: block;
  font-size: 14px;
  color: var(--link) !important;
  text-decoration: none;
  margin-top: 10px;
  text-align: center;
}


  .clickable-link:hover {
    text-decoration: underline; /* Underline on hover for emphasis */
  }

@media (max-width: 1200px) {
  .button-container {
    align-items: center;
  }

  .download-button {
    font-size: 20px;
    padding: 14px 30px;
  }

  .getting-started {
    font-size: 12px;
  }
}

@media (max-width: 750px) {
  .download-button {
    font-size: 18px;
    padding: 12px 25px;
  }

  .icon {
    width: 80px;
    height: 40px;
  }

  .caption {
    font-size: 12px;
  }

  .getting-started {
    font-size: 12px;
  }
}


/* Large UI sections */
.section-content-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  max-width: var(--default-extend-width);
  margin: auto; /* Center the container */
}

.section-content-image-left {
  flex: 1; /* Allow the left container to take available space */
  padding: 20px; /* Add padding inside the left container */
  max-width: var(--default-extend-width);
}

.section-content-image-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  /*transform: translateX(50%);*/
}

  .section-content-image-right img {
    border-radius: 16px;
    max-width: 100%; /* Prevent overflow */
    height: auto; /* Maintain aspect ratio */
  }

/* Outro */
.outro-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  padding: 20px;
  margin-bottom: 50px;
}

.outro-box {
  flex: 1;
  margin: 10px;
}

  .outro-box img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

/* Responsive Styles */
@media (max-width: 750px) {
  .outro-container {
    flex-direction: column; /* Stack images in a column */
  }
}


/* Videos */
.video-container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  justify-content: space-between;
  max-width: var(--default-max-width);
  margin: 0 0 50px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow */
}

.video-box {
  flex: 1 1 calc(33.33% - 20px); /* Default: 3 boxes per row */
  margin: 10px;
  border-radius: 8px;
  padding: 0px;
  display: flex;
  flex-direction: column; /* Stack title and video vertically */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow */
}

.video-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: white;
  background-color: transparent;
}

.video-box iframe {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .video-box {
    flex: 1 1 calc(50% - 20px); /* 2 boxes per row */
  }
}

@media (max-width: 750px) {
  .video-box {
    flex: 1 1 100%; /* 1 box per row */
  }

  .video-title {
    font-size: 14px; /* Smaller title font size */
  }

  .video-box iframe {
    height: 150px; /* Adjust iframe height for smaller screens */
  }
}


/* Responsive Styles */
@media (max-width: 1200px) {
  .video-box {
    flex: 1 1 calc(50% - 20px); /* 2 boxes per row */
  }
}

@media (max-width: 750px) {
  .video-box {
    flex: 1 1 100%; /* 1 box per row */
  }

  .video-title {
    font-size: 14px; /* Smaller title font size */
  }

  .video-box iframe {
    height: 150px; /* Adjust iframe height for smaller screens */
  }
}


/* FAQ */
.faq-container {
  max-width: var(--default-max-width);
  width: 100%;
  margin: auto;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.00);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.faq-item {
  width: 100%;
  border-bottom: 1px solid var(--faq-foreground);
  margin: 0 24px;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Center items vertically */
  padding: 12px 24px;
  margin: 12px 0;
  border-radius: 16px;
  cursor: pointer;
  color: white;
  background-color: rgba(0, 0, 0, 0.00);
  transition: background-color 0.1s ease;
  height: 60px; /* Set a specific height if needed */
  font-weight: normal;
}

  .faq-question p {
    margin: 0; /* Remove default margin for better centering */
  }

  .faq-question:hover {
    background-color: rgba(256, 256, 256, 0.05);
  }

.faq-answer {
  max-height: 0; /* Start with no height */
  overflow: hidden; /* Hide overflowing content */
  transition: max-height 0.3s ease; /* Smooth transition for height */
  color: white;
  margin: 0 30px;
  background-color: rgba(0, 0, 0, 0.00);
}

.faq-answer p {
  font-size: 16px;
}

  .faq-answer.open {
    max-height: 200px; /* Set a max height when open (adjust as needed) */
  }

.toggle-icon {
  fill: white;
  transition: transform 0.3s;
}

.faq-question.active .toggle-icon {
  transform: rotate(180deg); /* Rotate the icon when active */
}

/* Roadmap */
.roadmap-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch; /* Ensure the container stretches */
}

.year-boxes {
  flex: 1;
  max-width: 10%; /* Thinner year boxes */
  padding-right: 20px;
  border-right: 2px solid #8655d4;
  display: flex;
  flex-direction: column; /* Align year boxes vertically */
}


.feature-card {
  flex: 1 1 calc(25% - 20px); /* Default: 4 cards per row */
  align-content: center;
  /*background-color: rgba(255, 255, 255, 0.05);*/
  background-color: rgba(89, 29, 184, 0.1);
  padding: 16px;
  border-radius: 12px;
  /*border: 1px solid #4300ad;*/
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow */
  min-width: 150px; /* Minimum width for responsiveness */
  height: 150px; /* Fixed height for uniformity */
  transition: transform 0.3s ease; /* Smooth transition for transform */
}

.feature-card p {
  font-size: 16px;
}

.blank {
  background-color: transparent;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0); /* Adds a subtle shadow */
}

.feature-card:hover {
  transform: scale(1.05); /* Slightly grow the card on hover */
}

/* Equal height for all cards */
.feature-row {
  align-items: stretch; /* Ensure all cards in a row stretch equally */
}

.feature-card:hover {
  transform: scale(1.05); /* Slightly grow the card on hover */
}

.feature-fy25 .feature-card {
  /*border: 2px solid var(--interface-foreground);*/
}

.feature-fy26 .feature-card {
  /*border: 2px solid var(--meshing-foreground);*/
}

.feature-fy27 .feature-card {
  /*border: 2px solid var(--mapping-foreground);*/
}

/* Responsive text sizes */
@media (max-width: 1200px) {
  .year {
    font-size: 14px; /* Smaller text for year boxes */
  }

  .feature-card {
    flex: 1 1 calc(50% - 20px); /* 2 cards per row */
    font-size: 14px; /* Smaller text for feature cards */
    height: 150px;
  }
}

@media (max-width: 750px) {
  .year-boxes {
    max-width: 25%; /* Adjust year box width */
  }

  .year {
    font-size: 12px; /* Even smaller text for year boxes */
  }

  .feature-card {
    flex: 1 1 calc(50% - 20px); /* 1 card per row */
    font-size: 12px; /* Even smaller text for feature cards */
    height: 100px;
  }
}

#backbtn {
  position: absolute;
  left: 24px;
  top: 24px;
}

#backbtn img{
  width: 24px;
  height: 24px;
}