body {
    font-family: Arial, sans-serif;
}

/* Desktop tabs */
.tab {
    display: flex;
    justify-content: center;
    gap: 70px;
    position: relative;
    border-bottom: 1px solid #1683ff;
}

.tab button {
    position: relative;
    min-width: 150px;
    padding: 18px 20px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 18px;
}

.tab button:hover,
.tab button.active {
    color: #006eff;
}

.tab button.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #00d96f;
}

.tab button.active::before {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 9px solid #00d96f;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
}

.tabcontent {
    display: none;
    padding: 35px 20px; 
       line-height: 1.8;
}

.tabcontent.show {
    display: block;
}

.mobile-content {
    display: none;
}

/* Mobile accordion */
@media (max-width: 768px) {
    .tab {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }

    .tab button {
        width: 100%;
        min-width: 0;
        padding: 18px 20px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    .tab button.active {
        border-bottom: 2px solid #00d96f;
    }

    .tab button.active::before,
    .tab button.active::after {
        display: none;
    }

    .tab-contents {
        display: none;
    }

    .mobile-content {
        display: none;
        padding: 35px 20px; 
    }

    .mobile-content.show {
        display: block;
    }
}