.m__calculator *,
.m__calculator ::after,
.m__calculator ::before {
    box-sizing: border-box
}

.m__calculator * {
    font-family: 'Inter', sans-serif;
}

.m__calculator {
    width: 100%;
    margin: 0 auto;
    font-family: inherit;
    font-size: 17px;
    color: #000000;
    background: transparent;
    padding: 40px 0;
}

.m__calculator .m__row {
    display: block;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 20px;
    max-width: 600px;
    margin: auto;
}

.m__calculator .fill_details {
    margin: 15px 0;
    padding: 20px;
    border-radius: 5px;
    background: #fcfcfc;
    border: 1px solid #e1e1e1;
}

.m__calculator .m__cell_two {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.m__calculator .m__cell {
    flex: 1;
    padding: 15px 0 0;
    flex: 1 1 calc(50% - 20px);
    align-items: center;
    min-height: 60px;
}

.m__calculator .m__cell_two .m__cell {
    padding: 10px 0 0;
}

.m__calculator .m__group {
    position: relative;
    width: 100%;
}

.m_error{
    border-color: #ff7373 !important;
}
.m__group input,
.m__group select {
    width: 100%;
    position: relative;
    background: rgb(255 255 255);
    border-radius: 6px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(170 170 170);
    border-image: initial;
    height: 44px;
    padding: 5px 10px 5px 12px;
    font-size: 15px;
    color: rgb(0 0 0);
    font-weight: 700;
    margin-top: 4px;
}

.m__group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem top 50%;
    background-size: 0.65rem auto;
}

.m__group input:focus,
.m__group select:focus {
    border-radius: 6px;
    border: 2px solid rgb(69 102 87);
    outline: 0
}

.m__calculator .fill_details .m__group input,
.m__calculator .fill_details .m__group input:focus {
    background: #ffffff;
    font-size: 14px;
}

.m__calculator .m__name {
    font-weight: 600;
    position: relative;
    flex: 1;
    color: rgb(15 15 15);
    font-size: 16px;
    margin-right: auto;
}

.m__calculator .m__value {
    font-weight: 800;
    font-size: 16px;
    position: relative;
    color: rgb(0 96 41);
    padding: 5px;
}

.m__calculator .m__label {
    display: flex;
    align-items: center;
    justify-content: center;
}

#msg__succees {
    color: #005752;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    background: rgb(3 123 67 / 11%);
    font-size: 14px;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 30px;
}

#msg__succees strong {
    font-size: 20px;
    margin-bottom: 10px;
    display: block;
}

.m__section {
    flex-direction: column;
    align-items: initial;
    justify-content: space-between;
    column-gap: 10px;
    margin: auto;
}

.m__result {
    display: flex;
    flex-direction: column;
    border-width: 9px 1px 1px;
    border-style: solid;
    border-image: initial;
    border-radius: 12px;
    border-top: 5px solid #b9bbbf;
    border-color: #006b31 rgb(232 232 232) rgb(232 232 232);
    background: rgb(255 255 255);
}

.m_foot {
    padding: 24px 40px 0px;
    display: block;
}

.mm_btn_primary {
    position: relative;
    display: block;
    text-decoration: none;
    font-family: Inter, sans-serif;
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 45px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    border-radius: 6px;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    outline: none;
    background-image: linear-gradient(112deg, #006029 0%, #04824a 100%);
    color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.05) 0px 1px 2px;
    transition: all 0.25s ease 0s;
    margin: 0;
    margin-top: 0px;
    min-width: 150px;
}

.mm_btn_primary:hover {
    background-image: linear-gradient(112deg, #078a3f 0%, #014627 100%);
}

.m_level {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px;
    font-size: 14px;
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: bold;
    line-height: 24px;
    text-size-adjust: none;
    margin: 0 0 10px 0;
    padding-bottom: 13px;
    border-bottom: 1px solid #eaeaea;
}

.m_level:last-child {
    border: 0;
}

.m_count {
    color: #000000;
    font-weight: 800;
    font-size: 22px;
    text-align: right
}

.m_desc {
    max-width: 60%;
    font-size: 16px;
}

/*-----For Switch Radio Buttons----*/
.radio-tile-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-top: 10px;
}

.radio-tile-group .input-container {
    position: relative;
    height: auto;
    width: auto;
    min-width: 46px;
    margin: 3px 6px 3px 0;
}

.radio-tile-group .input-container .radio-button {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: pointer;
}

.radio-tile-group .input-container .radio-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: transform 300ms ease;
    border-radius: 4px;
    font-style: normal;
    font-weight: 900;
    font-size: 13px !important;
    line-height: 14px;
    background: #e2e2e2;
    color: #1c1c1c;
    padding: 10px 10px;
    min-width: 80px;
}

