custome.css

/* YourComponent.css */
.showcont {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #282c34;
  background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%);
  box-shadow: 0 7px 20px 5px #00000088;
  border-radius: .7rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
  transition: .5s all;
  margin-top:80px;
  justify-content:center;
  }

  
  .showcont input[type="text"] {
    margin-right: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .showcont button.showcb {
    padding: 8px 12px;
    background-color: #4e504e;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 450px;
  }
  
  .showcont button.showcb:hover {
    background-color: #767876;
  }
  
  /* custome.css */
  .phones {
    margin-bottom: 20px;
    padding: 10px;
    height:190px;
    background-color: #282c34;
  background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%);
  box-shadow: 0 7px 20px 5px #00000088;
  border-radius: .7rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: .5s all;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow-x: auto; /* or overflow-x: scroll; */
    white-space: nowrap;
    margin-left: 17px;
    border-color:rgb(0,0,0,0);
  }
  
  .phones p {
    margin: 5px ;
    color: white;
  }
  
  .phones strong {
    font-weight: bold;
    color:white;
    margin-bottom: 5px;
  }
  .search-container{
    background-color: #282c34;
  background: linear-gradient(0deg, rgb(13, 29, 60) 0%, rgba(89, 179, 207, 0.548) 100%);
  box-shadow: 0 7px 20px 5px #00000088;
  border-radius: .7rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
  transition: .5s all;
  margin-top:-20px;
  }