.hero {
    background:linear-gradient(rgba(62,20,23,0.1), rgba(0, 0, 0, 0.9)), url('/assets/images/audi_main.jpg'); /* You can replace this with your own image URL */
    background-size: cover;
    background-position: center;
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items:end;
    /* color: white; */
}

.hero h1 {
  font-size: 72px;
  font-style: bold;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); /* Gradient colors */
  -webkit-background-clip: text; /* Works in Webkit browsers like Chrome/Safari */
  background-clip: text; /* Standard syntax */
  color: transparent; /* Makes the text transparent */
  padding-bottom: 2rem;
}


/* horizontal scrolling */

 /* Style for each scroll area */
 .scroll-wrapper {
    width: 100vw;    /* Full width */
    height: 50vh;   /* Full height for each scroll container */
    overflow: hidden; /* Hide overflow to simulate horizontal scrolling */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px; /* Add space between scroll areas */
  }

  /* Style for the scrollable content */
  .scroll-box {
    display: flex;
    white-space: nowrap;
    will-change: transform;
  }

  .item {
    width: 700px;
    height: 600px;
    margin-right: 40px;
    border-radius: 8px;
    background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
  }

  .light-white-text {
    color: #F7DEE0;
  }

  .stats-row {
    border-top: 1px solid #A68588;
    border-bottom: 1px solid #A68588;

  }

  .stat-box {
    border-left: 1px solid #A68588;
  }