.elementor-12105 .elementor-element.elementor-element-d92bf0e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:150px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12105 .elementor-element.elementor-element-d92bf0e:not(.elementor-motion-effects-element-type-background), .elementor-12105 .elementor-element.elementor-element-d92bf0e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(135deg, #2A7F8F 0%, #1A3A45 100%);}.elementor-12105 .elementor-element.elementor-element-e2b9ab5{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 016px 0px;}.elementor-12105 .elementor-element.elementor-element-e2b9ab5 .elementor-heading-title{font-size:2.75rem;font-weight:800;line-height:1.2;color:var( --e-global-color-6f6bd1a4 );}.elementor-12105 .elementor-element.elementor-element-2dc5e16{width:var( --container-widget-width, 564px );max-width:564px;--container-widget-width:564px;--container-widget-flex-grow:0;text-align:center;font-size:1.1rem;font-weight:500;color:#FFFFFFE6;}.elementor-12105 .elementor-element.elementor-element-3cf3f03{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-12105 .elementor-element.elementor-element-d92bf0e{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:80px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-12105 .elementor-element.elementor-element-e2b9ab5{text-align:center;}.elementor-12105 .elementor-element.elementor-element-e2b9ab5 .elementor-heading-title{font-size:30px;}.elementor-12105 .elementor-element.elementor-element-2dc5e16{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -10px) 0px;padding:0px 10px 0px 10px;font-size:15px;}.elementor-12105 .elementor-element.elementor-element-3cf3f03{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12105 .elementor-element.elementor-element-bb0026b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-12105 .elementor-element.elementor-element-d92bf0e{--content-width:700px;}}/* Start custom CSS for text-editor, class: .elementor-element-2868c7b */.hero-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-e2b9ab5 */h1 span {
    color: #a5f3fc;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d92bf0e */.hero {
    background: linear-gradient(135deg, var(--teal-dark) 0%, var(--navy) 100%);
    padding: 56px 24px 48px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}


.hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bb0026b */:root {
            --teal: #3c94ac;
            --teal-dark: #2a7f8f;
            --teal-light: #e0f4f8;
            --navy: #1a3a45;
            --bmi-under: #64b5f6;
            --bmi-normal: #66bb6a;
            --bmi-over: #ffa726;
            --bmi-ob1: #ef6c00;
            --bmi-ob2: #e53935;
            --bmi-ob3: #880e4f;
            --text: #1a2e35;
            --muted: #5a7a84;
            --border: #e0edf0;
            --bg: #f4f9fb;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6!important;
        }

        /* ── HERO ── */
        .hero {
            background: linear-gradient(135deg, var(--teal-dark) 0%, var(--navy) 100%);
            padding: 56px 24px 48px;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -60px; right: -60px;
            width: 240px; height: 240px;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
        }
        .hero::after {
            content: '';
            position: absolute;
            bottom: -80px; left: -40px;
            width: 200px; height: 200px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
        }
        .hero-pill {
            display: inline-block;
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 20px;
            padding: 5px 16px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 18px;
        }
        .hero h1 {
            font-family: 'DM Serif Display', serif;
            font-size: 42px;
            font-weight: 400;
            margin-bottom: 12px;
            line-height: 1.15;
        }
        .hero p {
            font-size: 16px;
            opacity: 0.82;
            max-width: 480px;
            margin: 0 auto;
        }

        /* ── MAIN LAYOUT ── */
        .main { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; }

        /* ── CALCULATOR CARD ── */
        .calc-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 8px 40px rgba(26,58,69,0.10);
            margin-top: -28px;
            position: relative;
            z-index: 10;
            overflow: hidden;
        }

        .calc-inner { padding: 32px 36px 36px; }

        /* Gender toggle */
        .gender-row {
            display: flex;
            gap: 10px;
            margin-bottom: 24px;
        }
        .gender-btn {
            text-transform: capitalize;
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            border: 2px solid var(--border);
            background: white;
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--muted);
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .gender-btn.active {
            border-color: var(--teal);
            background: var(--teal-light);
            color: var(--teal-dark);
        }

        /* Input row */
        .inputs-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 20px;
        }
        .input-group label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
            margin-bottom: 8px;
        }
        .input-wrap {
            display: flex;
            border: 2px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
            transition: border-color 0.15s;
        }
        .input-wrap:focus-within { border-color: var(--teal); }
        .input-wrap input {
            flex: 1;
            padding: 12px 16px;
            border: none;
            outline: none;
            font-family: 'DM Sans', sans-serif;
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
        }
        .input-unit {
            padding: 12px 14px;
            background: var(--bg);
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            display: flex;
            align-items: center;
        }

        /* Unit toggle */
        .unit-toggle {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            align-items: center;
        }
        .unit-toggle span { font-size: 13px; color: var(--muted); }
        .toggle-switch {
            display: flex;
            background: var(--bg);
            border-radius: 8px;
            padding: 3px;
            gap: 2px;
        }
        .toggle-opt {
            padding: 5px 14px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            cursor: pointer;
            transition: all 0.15s;
        }
        .toggle-opt.active {
            background: white;
            color: var(--teal-dark);
            box-shadow: 0 1px 4px rgba(0,0,0,0.10);
        }

        /* Calculate button */
        .calc-btn {
            text-transform: capitalize;
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-family: 'DM Sans', sans-serif;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.15s, transform 0.1s;
            letter-spacing: 0.02em;
        }
        .calc-btn:hover { opacity: 0.92; transform: translateY(-1px); }

        /* ── RESULT PANEL ── */
        .result-panel {
            border-top: 1px solid var(--border);
            padding: 32px 36px;
            background: #fafefe;
        }

        .result-top {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
            margin-bottom: 28px;
            align-items: center;
        }

        /* Gauge */
        .gauge-wrap {
            position: relative;
            text-align: center;
        }
        .gauge-svg { width: 100%; max-width: 220px; }
        .gauge-number {
            position: absolute;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }
        .gauge-number .bmi-val {
            font-family: 'DM Serif Display', serif;
            font-size: 48px;
            color: var(--bmi-over);
            line-height: 1;
        }
        .gauge-number .bmi-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--bmi-over);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Result info */
        .result-info {}
        .result-category {
            display: inline-block;
            background: #fff3e0;
            color: var(--bmi-ob1);
            border: 1.5px solid #ffa726;
            border-radius: 20px;
            padding: 4px 14px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 12px;
        }
        .result-info h3 {
            font-family: 'DM Serif Display', serif;
            font-size: 22px;
            font-weight: 400;
            color: var(--text);
            margin-bottom: 8px;
        }
        .result-info p {
            font-size: 13.5px;
            color: var(--muted);
            line-height: 1.6;
            margin-bottom: 14px;
        }

        /* Healthy weight range */
        .weight-range {
            background: #e8f5e9;
            border: 1px solid #a5d6a7;
            border-radius: 10px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }
        .weight-range-icon { font-size: 18px; }
        .weight-range-text { font-size: 13px; color: #2e7d32; }
        .weight-range-text strong { font-weight: 700; }

       .result-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 12px;
    margin-top: 20px;
    gap: 12px;
}

.result-cta-text {
    font-size: 14px;
    line-height: 1.4;
    color: #1a3a45;
}

.result-cta-text strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}

