:root {
        --bg: #ffffff;
        --accent: #442c8c;
        --accent-dark: #442c8c;
        --pill: #096dd1;
        --pill-dark: #096dd1;
        --bubble-grad: linear-gradient(135deg, #dff2ff 0%, #bfe8ff 40%, #78c2ff 100%);
        --muted: #828282;
        --container: 1100px;
        --radius: 14px;
    }

    .wrap {
        /* max-width: var(--container); */
        /* max-width: var(--container); */
        margin: 0 auto;
        /* padding: 40px */
    }
.textOverlay p {
    font-size: 30px;
    font-weight: 400;
    line-height: 43px;
    color: #fff;
}
.textOverlay h2 {
    font-size: 34px;
    font-weight: 600;
    line-height: 43px;
    color: #fff;
}
    .wrap .heading02 {
        font-size: 30px !important;
        text-align: left;
        margin-bottom: 18px;
    }

    .sub {
        color: var(--muted);
        font-size: 16px;
        line-height: 1.6;
        margin: 0 0 15px
    }

    /* grid for bubbles */
    .gridTds {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 24px;
        align-items: center
    }

    .pill {
        display: flex;
        align-items: center;
        gap: 14px;
        background: #096dd1;
        padding: 15px 18px 15px 68px;
        border-radius: 12px;
        color: white;
        box-shadow: 0 6px 18px rgba(10, 84, 140, 0.12);
        position: relative;
    }

    .pill .bubble {
       width: 57px;
    height: 57px;
        border-radius: 50%;
        background: var(--bubble-grad);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 -6px 18px rgba(255, 255, 255, 0.35), 0 8px 20px rgba(12, 50, 100, 0.08);
        font-weight: 700;
        position: absolute;
        left: -8px;
    }

    .pill .bubble span {
        display: block;
        font-size: 22px;
        color: #044f86
    }

    .pill .label {
        font-size: 18px;
    }

    /* special smaller pill for Na+ with superscript */
    .bubble .sup {
        font-size: 12px;
        vertical-align: super;
        margin-left: 2px
    }

    /* second row style (wider) */
    .full-row {
        grid-column: 1 / -1;
        display: flex;
        gap: 16px
    }

    .full-row .pill {
        flex: 1
    }

    .measure {
        margin-top: 23px;
        font-size: 18px;
        color: var(--muted)
    }

    .measure strong {
        color: var(--accent);
        font-weight: 700
    }

    /* layout to mimic the example spacing */
    .top-row {
        display: flex;
        gap: 18px;
        align-items: flex-start
    }

    .left-col {
        flex: 1
    }

    .right-col {
        flex: 1
    }

    /* fine tuning for visual similarity */
    .pill .bubble.small {
        width: 56px;
        height: 56px
    }

    .pill .label.small {
        font-size: 16px
    }

    select.form-control {
        -moz-appearance: none;
        -webkit-appearance: none !important;
    }

    .whatTdsSection .heading02 {
        text-align: start;
        font-size: 30px !important;
            text-transform: capitalize;
    }

    section.whatTdsSection {
        padding: 32px 10px 50px;
        background: white;
    }

    .tdsImage {
        width: auto;
        height: 175px;
    }

    .bg-grey {
        background: #f4f4f4 !important;
    }

    .w-85 {
        width: 78%;
        margin: auto;
    }

    .tdsSectionFlexItem .heading03 {
        margin-bottom: 16px;
        text-align: center;
    }

    .tdsImageIcon {
        width: auto;
        height: 70px;
    }

    .whyTdsMatters {
        padding: 30px 10px 60px;
    }

    .whyTdsMatters .tdsSEctionFlex {
        align-items: center;
        gap: 14px;
        margin-bottom: 30px;
    }

    .whyTdsMatters .heading02 {
        text-align: start;
        margin-bottom: 30px;
        font-size: 30px !important;
        text-transform: capitalize;
    }

    .whyTdsMatters .heading03 {
        text-align: start;
        font-size: 16px !important;
        font-weight: bold !important;
        padding-top: 0;
        margin-bottom: 8px;
        color: #442c8c
    }

    .whyTdsMatters p {
        text-align: start;
        font-size: 16px;
        color: #747474;
    }

    .tdsSectionFlexItem .heading03 {
        line-height: 1.25 !important;
    }

    .tdsSEctionFlexMtrs {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
        gap: 15px;
    }

    .scrollTdsFlex {
        flex-flow: wrap;
    }

    .scrollTdsFlex .tdsSectionFlexItem {
        margin: 0;
        margin-bottom: 24px;
    }

    .spanPara {
        font-weight: bold;
        color: #747474;
    }

    .tdsSectionFlexItemOne {
        width: 80px
    }

    .heroSectFlexItemFirst {
        width: 68%;
    }

    .heroSectFlexItemSecond {
        width: 32%;
        padding: 0 !important;
    }

    .whatTdsSection.whoPersSection {
        padding-bottom: 0 !important;
    }

    .trackOrderImg {
        margin-bottom: 0;
    }

    .mt-10 {
        margin-top: 10px;
    }

    .mt-30 {
        margin-top: 30px !important;
    }

    .impTdsSection {
        margin-top: 26px;
    }

    .impTdsSection .heading03 {
        font-weight: 600 !important;
        color: #442c8c;
    }

    .faqBx .accordionSet {
        width: 100% !important;
    }
.tdsCalc .btn-warning {
    width: 150px;
    font-weight: 500;
    font-size: 17px;
    border-radius: 7px;
    background-color: #f58220;
    border-color: #f58220;
    color: #fff;
    padding: 8px;
    margin: auto;
    display: block;
    line-height: 25px;
    height: 37px;
}
.form-control:focus {
    color: #828282;
}
    .faqBx .heading02 {
        margin-bottom: 20px;
        font-size: 22px !important;
        text-align: start;
        font-weight: 600 !important;
        text-transform: capitalize !important;
    }

    .mrginWeb {
        margin: 20px auto 90px;
    }

    .faqBx {
        padding: 0;
    }



    .compSolu span {
        color: #442c8c;
        font-weight: 600;
    }

    .tds-info {
        padding: 30px 0 0;
    }

    thead th:first-child {
        width: 305px;
    }

    table td:first-child {
        text-align: start;
        color: #333;
        font-weight: 600;
    }

    table td {
        font-weight: normal;
        color: #333;
        font-size: 14px;
    }

    /* Table Base Styles */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 40px;
        font-size: 15px;
        text-align: left;
        border-radius: 20px;
    }

    thead th {
        background: #442c8c;
        color: white;
        padding: 17px 15px;
        border: none;
        font-weight: 600;
        text-align: center;
    }

    thead th:first-child {
        text-align: start;
    }

    tbody tr:first-child td {
        border-top: 0;
    }

    tbody td,
    tbody th {
        border: 1px solid #442c8c;
        padding: 12px 17px;
        vertical-align: top;
        line-height: 1.57;
    }

    table tr:last-child td:first-child {
        text-align: start;
        color: #333;
        font-weight: 600;
        border-radius: 0 0 0 20px;
    }

    table tr:last-child td:last-child {
        color: #333;
        border-radius: 0 0 20px 0;
    }

    tbody tr:nth-child(even) {
        background-color: #f7f9fc;
    }

    /* Comparison Table (Top) */
    .comparison-table td {
        text-align: center;
        font-weight: 500;
    }

    /* Info Section */

    .tds-info p {
        margin-bottom: 8px;
        color: #828282;
    }

    /* Detailed Table */
    .details-table th:nth-child(1) {
        width: 22%;
        border-radius: 15px 0 0 15px;
    }

    .details-table th:nth-child(2) {
        width: 28%;
    }

    .details-table th:nth-child(3) {
        width: 20%;
    }

    .details-table th:nth-child(4) {
        width: 30%;
        border-radius: 0 15px 15px 0;
    }


    .comparison-table th:nth-child(1) {
        border-radius: 15px 0 0 15px;
    }

    .comparison-table th:nth-child(4) {
        border-radius: 0 15px 15px 0;
    }

    .pro {
        color: #1aa541;
        font-weight: bold;
    }

    .con {
        color: #d33b3b;
        font-weight: bold;
    }

    table.comparison-table {
        margin-top: 28px !important;
    }

    .tableSpBold {
        font-weight: 600;
        color: #333;
            font-size: 14px;
    }

    .gradBar {
        height: 56px;
        width: 100%;
    }

    .flex-containerMain {
        display: flex;
        flex-direction: column;
    }

    .flex-container {
        display: flex;
        justify-content: space-around;
    }

    .flex-container .flex-item {
        width: 25%;
    }

    .flex-item h3 {
        font-family: Poppins;
        font-size: 16px;
        font-weight: 600;
        line-height: normal;
        text-align: center;
        color: #442c8c;
    }

    .flex-item p {
        font-family: Poppins;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.57;
        text-align: center;
        color: #747474;
        padding-top: 12px;
    }
