.data-page{ 
  .text-zone{
    position: absolute; 
    align-content: center;
    left: 5%; 
    margin-top: 90px; 
    transform: translateY(-50%); 
    max-height: 90%; 
    display: absolute;
    max-width: 90%;
  }
    overflow: auto;
    h1{
      color: #fff; 
      font-size: 60px; 
      margin: 0; 
      font-weight: 600; 
      cursor: pointer;

      &::before { 
          color: #ffd700; 
          position: absolute; 
          margin-top: -40px; 
          left: 15px; 
          opacity: 0.6; 
      }

      &::after { 
          color: #ffd700; 
          position: absolute; 
          margin-top: 18px; 
          left: 20px; 
          animation: fadeIn 0.7s backwards; 
          opacity: 0.6; 
      }
    }
    h2 { 
      animation: fadeIn 0.8s backwards; 
      color: #fff;

      .button-container{
        margin-top: -50px;
        .search{
          width: 500px;
        }
      }
      .button {
        line-height: 1;
        text-decoration: none;
        gap: .75rem;
        background-color: var(--gradient-2, linear-gradient(90deg, #ff4000 30%, #fd9815 80%));
        color: #fff;
        border-radius: 10rem;
        font-weight: 600;
        padding: .75rem 1.5rem;
        padding-left: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background-color .3s;
        margin-top: 50px; 
        margin-left: 0px;
      }
      
      .button__icon-wrapper {
        flex-shrink: 0;
        width: 25px;
        height: 25px;
        position: relative;
        color: #ff4000;
        background-color: #fff;
        border-radius: 50%;
        display: grid;
        place-items: center;
        overflow: hidden;
      }
      
      .button:hover {
        background-color: #ff4000;
      }
      
      .button:hover .button__icon-wrapper {
        color: #fd9815;
      }
      
      .button__icon-svg--copy {
        position: absolute;
        transform: translate(-150%, 150%);
      }
      
      .button:hover .button__icon-svg:first-child {
        transition: transform .3s ease-in-out;
        transform: translate(150%, -150%);
      }
  
      .button:hover .button__icon-svg--copy {
        transition: transform .3s ease-in-out .1s;
        transform: translate(0);
      }
  }
  .searchBox {
    display: flex;
    max-width: 450px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #2f3640;
    border-radius: 50px;
    position: relative;
    margin-top: 50px; 
    margin-left: 0; 
  }

  .searchButton {
    color: white;
    position: absolute;
    right: 8px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-2, linear-gradient(90deg, #ff4000 30%, #fd9815 80%));
    border: 0;
    display: inline-block;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  }


button:hover {
  color: #fff;
  background-color: #1A1A1A;
  box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px;
  transform: translateY(-3px);
}

button:active {
  box-shadow: none;
  transform: translateY(0);
}

.searchInput {
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 22px;
  padding: 24px 46px 24px 26px;
}
    .table-container::-webkit-scrollbar {
      width: 12px; 
    }

    .table-container::-webkit-scrollbar-thumb {
      background-color: #fff; 
      border-radius: 6px; 
    }

    .table-container::-webkit-scrollbar-track {
      background-color: transparent;
    }
    .table-container {
      animation: fadeIn 0.8s backwards; 
      margin: 20px auto;
      font-family: Arial, sans-serif;
      background: linear-gradient(#212121, #212121) padding-box,
                  linear-gradient(145deg, transparent 35%,#ff1a05, #fd9815) border-box;
      border: 2px solid transparent;
      overflow: auto;
      max-height: 300px;

      table {
          width: 100%;
          border-collapse: collapse;
          border: 1px solid #555; 
          background-color: #333;

          th, td {
              padding: 10px;
              border-bottom: 1px solid #555;
              text-align: left;
              color: #ddd; 
          }

          th {
              background-color: #222;
              color: #fff; 
          }

          tr:nth-child(even) {
              background-color: #444; 
          }

          tr:hover {
              background-color: #666; 
          }
      }
    }
}

@media screen and (max-width: 1150px) {
  .data-page {
    .text-zone {
      margin-top: 60px;
      width: 80%;
    }
    .table-container {
      margin: 20px auto;
      font-family: Arial, sans-serif;
      background: linear-gradient(#212121, #212121) padding-box,
                  linear-gradient(145deg, transparent 35%,#ff1a05, #fd9815) border-box;
      border: 2px solid transparent;
      overflow: auto;
      max-height: 250px;

      table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #555; 
        background-color: #333;
      }
    }

    h2 {
      .button{
        width:70px;
        font-size: 11px;
      }
      .searchBox{
        max-width: 240px;
      }
      .searchInput{
        font-size: 13px;
      }
      .searchButton{
        width: 35px;
        height: 35px;
      }
      .button-container {
        .search {
          width: 240px;
        }
      }
    }
  }
}