.radio-tile-group .input-container .radio-tile-label {
    text-align: center;
    font-weight: 700;
    margin: 0;
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile {
    background-color: #006029;
    color: white;
}

.radio-tile-group .input-container .radio-button:checked+.radio-tile .radio-tile-label {
    color: white;
}

.m__calculator .noUi-horizontal {
    height: 6px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.m__calculator .noUi-target {
    background: rgb(171 171 171 / 34%);
    border: 0px;
    border-radius: 4px;
    box-shadow: none;
}

.m__calculator .noUi-handle:after,
.m__calculator .noUi-handle:before {
    content: "";
    display: block;
    position: absolute;
    height: 6px;
    width: 0px;
    background: rgb(244 244 244 / 60%);
    left: 5px;
    top: 4px
}

.m__calculator .noUi-handle:after {
    left: 8px
}

.m__calculator .noUi-connect {
    box-shadow: none;
    background: linear-gradient(90deg, #00912a 0%, #023f3c 100%);
    transition: background 450ms ease 0s;
    border-radius: 10px;
}

.m__calculator .noUi-horizontal .noUi-handle {
    width: 24px;
    height: 24px;
    left: -12px;
    top: -9px;
    border: 6px solid #fdfdfd;
    border-radius: 50%;
    background-color: rgb(5 72 26);
    box-shadow: rgb(22 101 0) 0px 1px 2px, rgb(11 23 48) 0px 1px 6px;
    cursor: pointer;
    padding-top: 7px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.m__calculator .noUi-connect {
    -webkit-transition: 0s !important;
    transition: 0s !important
}


.mdetail {
    font-size: 12px;
    font-weight: 600;
    color: #4e4e4e;
    margin-top: 15px;
    text-align: center;
}

.button__c {
    padding: 8px;
    border: 0;
    color: #ffffff;
    background-color: #0b7028;
    transition: box-shadow .4s, background-color .3s;
    font-family: 'Inter';
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    text-align: center;
    outline: none;
    margin: 10px 0 20px;
    text-decoration: none;
}

.big__title {
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    margin: 15px 0;
}

.meter {
    box-sizing: content-box;
    height: 50px;
    position: relative;
    margin: 10px 0 10px 0;
    background: #dcdcdc;
    border-radius: 25px;
    padding: 5px;
}

.meter>span {
    display: block;
    height: 100%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(4 127 71);
    background-image: linear-gradient(center bottom,
        rgb(43, 194, 83) 37%,
        rgb(84, 240, 84) 69%);
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.meter>span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(-45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent);
    z-index: 1;
    background-size: 50px 50px;
    animation: .1s linear infinite;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.did_you_know {
    font-size: 15px;
    color: #000000;
    text-align: center;
}

.did_you_know strong {
    font-size: 19px;
    display: block;
    margin: 20px 0;
}

@media all and (max-width:800px) {
    .m__calculator {
        overflow: auto;
    }

    .m_foot {
        padding: 24px 20px 0px;
    }
}
@media all and (max-width:700px) {
    .m__calculator {
        font-size: 16px;
    }
	.m__calculator .m__row {
        display: flex;
        flex-direction: column;
        align-items: initial;
        width: 100%;
        column-gap: 0;
    }
    .m__section {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        margin: 15px;
    }

    .m__calculator .m__cell {
        flex-wrap: wrap;
        align-items: flex-start;
		max-width: 100%;
    }

    .m__calculator .m__name {
        min-width: auto;
    }

    .m__calculator .m__group {
        position: relative;
        flex: 1;
        width: auto;
    }

    .m__result {
        margin-top: 10px;
    }
}
/* --- Global Dark Styles for Qualification Tool --- */
.qualification-tool-section {
  background-color: #072743 !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.qualification-tool-section h2, .qualification-tool-section .did_you_know, .qualification-tool-section .did_you_know strong, .qualification-tool-section .m__name {
  color: #ffffff;
}
.qualification-tool-section .m__value {
  color: #ffcb00;
}
.qualification-tool-section .fill_details {
  background-color: #fcfcfc;
  border: 1px solid #4a5a6d;
}

/* --- Brand Color Overrides & Centering for Qualification Tool --- */
.mm_btn_primary {
    background-image: none; /* Remove gradient */
    background-color: #ff5d00; /* Set solid orange color */
    display: block; /* Allow margin auto to work */
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 300px;
}
.mm_btn_primary:hover {
    background-image: none;
    background-color: #e65400; /* Darker orange for hover */
}
.radio-tile-group .input-container .radio-button:checked+.radio-tile {
    background-color: #ff5d00;
}
.m__calculator .noUi-connect, .m__calculator .noUi-horizontal .noUi-handle {
    background: #ff5d00;
}
.m__group input:focus, .m__group select:focus {
    border: 2px solid #ff5d00;
}

/* --- Mobile Fixes for Qualification Tool --- */
@media screen and (max-width: 767px) {
  .qualification-tool-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .qualification-tool-section h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
  }
  #calc_btn, #next_btn {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 300px;
  }
}
#step4 {
    display: none !important;
}
/* Style for the calculator subheading */
.calculator-subheading {
    font-family: "Figtree", sans-serif;
    color: #eaeaea; /* A slightly off-white for readability */
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 24px;
}