.form-group {
    margin-bottom: 10px;
}
.heroImageforCal {
    min-height: auto !important;
}

.textOverlay {
    position: absolute;
    left: 63px;
    left: 63px;
    z-index: 2;
    color: #fff;
    max-width: 60%;
    font-size: 24px;
    font-weight: 700;
}
@media(min-width: 1440px){
    .textOverlay {
    left: 13%;
}
}

@media(min-width: 1500px){
    .tdsImage {
    height: 250px !important;
}
    .whoPersSection .impTdsSection .heading03 {
    width: 390px;
            margin: auto;
}
.whoPersSection .impTdsSection p {
    width: 390px;
            margin: auto;
}
}

    @media (max-width:900px) {
        .gridTds {
            grid-template-columns: repeat(2, 1fr);
            gap: 28px 30px;

        }

        .top-row {
            flex-direction: column
        }

        .tdsSectionFlexItem p {
            text-align: center;
        }
    }

    @media(max-width: 768px) {
        .w-85 {
            width: 100%;
        }
            .textOverlay {
        left: 12px;
        max-width: 62%;
        font-size: 24px;
        font-weight: 700;
                top: 40px;
    }
.textOverlay h2 {
    font-size: 16px;
    line-height: 8px;
}

.textOverlay p {
    font-size: 14px;
}
        .flex-containerMain {
            flex-direction: row;
                    align-items: center;
                            gap: 0px 28px;
        }
.flex-item h3 {
        line-height: 20px;
    text-align: left;
}
.tdsCalc .btn-warning {
    margin-bottom: 25px;
}
.flex-item p {
    text-align: left;
}
        .tdsSEctionFlexMtrs {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            gap: 15px;
        }

        .heroSectFlexItemFirst {
            width: 100%;
        }

        .heroSectFlexItemSecond {
            width: 100% !important;
            padding: 16px 0;
        }

        .pill .label {
            font-size: 15px;
        }

        .faqBx .accordionSet {
            width: 100% !important;
            padding: 0 !important;
        }

        .whatTdsSection.whoPersSection {
            padding-left: 0 !important;
        }

        .faqBx .heading02 {
            font-size: 20px !important;
        }

        table td {
            font-size: 12px;
        }

        .details-table td {
            font-size: 10px;
        }

        .details-table thead th {
            font-size: 12px;
        }

        tbody td,
        tbody th {
            padding: 12px 4px;
        }

        .tableSpBold {
            font-size: 10px;
        }

        thead th:first-child {
            width: auto;
        }

        tr {
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
        }

        td {
            border: none;
            padding: 8px 10px;
        }

        td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #0a3a8b;
            display: block;
            margin-bottom: 4px;
        }

        .whatTdsSection.whoPersSection .heading02 {
            padding-left: 10px !important;
        }

        section.imgSectionTDS .heading02 {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .whyTdsMatters p {
            font-size: 14px;
            text-align: left;
        }

        .tdsSectionFlexItemOne {
            width: 50px;
                    margin: unset
        }

        .whyTdsMatters .heading03 {
            font-size: 14px !important;
                    margin-bottom: 0;
        }

        .tdsImageIcon {
            width: auto;
            height: 45px;
        }

        .whyTdsMatters .heading02 {
            font-size: 20px !important;
            font-weight: 600 !important;
            margin-bottom: 17px;
        }

        .wrap {
            margin: 0px auto;
            padding: 0;
        }

        .measure {
            margin-top: 24px;
            font-size: 16px;
        }

        .whyTdsMatters {
            padding: 30px 10px 30px;
        }

        .wrap .heading02 {
            font-size: 20px !important;
        }

        section.imgSectionTDS {
            padding: 32px 0px 9.2px !important;
        }

        .whatTdsSection .heading02 {
            text-align: start;
            font-size: 20px !important;
        }

        .scrollTdsFlex {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
        }

        .mrginWeb {
            margin: 20px auto 42px;
        }

        .scrollTdsFlex .tdsSectionFlexItem {
            flex: 0 0 80% !important;
            scroll-snap-align: start;
                    margin-right: 16px;
        }

        .scroll-dots {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 8px;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            transition: background 0.3s;
        }

        .dot.active {
            background: #2b4e6f;
        }

        .details-table th:nth-child(1) {
            width: auto;
        }

        .details-table th:nth-child(2) {
            width: auto;
        }

        .details-table th:nth-child(3) {
            width: auto;
        }

        .details-table th:nth-child(4) {
            width: auto;
        }

        thead th {
            padding: 17px 4px;
        }

        .flex-container {
            display: flex;
            justify-content: space-around;
            flex-direction: column;
                          height: 400px;
        }
.scrollTdsFlex {
    flex-flow: nowrap;
}
.impTdsSection .heading03 {
    width: 311px;
    font-size: 16px !important;
}
.impTdsSection p {
        width: 311px;
    }
        .gradBar {
        height: 400px;
        width: 74px;
    }
        .flex-container .flex-item {
                  width: 100%;
        }
    }

    @media (max-width:520px) {
        .pill .bubble {
            width: 48px;
            height: 48px;
        }

        .pill {
            padding: 8px 8px 8px 43px;
        }
    }