.ron .tab-container {
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    width: 100%;
}
.ron .tab {
    flex: 1;
    padding: 16px 15px 15px 58px;
    color: white;
    text-align: center;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    background-color: #f1c40f;
    transition: background-color 0.3s;
    border-top-right-radius: 50px;
    box-shadow: 5px 0 14px -5px rgba(0, 0, 0, 0.39);
}
.ron .tab + .tab {
    margin-left: -44px; /* Remove gap between tabs */
}
.ron .tab:nth-child(1) { z-index: 7; background-color: #f7f7f7; } /* Yellow */
.ron .tab:nth-child(2) { z-index: 6; background-color: #ffab31; } /* Orange */
.ron .tab:nth-child(3) { z-index: 5; background-color: #ff6d4e; } /* Dark Orange */
.ron .tab:nth-child(4) { z-index: 4; background-color: #fe4a21; } /* Red */
.ron .tab:nth-child(5) { z-index: 3; background-color: #ee000e; } /* Green */
.ron .tab:nth-child(6) { z-index: 2; background-color: #00bd7d; } /* Dark Green */
.ron .tab:nth-child(7) { z-index: 1; background-color: #00752f; } /* Dark Blue */
.ron .tab:hover {
    background-color: #34495e; /* Dark Blue */
}
.ron .tab:first-child {
    display: flex;
    align-items: center;
    padding-left: 18px;
    z-index: 8; /* Higher z-index for the first tab */
    color:#222;
}
.ron .tab:last-child {
    padding-right:30px;
}
.ron .tab img {
    max-width: 60px;
    max-height: 60px;
    margin-right: 10px;
}

/* Media Queries */
@media (max-width: 768px) {
    .ron .tab-container {
        flex-direction: column;
        align-items: stretch;
    }
    .ron .tab {
        border-radius: 0; /* Remove border radius */
        margin: 0; /* Remove margin */
        border-bottom: 1px solid #fff; /* Add border between tabs */
    }
   .ron  .tab + .tab {
        margin-left: 0; /* Remove left margin for vertical tabs */
    }
    .ron .tab:first-child {
        padding-left: 18px; /* Adjust padding for the first tab */
    }
}