.tabs-container {
  width: 100%;
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  .tabs {
    display: flex;
    justify-content: space-around;
    // column-gap: 50px;
    .tab {
      padding: 10px 20px;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
      text-align: center;
      background-color: #2c3e50;
      flex: 1;
      &:hover {
        background-color: #34495e;
      }
      &.active {
        background-color: #e74c3c;
        font-weight: bold;
      }
    }
  }
  .tab-content {
    padding: 20px;
    .content {
      display: none;
      &.active {
        display: block;
      }
      h2 {
        color: #2c3e50;
      }
    }
  }
}


@media(max-width: 500px){
  .tabs{
    flex-direction: column;
  }
}