.back-wrapper {
    display: flex;
    width: 15.7rem;
    height: 3.4rem;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 3rem;
    border: 2px solid rgba(0, 0, 0, 0.63);
    
    margin: 6.5rem 0 2.8rem 10.5rem;
}

.back-wrapper a {
    text-decoration: none;
    color: #000;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.075rem;
}

.video-wrapper {
    margin: auto;
    width: 100%;
    max-width: 1240px;
    height: auto;
    border-radius: 3rem;
    overflow: hidden;
}

.video-wrapper video {
    width: 103%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-header h2 {
    color: #000;
    font-size: 4.4rem;
    font-weight: 700;
}

.project-header p {
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.054rem;
}

.project-header {
    max-width: 1200px;
    margin: 6rem auto 1.7rem;
}

.project-btns {
    display: inline-flex;
    align-items: center;
    gap: 2rem;

    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.045rem;
}

.project-btns p {
    color: #3E734B;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.045rem;
}

.project-btns a {
    color: #FFF;
    display: flex;
    width: 10.9rem;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    border-radius: 3rem;
    background: #3E734B;
}

.hr {
    width: 80%;
    height: 1px;
    background: #D9D9D9;
    margin: auto;
}

.proj-details {
    justify-content: center; 
    align-items: flex-start; 
    gap: 90px; 
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    padding: 4rem;
}

.proj-overview {
    margin: auto;
    width: 82%;
    margin-bottom: 10rem;
}

.project-divs {
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    gap: 17px; 
    display: inline-flex;
    max-width: 124rem;
}

.proj-header-titles {
    align-self: stretch; 
    font-size: 36px; 
    font-weight: 700; 
    word-wrap: break-word;
    margin-top: 6rem;
}

strong {
    font-weight: 500;
}

span {
    font-size: 18px; 
    font-weight: 400; 
    letter-spacing: 0.54px; 
    word-wrap: break-word
}

span ul {
    margin-left: 3rem;
    font-weight: 500;
}

.research {
    display: flex;
    gap: 4.5rem;
    width: 100%;
}

.reseach-ques-flex-box {
    width: 50%; 
    padding: 20px; 
    background: linear-gradient(134deg, rgba(31, 39, 49, 0.90) 35%, rgba(95.53, 120.18, 151, 0.90) 100%); 
    border-radius: 30px; 
    outline: 1px rgba(179, 179, 179, 0.57) solid; 
    outline-offset: -1px; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 15px; 
    display: flex;
}

.reseach-ques {
    color: white; 
    font-size: 18px; 
    font-weight: 700; 
    word-wrap: break-word;
    align-self: stretch;
    margin-top: 5px;
}

.reseach-ques-answer {
    align-self: stretch; 
    color: white; 
    font-size: 15px; 
    font-weight: 400;
    word-wrap: break-word;
}


.cards-wrapper {
  padding: 30px 35px;
}

/* 1. make a 5-column grid with row & column gaps */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 200px);
  column-gap: 24px;       /* space between cards in a row */
  row-gap: 30px;          /* space between the two rows */
  justify-content: start; /* align grid to the left */
}

/* 2. each “card” centers its image + caption vertically stacked */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;              /* matches your 10px gap */
}

/* 3. the white rounded frame around each image */
.card__image {
  background: #fff;
  padding: 10px 9px;      /* 10px top/bottom, 9px left/right */
  border-radius: 10px;
  overflow: hidden;       /* clip if you ever zoom or shift the img */
  box-sizing: border-box;
}

/* 4. the image itself */
.card__image img {
  display: block;
  width: 100%;
  height: 178.49px;       /* per your spec */
  object-fit: cover;      /* “zoom & crop” to fill */
  /* if you need the gradient placeholder: */
  background: linear-gradient(
    0deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.2) 100%
  );
}

/* 5. the caption text */
.card__caption {
  text-align: center;
  color: #000;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.6px;
  word-wrap: break-word;
}

.features-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  gap: 23px;

  padding: 36px;
  background: rgba(255, 255, 255, 0.50);
  border-radius: 30px;
  outline: 1px solid rgba(0, 0, 0, 0.26);
  outline-offset: -1px;
  /* if this sits inside another flex parent */
  align-self: stretch;
}

.feature {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}


.feature__title {
  color: #000;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.72px;
  word-wrap: break-word;
}