.result-cta-btn {
    background: #1a3a45; /* Or your brand's teal color */
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.result-cta-btn:hover {
    opacity: 0.9;
}

        /* BMI scale bar */
        .scale-bar-wrap { margin-top: 4px; }
        .scale-bar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
        .scale-bar {
            height: 10px;
            border-radius: 5px;
            background: linear-gradient(to right,
                var(--bmi-under) 0%, var(--bmi-under) 15%,
                var(--bmi-normal) 15%, var(--bmi-normal) 38%,
                var(--bmi-over) 38%, var(--bmi-over) 56%,
                var(--bmi-ob1) 56%, var(--bmi-ob1) 70%,
                var(--bmi-ob2) 70%, var(--bmi-ob2) 84%,
                var(--bmi-ob3) 84%, var(--bmi-ob3) 100%
            );
            position: relative;
            margin-bottom: 6px;
        }
        .scale-marker {
            position: absolute;
            top: -4px;
            width: 18px; height: 18px;
            border-radius: 50%;
            background: white;
            border: 3px solid var(--bmi-over);
            transform: translateX(-50%);
            left: 49%;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }
        .scale-labels {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: var(--muted);
        }

        /* ── WAIST-HIP CALCULATOR ── */
        .whr-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 4px 24px rgba(26,58,69,0.08);
            margin-top: 24px;
            overflow: hidden;
        }
        .whr-header {
            padding: 22px 36px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .whr-icon {
            width: 40px; height: 40px;
            background: var(--teal-light);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
        }
        .whr-header-text h3 { font-size: 16px; font-weight: 700; color: var(--text); }
        .whr-header-text p { font-size: 13px; color: var(--muted); }
        .whr-body { padding: 24px 36px 28px; }
        .whr-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 14px;
            margin-bottom: 18px;
        }
        .whr-result {
            background: var(--bg);
            border-radius: 12px;
            padding: 18px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
       /* Change this in your stylesheet */
.whr-interp .whr-status {
    font-size: 13px;
    font-weight: 700;
    color: #718096; /* Default gray until JS kicks in */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.whr-ratio {
    font-family: 'DM Serif Display', serif;
    font-size: 36px;
    color: #2d3748; /* Default dark color */
    line-height: 1;
    min-width: 80px;
}
        .whr-interp { flex: 1; }
       
        .whr-interp p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
        .whr-dot {
            width: 14px; height: 14px; border-radius: 50%;
            background: var(--bmi-normal);
            flex-shrink: 0;
        }

        /* ── CONTENT SECTIONS ── */
        .content-section {
            margin-top: 48px;
        }
        .content-section h2 {
            font-family: 'DM Serif Display', serif;
            font-size: 28px;
            font-weight: 400;
            color: var(--navy);
            margin-bottom: 14px;
        }
        .content-section p {
            font-size: 15px;
            color: #3d5a63;
            line-height: 1.75;
            margin-bottom: 12px;
        }

        /* Formula box */
        .formula-box {
            background: var(--navy);
            color: white;
            border-radius: 12px;
            padding: 18px 24px;
            font-family: 'DM Serif Display', serif;
            font-size: 20px;
            text-align: center;
            margin: 16px 0;
            letter-spacing: 0.02em;
        }

        /* BMI categories table */
        .categories-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
        .cat-row {
            display: grid;
            grid-template-columns: 14px 120px 80px 1fr;
            gap: 14px;
            align-items: start;
            background: white;
            border-radius: 10px;
            padding: 14px 18px;
            border: 1px solid var(--border);
        }
        .cat-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
        .cat-name { font-weight: 700; font-size: 14px; color: var(--text); }
        .cat-range { font-size: 13px; font-weight: 600; color: var(--muted); }
        .cat-desc { font-size: 13px; color: var(--muted); line-height: 1.55; }

        /* Stats section */
        .stats-section {
            background: linear-gradient(135deg, var(--teal-dark), var(--navy));
            border-radius: 16px;
            padding: 32px;
            color: white!important;
            margin-top: 48px;
        }
        .stats-section h2 {
            font-family: 'DM Serif Display', serif;
            font-size: 26px;
            font-weight: 400!important;
            margin-bottom: 20px;
            color: white!important;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }
        .stat-box {
            background: rgba(255,255,255,0.10);
            border-radius: 12px;
            padding: 18px 16px;
            text-align: center;
        }
        .stat-box .stat-val {
            font-family: 'DM Serif Display', serif;
            font-size: 32px;
            margin-bottom: 4px;
        }
        .stat-box .stat-lbl { font-size: 12px; opacity: 0.8; line-height: 1.4; }
        .stats-section p {
            font-size: 14px;
            opacity: 0.85;
            line-height: 1.7;
        }

        /* Limitations */
        .limitations-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-top: 20px;
        }
        .limitation-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid var(--border);
        }
        .limitation-card h3 {
            font-size: 14px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .limitation-card p {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.6;
            margin: 0;
        }
        
        .elementor-12105 .elementor-element.elementor-element-bb0026b p{
            margin: 0px;
        }

        @media(max-width: 620px) {
            .result-top { grid-template-columns: 1fr; }
            .inputs-row { grid-template-columns: 1fr; }
            .whr-inputs { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .limitations-grid { grid-template-columns: 1fr; }
            .cat-row { grid-template-columns: 14px 1fr; }
            .cat-range { display: none; }
            .hero h1 { font-size: 30px; }
            .calc-inner { padding: 24px 20px; }
            .result-panel { padding: 24px 20px; }
        }/* End custom CSS */