:root {
    /* Font Families */
    --font-family-poppins: "Poppins";

    /* Font Weights */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Font Styles */
    --font-style-normal: normal;
    --font-style-italic: italic;

    --color-primary-teal: #28A09E;
    --color-dark: #141E12;
    --color-white:#FFF;
    --color-yellow: #FDC52C;
    --color-grey-1: #F2F3F2;
    --color-grey-2: #566353;
    --color-orange: #E36304;

    --color-indicator-sugar-level-normal: #0EAC66;
    --color-indicator-sugar-level-prediabetes: #FF7B76;
    --color-indicator-sugar-level-diabetic: #C50014;
    --color-indicator-sugar-level-highly-diabetic: #FF001B;
}

html{
    height: 100%;
}

body{
    font-family: var(--font-family-poppins), sans-serif;
    height: 100%;
    line-height: 24px;
    letter-spacing: 0.5px;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Poppins', sans-serif;
}

.vertical-middle-content{
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center; /* Vertical center */
}

body.with-content-above .vertical-middle-content{
    min-height: calc(100vh - 110px); /* 100vh - header - footer */
}

.section-seperator-30{
    margin-top: 30px;
    margin-bottom: 30px;
}

.program-title{
    color: var(--color-primary-teal);
    font-weight: var(--font-weight-bold);
    font-size: 56px;
}

.program-description{
    color: var(--color-dark);
    font-weight: var(--font-weight-regular);
    font-size: 18px;
}

.how-it-works-wrapper .card{
    border-color: var(--color-primary-teal);
}

.how-it-works-wrapper .card .card-body{
    background-color: var(--color-primary-teal);
}

.how-it-works-wrapper .card .card-body .card-title{
    color: var(--color-white);
    font-size:36px;
    margin-bottom: 15px;
}

.how-it-works-wrapper  ul.bullet-points{
    list-style: none; /* Remove default bullets */
    padding-left: 0em;
    margin-bottom: 0px;
}

.how-it-works-wrapper  ul.bullet-points li{
    color: var(--color-white);
    font-size:16px;
    margin-bottom: 15px;
}

.how-it-works-wrapper  ul.bullet-points li:last-child{
    margin-bottom: 0px;
}

.how-it-works-wrapper  ul.bullet-points li .marker{
    color: var(--color-yellow);
    line-height: 24px;
}

.how-it-works-wrapper  ul.bullet-points li span{
    margin-left: 5px;
}

/* Custom Yellow Button */
.btn-custom-primary {
    background-color: var(--color-yellow);   /* Yellow background */
    color: var(--color-dark);              /* Black text */
    font-weight: var(--font-weight-extrabold);            /* Bold */
    font-size: 28px;           /* Slightly bigger text */
    border-radius: 50px;         /* Pill shape */
    padding: 12px 28px;          /* Bigger padding */
    border: none;                /* Remove border */
    text-transform: none;        /* Keep normal text case */
    transition: all 0.2s ease-in-out;
}

/* Hover Effect */
.btn-custom-primary:hover {
    background-color: #E6B222;   /* Darker yellow on hover */
    color: #0C0C0C;              /* Keep black text */
    transform: translateY(-2px); /* Subtle lift */
}

/* Focus/Active */
.btn-custom-primary:focus,
.btn-custom-primary:active {
    background-color: #CC9E1D;   /* Even darker yellow */
    color: #0C0C0C;
    box-shadow: 0 0 0 0.25rem rgba(255, 199, 44, 0.4); /* Glow effect */
}

/* Custom Yellow Button */
.btn-custom-secondary {
    background-color: var(--color-orange);   /* Orange background */
    color: var(--color-white);              /* White text */
    font-weight: var(--font-weight-extrabold);            /* Bold */
    font-size: 28px;           /* Slightly bigger text */
    border-radius: 50px;         /* Pill shape */
    padding: 12px 28px;          /* Bigger padding */
    border: none;                /* Remove border */
    text-transform: none;        /* Keep normal text case */
    transition: all 0.2s ease-in-out;
}

/* Hover Effect */
.btn-custom-secondary:hover {
    background-color: #E6B222;   /* Darker yellow on hover */
    color: #0C0C0C;              /* Keep black text */
    transform: translateY(-2px); /* Subtle lift */
}