.feature__description {
  color: #000;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.60px;
  word-wrap: break-word;
}


.table-container {
  /* width: 1239px; */
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.table-title {
  text-align: center;
  /* font: 700 15px "Satoshi Variable", sans-serif; */
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.45px;
}

/* 1. responsive scroller */
.table-responsive {
  overflow-x: auto;
  border-radius: 15px;
  outline: 1px solid #B9B9B9;
  outline-offset: -1px;
  background: #fff;
}

/* 2. base table styling */
.comparison-table {
  border-collapse: collapse;
  width: max-content;      /* allow horizontal scroll */
  min-width: 100%;         /* but at least fill container */
}

.comparison-table th,
.comparison-table td {
  padding: 10px 6px;
  font-weight: 400;
  font-size: 12px;
  line-height: 15.6px;
  border-top: 1px solid #B9B9B9;
  border-left: 1px solid #B9B9B9;
  /* white-space: nowrap; */
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

/* 3. sticky header */
.comparison-table thead th {
  position: sticky;
  top: 0;
  background: rgba(0,0,0,0.06);
  font-weight: 700;
  z-index: 2;
}

/* 4. zebra stripes + hover */
.comparison-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.03);
}
.comparison-table tbody tr:hover {
  background: rgba(0,0,0,0.08);
}

/* 5. right-align the Year column */
/* .comparison-table th:nth-child(2),
.comparison-table td:not(:nth-child(1))  */
 .comparison-table td {
  text-align: center;
  width: 106px;
}

.comparison-table {
  table-layout: fixed;
  width: 100%;
}

.workflow-steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.workflow-step {
  margin-bottom: 2rem;
  counter-increment: step;
}

.workflow-step__title {
  position: relative;
  font-weight: 700;
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
}

.workflow-step__title::before {
  content: counter(step) ". ";
  color: var(--primary-color);
  font-weight: 700;
}

.workflow-step__desc {
  /* margin: 0 0 1rem;
  line-height: 1.6; */

  font-size: 1.8rem;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.054rem;
}

.workflow-step ul {
  list-style-type: disc;       /* filled dot (disc) */
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 3.5rem;
  letter-spacing: 0.072rem;
  margin: 1.5rem 3rem;
}

/* .workflow-step__list {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
  list-style: disc;
} */

/* Container */
/* .tech-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 17px;
  width: 100%;
  max-width: 1239px;
  margin: 0 auto;
  padding: 0 1rem;
} */

/* Headings & text */
/* .tech-stack__title {
  font-size: 2.25rem;           
  font-weight: 700;
  font-family: "Satoshi Variable", sans-serif;
  color: #000;
  width: 100%;
} */

.tech-stack__intro {
  font-size: 1.125rem;          /* 18px */
  font-weight: 400;
  letter-spacing: 0.54px;
  line-height: 1.5;
  width: 100%;
}

.tech-stack__section-title {
  font-size: 1.0625rem;         /* 17px */
  font-weight: 700;
  letter-spacing: 0.68px;
  width: 100%;
}

/* Icon grid */
.tech-stack__icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 87px;
  padding: 30px 0;
  width: 100%;
}

.tech-stack__icon {
  width: 63px;
  height: 60px;
  padding: 4px;
  background: rgba(179, 179, 179, 0.20);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-stack-list {
  list-style-type: disc;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 3.5rem;
  letter-spacing: 0.072rem;
  margin: 0 3rem;
}

/* Responsive tweak: shrink icon-gap on small screens */
@media (max-width: 600px) {
  .tech-stack__icons {
    gap: 1rem;
  }
}


.survey-table-container {
  width: 96.2%;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: auto;
}

.survey-table-title {
  text-align: center;
  /* font: 700 15px "Satoshi Variable", sans-serif; */
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.45px;
}

/* 1. responsive scroller */
.survey-table-responsive {
  overflow-x: auto;
  border-radius: 15px;
  outline: 1px solid #B9B9B9;
  outline-offset: -1px;
  background: #fff;
} 


.survey-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    letter-spacing: 0.45px;
    line-height: 19.5px;
}
.survey-table th,
.survey-table td {
  border: 1px solid #B9B9B9;
  padding: 10px 12px;
}

.survey-table td:nth-child(1) {
  width: 10%;         /* adjust this to taste */
}

