.tab {
    display: flex;
    justify-content: space-between;
    background-color: teal;
    overflow: hidden;
    position: relative;
    border-bottom: 2px solid #ccc;
}
    /* Vertical separator between buttons */
    .tab button:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 15%;
        height: 70%;
        width: 2px;
        background-color: whitesmoke; /* Line color */
    }
    /* Tab buttons */
    .tab button {
        flex: 1;
        background-color: #f1f1f1;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 15px 0;
        font-size: 16px;
        font-weight: 600; /* Make it bold */
        color: black;
        transition: 0.3s;
        border-bottom: 3px solid transparent;
        position: relative;
        font-family: 'Poppins', sans-serif; /* Change this to any recommended font */
    }
        /* Hover effect */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Active tab */
        .tab button.active {
            background-color: #0d6efd !important; /* Active color */
            color: white; /* Text color for contrast */
            border-bottom: 3px solid white; /* Highlight the active tab */
        }

/* Tab content */
.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    /*  border-radius: 10px 10px 10px 10px; Curved bottom corners */
    background: white;
}