/* Focus/Active */
.btn-custom-secondary:focus,
.btn-custom-secondary:active {
    background-color: #CC9E1D;   /* Even darker yellow */
    color: #0C0C0C;
    box-shadow: 0 0 0 0.25rem rgba(255, 199, 44, 0.4); /* Glow effect */
}


/* Custom Outline Teal Button */
.btn-outline-teal {
    border: 2px solid var(--color-primary-teal);
    color: var(--color-primary-teal);
    font-weight: 700;
    font-size: 20px;
    padding: 12px 28px;
    border-radius: 50px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

/* Hover Effect */
.btn-outline-teal:hover {
    background-color: var(--color-primary-teal);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Focus/Active */
.btn-outline-teal:focus,
.btn-outline-teal:active {
    background-color: #CC9E1D;   /* Even darker yellow */
    color: #0C0C0C;
    box-shadow: 0 0 0 0.25rem rgba(255, 199, 44, 0.4); /* Glow effect */
}


.about-author-wrapper{
    margin-top:50px;
}

.about-author-wrapper .card{
    border-color: var(--color-grey-1);
}

.about-author-wrapper .card .card-body{
    background-color: var(--color-grey-1);
}

.about-author-wrapper .author-details{
    text-align: right;
}

.about-author-wrapper .author-details .autor-name{
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-teal);
}

.about-author-wrapper .author-details .autor-designation{
    font-size: 11px;
    color: var(--color-grey-2);
}

.about-author-wrapper .author-image{
    text-align: center;
}

.about-author-wrapper .author-image img{
    max-height: 150px;
}

.about-author-wrapper .autor-bio{
    font-size: 16px;
}

/* Questionnaires */
.questionnaires-page-header .program-name{
    color:var(--color-primary-teal);
    font-size: 16px;
    text-align: right;
    margin-bottom: 0px;
}

.question-with-options-wrapper{
    display:none;
}

.question-with-options-wrapper.active{
    display: block;
}


.question-with-options-wrapper .question-wrapper {
    margin:40px 0px;
}

.question-with-options-wrapper .question-wrapper .question{
    text-align: center;
}

.options-wrapper{
    margin:40px 0px;
}

.options-wrapper .card{
    border-color:  var(--color-grey-1);
}

.options-wrapper .card .card-body{
    padding:3rem 2rem;
    background-color: var(--color-grey-1);
}
.options-wrapper .questionnaires-options-radio {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.options-wrapper .questionnaires-options-radio input {
    display: none;
}

.options-wrapper .questionnaires-options-radio span {
    position: relative;
    padding-left: 32px;
    font-size: 16px;
    color:#141E12;
}

/* Default circle (unselected) */
.options-wrapper .questionnaires-options-radio span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-primary-teal, #00bfa5);
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease-in-out;
}

/* Selected state with checkmark */
.options-wrapper .questionnaires-options-radio input:checked + span::before {
    content: "✔";
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: var(--color-primary-teal, #00bfa5);
    border-color: var(--color-primary-teal, #00bfa5);
}

.question-number-indicator-wrapper{
    text-align: center;
    font-size:16px;
    margin: 40px 0px;
    color: var(--color-grey-2);
}

.question-number-indicator-wrapper .current-question-number{
    color: var(--color-primary-teal);
    font-weight: var(--font-weight-bold);
}

/* Shared styles */
.question-navigation-wrapper{
    text-align: center;
    margin: 40px 0px;
}

.question-navigation-wrapper .btn-prev,
.question-navigation-wrapper .btn-next {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: #009688; /* teal */
    background: transparent;
    border: none;
}

/* Circle wrapper */
.question-navigation-wrapper .btn-prev .icon-wrapper,
.question-navigation-wrapper .btn-next .icon-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    margin: 0 10px;
    border-radius: 50%;
    background-color: #FFC107; /* yellow */
    color: white;
    font-size: 20px;
}

/* Hover */
.question-navigation-wrapper .btn-prev:hover .icon-wrapper,
.question-navigation-wrapper .btn-next:hover .icon-wrapper {
    background-color: #ffb300; /* darker yellow */
}

.current-question-indicator-image-wrapper{
    text-align: center;
}

.current-question-indicator-image-wrapper img{
    max-height: 400px;
}

/* Validation */
.form-control.error{
    color:#500000;
    border-color: #f44336;
}
input.error{
    color:#500000;
    border-color: #f44336;
}
div.error{
    margin-top: 15px;
    color:#FFF;
    padding: 5px 10px;
    position: relative;
    top: 0px;
    background: red;
    border-radius: 10px;
}

.mandatory{
    color:red;
}

.test-completed-heading{
    font-size: 32px;
    color: var(--color-dark);
}

.test-completed-description{
    font-size: 20px;
    color: var(--color-grey-2);
}

.call-to-action-style-1-wrapper{

}

.call-to-action-style-1-wrapper .card{
    border-color: var(--color-primary-teal);
}

.call-to-action-style-1-wrapper .card .card-body{
    color: var(--color-white);
    background-color: var(--color-primary-teal);
}

.call-to-action-style-1-wrapper .card .card-body .title{
    font-size: 24px;
    text-align: center;
}

.whatsapp-salient-features  ul.bullet-points{
    list-style: none; /* Remove default bullets */
    padding-left: 0em;
    margin-bottom: 0px;
}

.whatsapp-salient-features  ul.bullet-points li{
    color: inherit;
    font-size:16px;
    margin-bottom: 15px;
}

.whatsapp-salient-features  ul.bullet-points li:last-child{
    margin-bottom: 0px;
}

.whatsapp-salient-features  ul.bullet-points li .marker{
    color: var(--color-yellow);
    line-height: 24px;
    font-size: 18px;
}

.whatsapp-salient-features  ul.bullet-points li span{
    margin-left: 5px;
}

.call-to-action-style-1-wrapper .pitch-line{
    margin:20px 0px;
    font-size:20px;
}

/* Blinking effect */
.blinking {
    animation: blink 5s infinite;
}
@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.progress-bar.teal {
    background-color: var(--color-primary-teal) !important;
}

.report-section .thank-you-message{
    font-size: 18px;
    text-align: center;
}

.report-section .report-heading-level-1{
    font-size:32px;
    text-align: center;
}

.report-section .report-summary-diabetic-level-common{
    text-align: center;
    font-size: 24px;
    color: var(--color-primary-teal);
}

.report-section .report-summary-diabetic-level-common .sugar-level-text-normal{
    color: var(--color-indicator-sugar-level-normal);
    text-transform: uppercase;
    text-decoration: underline;
}

.report-section .report-summary-diabetic-level-common .sugar-level-text-pre-diabetes{
    color: var(--color-indicator-sugar-level-prediabetes);
    text-transform: uppercase;
    text-decoration: underline;
}

.report-section .report-summary-diabetic-level-common .sugar-level-text-diabetic{
    color: var(--color-indicator-sugar-level-diabetic);
    text-transform: uppercase;
    text-decoration: underline;
}

.report-section .report-summary-diabetic-level-common .sugar-level-text-highly-diabetic{
    color: var(--color-indicator-sugar-level-highly-diabetic);
    text-transform: uppercase;
    text-decoration: underline;
}

.report-section .diabetic-level-indicator-with-image{

}

.report-section .diabetic-level-indicator-with-image .card{
    border-radius: 0px;
}

.report-section .diabetic-level-indicator-with-image .card .card-body{
    padding:0px;
}

.report-section .diabetic-level-indicator-with-image .card .card-body .diabetic-level-text-wrapper{
    padding: 1rem 2rem;
    text-align: center;
    text-transform: uppercase;
}

.report-section .diabetic-level-indicator-with-image .card .card-body .diabetic-level-text-wrapper.sugar-level-normal{
    background-color: var(--color-indicator-sugar-level-normal);
}

.report-section .diabetic-level-indicator-with-image .card .card-body .diabetic-level-text-wrapper.sugar-level-pre-diabetic{
    background-color: var(--color-indicator-sugar-level-prediabetes);
}

.report-section .diabetic-level-indicator-with-image .card .card-body .diabetic-level-text-wrapper.sugar-level-diabetic{
    background-color: var(--color-indicator-sugar-level-diabetic);
}

.report-section .diabetic-level-indicator-with-image .card .card-body .diabetic-level-text-wrapper.sugar-level-highly-diabetic{
    background-color: var(--color-indicator-sugar-level-highly-diabetic);
}

.report-section .diabetic-level-indicator-with-image .card .card-body .diabetic-level-text-wrapper .diabetic-level-text{
    font-size: 24px;
    color:var(--color-white);
}

.report-section .diabetic-level-indicator-with-image .card .card-body .diabetic-level-chart-wrapper{
    padding: 2rem;
}

.card.card-gray{
    border-color: var(--color-grey-1)
}

.card.card-gray .card-body{
    background-color:  var(--color-grey-1)
}

.report-section .report-section-title{
    font-size: 32px;
    text-align: center;
}

.report-section .report-section-description{
    font-size: 24px;
    text-align: center;
}

/* Base Widget Styling */
.health-stats-widget {
    background-color: var(--color-dark);
    color: #fff;
    border-radius: 10px;
}

/* Title */
.health-stats-widget .card-title {
    font-weight: 700;
    color: #fff;
}

/* Current Badge */
.health-stats-widget .health-badge-current {
    background-color: var(--color-primary-teal);
    color: #fff;
    padding: 15px 15px;
    border-radius: 0px;
    font-weight: 500;
    width: 100px;
}

.health-stats-widget .health-badge-current-value{
    color: var(--color-white);
    font-weight: bold;
}

/* Expected Badge */
.health-stats-widget .health-badge-expected {
    background-color: #F4C430; /* Yellow */
    color: #fff;
    padding: 15px 15px;
    border-radius: 0px;
    font-weight: 500;
    width: 100px;
}


.health-stats-widget .health-badge-expected-value{
    color: var(--color-white);
}

.report-section .available-options-title{
    font-size: 24px;
    text-align: center;
}

.font-color-teal{
    color: var(--color-primary-teal);
}

/* Sticky Bottom CTA */
.sticky-bottom-cta {
    position: sticky;
    bottom: 0;
    z-index: 1050; /* keep it above content */
    padding: 1rem 0rem;
    background-color: #FFF;
}

.suggestion-tips{
    font-size: 28px;
}

.card.holistic-approach{
    border:0px;
}

.card.holistic-approach .card-body{
    padding:0px;
    background-color: var(--color-grey-1);
}

.card.holistic-approach .card-img-top{
    border-radius: 0px;
}

.card.holistic-approach .card-body .content-wrapper{
    margin:1.5rem 15px;
}

.why-sugar-knocker-explainers{

}

.why-sugar-knocker-explainers .icon-wrapper{

}

.why-sugar-knocker-explainers .icon-wrapper .icon{
    font-size: 3rem;
    color: var(--color-primary-teal);
}

.why-sugar-knocker-explainers .title{
    font-size: 24px;
    color: var(--color-primary-teal);
}

.why-sugar-knocker-explainers .description{
    font-size: 20px;
    color: var(--color-grey-2);
    margin-bottom: 0px;
}

.card.sk-ingredient-dark{
    border-color: var(--color-dark);
}
.card.sk-ingredient-dark .card-body{
    background-color: var(--color-dark);
    color:var(--color-white);
}

.card.sk-ingredient-dark .card-body .name{
    color: var(--color-primary-teal);
    font-size:24px;
    text-align: center;
}

.card.sk-ingredient-dark .card-body .image-wrapper{
    text-align: center;
}

.card.sk-ingredient-dark .card-body .how-ingredient-works-wrapper{

}

.card.sk-ingredient-dark .card-body .how-ingredient-works-wrapper .root-cause-label-wrapper{
    margin-bottom: 5px;
}

.card.sk-ingredient-dark .card-body .how-ingredient-works-wrapper .root-cause-label{
    font-size: 14px;
    color:var(--color-yellow);
    border:1px solid var(--color-grey-2);
    padding:3px;
    border-radius: 3px;
}

.card.sk-ingredient-dark .card-body .how-ingredient-works-wrapper .root-cause-value{
    color: var(--color-yellow);
    font-size: 18px;
}

.card.sk-ingredient-dark .card-body .how-ingredient-works-wrapper  .anti-diabetic-action-label-wrapper{
    margin-bottom: 5px;
}

.card.sk-ingredient-dark .card-body .how-ingredient-works-wrapper  .anti-diabetic-action-label{
    font-size: 14px;
    color:var(--color-yellow);
    border:1px solid var(--color-grey-2);
    padding:3px;
    border-radius: 3px;
}

.card.sk-ingredient-dark .card-body .how-ingredient-works-wrapper  .anti-diabetic-action-values-wrapper{

}

.card.sk-ingredient-dark .card-body .how-ingredient-works-wrapper  .anti-diabetic-action-values-wrapper p{
    margin-bottom: 0px;
    font-size: 18px;
}