.survey-table td:nth-child(2) {
  width: 62%;         /* adjust this to taste */
}


.survey-table thead th {
  background-color: rgba(0, 0, 0, 0.06);
  font-weight: 700;
  text-align: center;
}
.survey-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}
.survey-table tbody td:first-child {
  text-align: center;
  font-weight: 500;
}


/* CSS */
.rq1-charts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
}

.charts-row {
  display: flex;
  gap: 26px;
}

.chart-card {
  /* shared styling */
  padding: 20px;
  background: rgba(164, 164, 164, 0.15);
  border-radius: 30px;
  outline: 1px rgba(185, 185, 185, 0.31) solid;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  /* default “small” width */
  /* width: 562px; */
}

.chart-card--wide {
  /* override just the width for the big card */
  width: 747px;
}

.chart-card__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.60px;
  text-align: center;
  margin: 0;
}

.chart-card__image {
  width: 356px;
  height: 308px;
  border-radius: 30px;
  border: 1px rgba(185, 185, 185, 0.30) solid;
  /* object-fit: cover; */
}

.chart-card__caption {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.60px;
  text-align: left;
  margin: 0;
}


.rq1-section {
    width: 1239px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 17px;
  }
  .rq1-section__title {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.72px;
    word-wrap: break-word;
  }
  .rq1-section__description {
    width: 100%;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.68px;
    word-wrap: break-word;
  }
  .rq1-section__subheading {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.72px;
    word-wrap: break-word;
  }
  .rq1-charts {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 50px;
    gap: 29px;
    justify-content: flex-start;
    align-items: center;
  }
  .rq1-charts__row {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 26px;
    justify-content: flex-start;
  }
  .chart-card {
    /* width: 562px; */
    padding: 20px;
    background: rgba(164, 164, 164, 0.15);
    border-radius: 30px;
    outline: 1px rgba(185, 185, 185, 0.31) solid;
    outline-offset: -1px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .chart-card--wide {
    width: 747px;
    padding: 30px;
  }
  .chart-card__title {
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.60px;
    word-wrap: break-word;
  }
  .chart-card__image {
    width: 356px;
    height: 308px;
    border-radius: 30px;
    border: 1px rgba(185, 185, 185, 0.30) solid;
  }
  .chart-card--wide .chart-card__image, .image-wide {
    width: 100%;
    height: 322.57px;
  }
  .chart-card__caption {
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.60px;
    word-wrap: break-word;
  }
  .key-findings__heading {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.72px;
    word-wrap: break-word;
  }
  .key-findings__text {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: 0.72px;
    word-wrap: break-word;
  }
  .analysis-text {
    width: 100%;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.68px;
    word-wrap: break-word;
  }
  .insight__heading {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.72px;
    word-wrap: break-word;
  }
  /* .insight__text {
    width: 100%;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.68px;
    word-wrap: break-word;
  } */

  ul ul {
    list-style-type: disc;
  }

  /* make each row a flex container */
.charts-row {
  display: flex;
  gap: 26px;           /* space between cards */
}

/* base card — no fixed width, just flex */
.chart-card {
  flex: 1 1 0;         /* grow=1, shrink=1, basis=0 */
  min-width: 0;        /* allow child content to wrap */
  padding: 20px;
  background: rgba(164,164,164,0.15);
  border-radius: 30px;
  outline: 1px rgba(185,185,185,0.31) solid;
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* wide card spans two “shares” of the row */
.chart-card--wide {
  flex: 2 1 0;
}

/* images fill their parent card’s width, keep aspect ratio */
.chart-card__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 30px;
  border: 1px rgba(185,185,185,0.30) solid;
  max-height: 322px;   /* or whatever your tall card needs */
}

/* typography stays the same: */
.chart-card__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-align: center;
  margin: 0;
}
.chart-card__caption, .chart-card__caption ul {
font-size: 1.5rem; 
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-align: left;
  margin-left: 10px;
}

.rq1-charts-3div {
  border-radius: 3rem;
  border: 1px solid rgba(185, 185, 185, 0.30);
}

.insight-callout {
  width: 1239px;
  height: 195px;
  padding: 28px 30px;
  background: rgba(255, 255, 255, 0);
  border-radius: 30px;
  outline: 1px rgba(0, 0, 0, 0.30) solid;
  outline-offset: -1px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.accessibility-guidlines ul ul {
  font-weight: 400;
}