.data-page{ 
    .text-zone{
      position: absolute; 
      align-content: center;
      left: 5%; 
      top: 35%; 
      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;
    }
    .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: -10px;
    }
  
  .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{
        top:20%;
        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;
        }
      }
    }
  }