/* --- Desktop Styles --- */
.tdg-features-module {
  background-image: var(--bg-d); /* Uses desktop variable */
  background-color: ;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%; 
  margin: 0;
  padding: 80px 20px;
  text-align: center;
}

.tdg-features-module .page-center {
  max-width: 986px; 
  margin: 0 auto;
  width: 100%;
}

.tdg-features-heading {
  font: normal normal normal 35px/1.2 'Outfit', sans-serif;
  color: #FFFFFF;
  margin: 0 auto 56px auto;
}

/* --- Desktop Styles Update --- */

.tdg-features-grid {
  display: flex;
  justify-content: center; /* Centers the whole group */
  align-items: stretch;    /* Ensures all columns are the same height */
  gap: 30px;               /* Increased gap for better breathing room */
}

.tdg-feature-item {
  flex: 1;                 /* Forces all 4 columns to be exactly the same width */
  display: flex;
  flex-direction: column;  /* Keeps icon on top of text */
  align-items: center;     /* Centers content horizontally */
  justify-content: flex-start; /* Aligns icons to the top of the row */
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.tdg-feature-icon {
  height: 60px;            /* Fixed height for the icon container */
  display: flex;
  align-items: center;     /* Centers the icon vertically within that 60px */
  margin-bottom: 15px;     /* Space between icon and text */
}

.tdg-feature-label p {
  font: normal normal normal 20px/1.4 'Outfit', sans-serif;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  max-width: 100%;
}

.tdg-feature-item:hover {
  transform: scale(1.1); /* Scales the icon and text up by 10% */
  cursor: pointer;       /* Optional: changes cursor to a hand */
}

/* --- Mobile Styles --- */
@media (max-width: 767px) {
  .tdg-features-module {
    background-image: var(--bg-m) !important; 
    padding: 60px 20px 80px 20px; 
  }

  .tdg-features-heading {
    font-size: 35px;
    line-height: 40px;
    max-width: 290px;
    margin: 0 auto 40px auto; /* Added 'auto' left/right to center the headline box */
    text-align: center;
  }

  .tdg-features-grid {
    flex-direction: column; 
    align-items: center; /* THIS CENTERS THE STACKED ITEMS */
    justify-content: center;
    gap: 50px;
  }

  .tdg-feature-item {
    width: 100%;
    align-items: center; /* Centers the icon and text within the item */
    text-align: center;
  }

  .tdg-feature-label p {
    white-space: normal; 
    text-align: center;
  }
  .tdg-features-module {
    padding: 80px 0px;
}