/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

 

html {
    font-family: "Ubuntu", sans-serif !important;
    /* background: url("../images/BG19.jpg"); */

    background-attachment: fixed;

    background-size: cover;

    background-position: bottom center;

    background-repeat: no-repeat;

}



body,

nav,

.h6,

h6 {

    background-color: transparent !important;

    font-family: "Ubuntu", sans-serif !important;

    font-style: normal !important;

    font-weight: 400 !important;

    letter-spacing: 1.2px;

}



.description {

    font-family: 'Poppins' !important;

    font-weight: 600;

}





.steps a,

button,

input,

.progress-text {


    font-style: normal !important;

    font-weight: 400 !important;



}

.btn-close {
    z-index: 1111 !important;
    width: 51px !important;
}



.steps {

    margin: 0px auto;

    height: 100%;

}



.dropdown {

    position: absolute;

    right: 0;

}





.span-no {

    height: 52px;

    width: 52px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: #ed028c;

    font-size: 22px;

    margin: auto;

    font-weight: 600;

    color: #fff;

    margin-bottom: 15px;

}



.ng-logo {

    /* background: #ef5da094; */

}





.u-clinic {

    padding: 0px 0 15px 0;

    line-height: 1.6;

    font-size: 1.7rem;

    text-shadow: 2px 1px 1px #fff;

    color: #08a4ac;

    font-weight: 900 !important;

    text-decoration: none !important;

}



.u-clinic2 {

    padding: 0px 0 15px 0;

    line-height: 1.6;

    font-size: 30px;

    text-shadow: 2px 1px 1px #fff;

    color: #08a4ac;

    font-weight: 900 !important;

    text-decoration: none !important;

}



.u-clinic2 span {

    font-size: 25px;

    color: #000;

    text-shadow: none;

    font-weight: 400 !important;

}

.zoom-in-zoom-out {
    animation: zoom-in-zoom-out 2s ease-out infinite;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(1, 1);
    }
}

.steps fieldset {

    background-image: url('../../images/background.png');
    /* background-image: url('../../images/bgg_1.png'); */

    /* background-size: cover; */

    /* background-position: bottom; */

    /* background-attachment: fixed; */

    background-size: 100% 100%;

    background-repeat: no-repeat;

    padding: 5px 0px;

    border-top: 0px solid #75b9ff;

    border-radius: 0px;

    margin: auto;

    max-width: 600px;

    position: absolute;

    left: 0;

    right: 0;

    height: -webkit-fill-available;

    overflow-y: scroll;

    overflow-x: hidden;

    padding-top: 0;



}



.steps .f-bg {

    background-image: url('../images/bg_2@2x.png');



}



.steps .back-btn {

    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: center;

    margin: auto;

    color: #fff !important;

    margin: auto !important;

    font-size: 15px !important;

}



.steps .back-btn i {

    font-size: 28px;

}



.bottom-photo::before {

    background: url(https://oncer.in/arogyadiabetes/images/illustration_meal_planning@2x-min.png);

    background-position: bottom, right;

    background-size: contain;

    position: absolute;

    content: '';

    bottom: 0;

    right: 0;

    opacity: 0.6;

    height: 29%;

    width: 51%;

    background-repeat: no-repeat;



}



.bottom-photo2::before {

    background: url(https://oncer.in/arogyadiabetes/images/illustration_diabetes_risk_test@2x-min.png);

    background-position: bottom, right;

    background-size: contain;

    position: absolute;

    content: '';

    bottom: 0;

    right: 0;

    opacity: 0.6;

    height: 29%;

    width: 49%;

    background-repeat: no-repeat;

}



.bottom-photo3::before {

    background: url(https://oncer.in/arogyadiabetes/images/illustration_covid_19@2x-min.png);

    background-position: bottom, right;

    background-size: contain;

    position: absolute;

    content: '';

    bottom: 0;

    right: 0;

    opacity: 0.6;

    height: 29%;

    width: 49%;

    background-repeat: no-repeat;

}









.steps fieldset.info {

    border: none;

    border-radius: 0;

    background: none;

}



.steps input,

.steps textarea,

.steps select {

    box-shadow: inset 0 0 5px 2px #f0f0f0;

}



input::placeholder {

    letter-spacing: 1.2px;

}







.custom-tooltip {

    /* display: none; */

    position: relative;

    background-color: #fa6750;

    color: #fff;

    border-radius: 4px;

    padding: 11px 14px 8px;

    font-size: 14.5px;

    z-index: 999;



}





.custom-tooltip:before {

    content: "";

    position: absolute;

    top: -12px;

    left: 50%;

    height: 9px;

    width: 11px;

    border: 6px solid transparent;

    border-bottom-color: #fa6750;

    transform: translateX(-50%);

    display: block;

    text-transform: uppercase;

    letter-spacing: .03em;

    font-weight: 600;

    font-size: 20px;

}



.btn-primary {

    border: none !important;

}



#content {

    margin-top: 8px;

    background-color: #d7d7d7;

    padding: 0 14px 8px;

}



.text-span {

    font-size: 10px;

    line-height: 10px;

    letter-spacing: normal;

}



.div-txt {

    background: #ddd;

    margin: 0 0 20px;

    padding: 14px 10px;

    font-size: 10px;

    letter-spacing: normal;

}



.txt-under {

    font-size: 9px;

    line-height: normal;

    letter-spacing: normal;

    font-weight: 600;

}



.form-control {

    width: 30% !important;

}



.form-control::placeholder {



    font-size: 1rem !important;



}



.steps input,

.steps textarea,

.steps select {

    border-radius: 8px;
    /* border: none; */
    box-shadow: none;
    background: #fff;
    padding: 10px 10px;
    font-family: 'Poppins';
    font-weight: 600;
    /* margin-top: 10px; */
    /* width: 100%; */
    border: 1px solid #b1c2d9;
    border-left: 4px solid #0b52b3;
    height: 50px;
}


.text-lable {

    font-weight: 700 !important;

}



.steps .action-button,

.action-button {

    box-shadow: none;

    background: #5ea491;

    /* background: -webkit-linear-gradient(180deg, #7e356a, #ff6e73);

     */

    background: -webkit-linear-gradient(146deg, #aedf00, #026623);

    border-radius: 25px;

    font-family: 'Poppins' !important;

    letter-spacing: 0.6px;

    font-weight: 600 !important;

}



.steps .action-button:hover,

.steps .action-button:focus,

.action-button:hover,

.action-button:focus {

    background: -webkit-linear-gradient(360deg, #aedf00, #026623) !important;

}



.steps .buton {

    width: 60%;

    background: #fff;

    color: #000;

    border-color: #ddd;

    border-bottom: 5px solid #62c0a6;

    border-radius: 15px;

    border-left: 5px solid #62c0a7;

    padding: 13px 15px;

    box-shadow: 0 10px 6px -6px #777;

    word-break: break-word;

}



.steps .btn1 {

    border-bottom: 5px solid #56c4cf;

    border-left: 5px solid #56c4cf;

}



.steps .btn2 {

    border-bottom: 5px solid #8dd7f7;

    border-left: 5px solid #8dd7f7;

}



.steps .btn3 {

    border-bottom: 5px solid #60c2aa;

    border-left: 5px solid #60c2aa;

}



.steps .btn4 {

    border-bottom: 5px solid #a5cd39;

    border-left: 5px solid #a5cd39;

}






.btn-containerr {

    display: flex;

    height: 300px;

    align-items: center;

    justify-content: center;

    border: 2px solid #ddd;

    background: #fff;

    padding: 20px;

}



.f-w-300 {

    font-weight: 300;

}



.f-w-400 {

    font-weight: 400;

}



.f-w-500 {

    font-weight: 500;

}



.f-w-600 {

    font-weight: 600;

}



.f-w-700 {

    font-weight: 700;

}



.f-w-800 {

    font-weight: 800;

}





.steps .buton {

    position: relative;

}



.steps .buton:before,

.steps .buton:after {

    z-index: -1;

    position: absolute;

    content: "";

    bottom: 25px;

    left: 10px;

    width: 50%;

    top: 80%;

    max-width: 300px;

    background: #777;

    -webkit-box-shadow: 0 35px 20px #777;

    -moz-box-shadow: 0 35px 20px #777;

    box-shadow: 0 35px 20px #777;

    -webkit-transform: rotate(-8deg);

    -moz-transform: rotate(-8deg);

    -o-transform: rotate(-8deg);

    -ms-transform: rotate(-8deg);

    transform: rotate(-8deg);

}



.steps .buton:after {

    -webkit-transform: rotate(8deg);

    -moz-transform: rotate(8deg);

    -o-transform: rotate(8deg);

    -ms-transform: rotate(8deg);

    transform: rotate(8deg);

    right: 10px;

    left: auto;

}



#progressbar li.active:before,

#progressbar li.active:after {

    background: #2890f8 !important;

    color: #2890f8 !important;

}



.steps label {

    color: #124581;

}





.active {

    color: rgb(40 91 169) !important;

    font-weight: bold;

}



.pro-photo {

    max-width: 235px;

    margin: 10px;

    z-index: 37;

    position: relative;

    /* bottom: -58px; */

}



.user-photo {

    /* border-radius: 0 40px; */

    padding: 0 22px 18px 22px;

}



.user-photo2 {

    padding: 0 18px 14px 16px;

}



.pro-photo {

    background: url('../images/doc_image_square@2x-min.png');

    background-repeat: no-repeat;

    background-size: 92% 92%;

    background-position: center;



}



.pro-photo2 {

    max-width: 180px;

    z-index: 37;

    position: relative;

    background: url('../images/doc_image_square@2x-min.png');

    background-repeat: no-repeat;

    background-size: 92% 92%;

    background-position: center;

}



.bio-container {

    /* background: linear-gradient(86deg, #64c2a5, #43a1c4, #3e4598); */

    padding: 50px 0 11px 0;

    color: rgb(0, 0, 0);

    /* margin-right: 20px; */

}



.profile-container {

    /* margin-top: -46px; */

}



.text_know_about {

    padding: 10px;

}



.btn-check:focus+.btn,

.btn:focus {

    box-shadow: none !Important;

}



.btn_dry_eyes img {

    transition: transform 0.9s;

}



.btn_dry_eyes img:hover {

    transform: scale(1.1);

}



.btn_glaucom img {

    transition: transform 0.9s;

}



.btn_glaucom img:hover {

    transform: scale(1.1);

}



/* width */

::-webkit-scrollbar {

    width: 2px;

}



/* Track */

::-webkit-scrollbar-track {

    background: #f1f1f1;

}



/* Handle */

::-webkit-scrollbar-thumb {

    background: #888;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

    background: #555;

}



.u-name {

    font-size: 2rem;

    color: #ca448d;

    font-weight: 700;

}



.pt-17 {

    padding-top: 17px !Important;

}



.counter {

    color: #777;

    font-family: 'Poppins', sans-serif;

    text-align: center;

    width: 210px;

    height: 100px;

    padding: 25px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

}



.bg-counter:before {

    content: '';

}



.counter:before,

.counter:after {

    content: "";

    background: #01BFE1;

    position: absolute;

    top: 20px;

    left: 0;

    right: 0;

    bottom: 20px;

    z-index: -1;

    clip-path: polygon(13% 0%, 87% 0%, 100% 50%, 87% 100%, 13% 100%, 0% 50%);

}



.counter:after {

    background: #fff;

    top: 0;

    left: 10px;

    right: 10px;

    bottom: 0;

    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);

}



.counter .counter-icon {

    font-size: 35px;

    line-height: 35px;

    margin: 0 0 13px;

}



.counter h3 {

    color: #01BFE1;

    font-family: 'Oswald', sans-serif;

    font-size: 19px;

    font-weight: 500;

    letter-spacing: 0.5px;

    line-height: 25px;

    text-transform: uppercase;

    margin: 0 0 8px;

}



.counter .counter-value {

    font-size: 30px;

    font-weight: 600;

    display: block;

}



.counter.purple:before {

    background: #2A1C71;

}



.counter.purple h3 {

    color: #2A1C71;

}



.counter.pink:before {

    background: #FE3653;

}



.counter.pink h3 {

    color: #FE3653;

}



.counter.green:before {

    background: #31ad26;

}



.counter.green h3 {

    color: #31ad26;

}



@media screen and (max-width:990px) {

    .counter {

        margin-bottom: 40px;

    }

}





.modal-title {

    background: linear-gradient(45deg, #11385c, #268fa8, #268fa8);

    font-weight: 900;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-size: x-large;



}



.modal-content {

    border-radius: 20px !important;

    /* background-image: url('../images/background_for_web.jpg') !important; */

    background-size: 100% !important;

    background-position: bottom !important;

    background-repeat: no-repeat;

    border: 20px solid;

    border-image-slice: 2;

    border-width: 6px;



    border-image-source: linear-gradient(to left, #268fa8, #11385c);

}



.btn-outline-secondary {

    height: 60px !important;

    margin: 7px 0px;

    font-weight: 700 !important;

    color: #000;

    border-color: #0440603d;

    border-width: 1px;

}



.guuu1 {

    color: #007130;

    font-weight: 700 !important;

    /* background: #008539; */

    /* background-color: #007130 !important; */

}



.btn-danger {

    height: 60px !important;

    font-weight: 700 !important;

    color: #fff;

    background-color: #ed028c;

    border-color: #ed028c;



}



.btn-danger:hover {

    color: #fff;

    background-color: #ac3095;

    border-color: #ac3095;

}



/* .back-button {

    position: absolute;

    top: 8%;

} */



.zone-title {

    color: #ed028c;

    font-weight: 600;

}



.title {

    font-weight: 800;

    font-size: 1.6rem;

}



.d-div {

    display: none;

}



.button {

    position: relative;

    color: #e05c83;

    text-decoration: none;

    display: inline-block;

    text-transform: uppercase;

    letter-spacing: 1px;

    border: 2px solid white;

    border-radius: 1000px;

    padding: 10px 20px;

    margin: 10px;

    box-shadow: 0 2px 5px 0 rgba(3, 6, 26, 0.15);

    transition: 0.3s all ease-in-out;

    background: linear-gradient(106deg, #fad6e5, #ffffff, #fad6e5);

}





.button:hover {

    cursor: pointer;

    background: white;

    color: #1F4141;

    -webkit-animation: none;

    animation: none;

}



.button-wiggle {

    -webkit-animation: wiggle 3s 2s infinite;

    animation: wiggle 3s 2s infinite;

}







@-webkit-keyframes wiggle {



    5%,

    50% {

        transform: scale(1);

    }



    10% {

        transform: scale(0.9);

    }



    15% {

        transform: scale(1.15);

    }



    20% {

        transform: scale(1.15) rotate(-5deg);

    }



    25% {

        transform: scale(1.15) rotate(5deg);

    }



    30% {

        transform: scale(1.15) rotate(-3deg);

    }



    35% {

        transform: scale(1.15) rotate(2deg);

    }



    40% {

        transform: scale(1.15) rotate(0);

    }

}



@keyframes wiggle {



    5%,

    50% {

        transform: scale(1);

    }



    10% {

        transform: scale(0.9);

    }



    15% {

        transform: scale(1.15);

    }



    20% {

        transform: scale(1.15) rotate(-5deg);

    }



    25% {

        transform: scale(1.15) rotate(5deg);

    }



    30% {

        transform: scale(1.15) rotate(-3deg);

    }



    35% {

        transform: scale(1.15) rotate(2deg);

    }



    40% {

        transform: scale(1.15) rotate(0);

    }

}



.sheer {

    background-color: #FD7FE3;

    left: -5px;

}



.steps label {

    color: #000;

    text-align: left !important;

    font-size: 13px;

    font-weight: 500;

    padding-bottom: inherit !important;

    padding-top: inherit !important;

    display: flex;

    align-items: center;

    justify-content: start !important;

}



.sheer:before {

    left: -17.5px;

    border-color: transparent #FD7FE3;

}



.sheer:after {

    right: -17.5px;

    border-color: #FD7FE3 transparent;

}



.main-timeline {

    font-family: 'Poppins', sans-serif;

    position: relative;

}



.main-timeline:after {

    content: '';

    display: block;

    clear: both;

}



.main-timeline .timeline {

    /* width: calc(50% + 120px); */

    margin: 0 0 25px;

    /* float: right; */

    position: relative;

    padding: 0 10px;

}



.main-timeline .timeline-content {

    color: #fff;

    background: linear-gradient(#ed028c, #00aaad);

    /* padding: 20px 30px 20px 205px; */

    min-height: 125px;

    padding: 25px;

    text-align: center;

    display: block;

    position: relative;

    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);

    text-decoration: none;

    font-family: 'Poppins' !important;

}



.main-timeline .timeline-content:hover {

    text-decoration: none;

}



.main-timeline .timeline-icon {

    color: #fff;

    background-color: #fff;

    font-size: 35px;

    text-align: center;

    line-height: 115px;

    height: 115px;

    width: 115px;

    transform: translateY(-50%);

    position: absolute;

    left: 61px;

    top: 50%;

    clip-path: polygon(50% 0, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%);

}



.meal-button-container {

    margin-top: 30px;

}



.main-timeline .timeline-icon:before {

    content: '';

    background-color: #07E1F3;

    position: absolute;

    left: 13px;

    right: 13px;

    top: 13px;

    bottom: 13px;

    z-index: -1;

    clip-path: inherit;

}



.main-timeline .title {

    color: #fff;

    font-size: 26px;

    font-weight: 600;

    /* text-transform: uppercase; */

    letter-spacing: 0.5px;

    margin: 0 0 5px;

}



.main-timeline .description {

    font-size: 18px;

    letter-spacing: 1px;

    line-height: 22px;

    margin: 0;

    color: #fff;

    font-family: 'Poppins' !important;

}



.main-timeline .timeline:nth-child(even) {

    float: left;

}



.main-timeline .timeline:nth-child(even) .timeline-content {

    padding: 20px 205px 20px 50px;

}



.main-timeline .timeline:nth-child(even) .timeline-icon {

    transform: translateY(-50%);

    left: auto;

    right: 60px;

}



.main-timeline .timeline:nth-child(4n+2) .timeline-icon:before {

    background-color: #e58a12;

}



.main-timeline .timeline:nth-child(4n+2) .title {

    color: #e58a12;

}



.main-timeline .timeline:nth-child(4n+3) .timeline-icon:before {

    background-color: #FE6CC4;

}



.main-timeline .timeline:nth-child(4n+3) .title {

    color: #FE6CC4;

}



.main-timeline .timeline:nth-child(4n+4) .timeline-icon:before {

    background-color: #A487F5;

}



.main-timeline .timeline:nth-child(4n+4) .title {

    color: #A487F5;

}



.profile-container2 {

    margin-top: 20px;

}



@media screen and (max-width:767px) {

    .main-timeline .timeline {

        width: 100%;

    }



    .main-timeline .timeline-content {

        padding-right: 50px;

    }



    .main-timeline .timeline:nth-child(even) .timeline-content {

        padding-left: 60px;

    }



    .u-clinic {

        font-size: 1rem;

    }



    .fa-arrow-left {

        font-size: 15px;

    }

}



@media screen and (max-width:576px) {

    .main-timeline .timeline {

        margin: 0 0 15px;

    }



    .main-timeline .timeline-content,

    .main-timeline .timeline:nth-child(even) .timeline-content {

        text-align: center;

        padding: 15px 30px 15px;

    }



    .main-timeline .timeline-icon,

    .main-timeline .timeline:nth-child(even) .timeline-icon {

        transform: translateY(0) translateX(-50%);

        left: 50%;

        right: auto;

        top: 21px;

    }



    .profile-container2 {

        margin-top: 20px;

    }



    .u-clinic {

        font-size: 1rem;

    }



    .fa-arrow-left {

        font-size: 15px;

    }



}



@media screen and (max-width:414px) {



    .main-timeline .timeline-content,

    .main-timeline .timeline:nth-child(even) .timeline-content {

        text-align: center;

        padding: 15px 20px 15px;

    }



    .main-timeline .title {

        font-size: 22px;

        line-height: 1.2;

    }



    .main-timeline .description {

        font-size: 15px;

        line-height: 20px;

    }



    .title {

        font-size: 14px;

        line-height: 0;

    }



    .description {

        font-size: 10px;

        line-height: 0.5;

    }



    .user-photo2 {

        padding: 0 12px 10px 12px;

    }



    .profile-container2 {

        margin-top: 20px;

    }



    .bottom-photo3::before {

        bottom: -25px;

        right: 0;

        opacity: 0.6;

        height: 11%;

        width: 25%;

    }



    .u-clinic {

        font-size: 1rem;

    }



    .fa-arrow-left {

        font-size: 15px;

    }

}



@media screen and (max-width:320px) {



    .main-timeline .timeline-content,

    .main-timeline .timeline:nth-child(even) .timeline-content {

        text-align: center;

        padding: 15px 20px 15px;

    }



    .fa-arrow-left {

        font-size: 15px;

    }



    .main-timeline .title {

        font-size: 18px;

        line-height: 1.2;

    }



    .main-timeline .description {

        font-size: 13px;

        line-height: 20px;

    }



    .title {

        font-size: 12px;

        line-height: 0;

    }



    .description {

        font-size: 8px;

        line-height: 0;

    }



    .profile-container2 {

        margin-top: 20px;

    }



    .bottom-photo::before {

        height: 19%;

        width: 40%;

    }



    .bottom-photo3::before {

        bottom: -28%;

        right: 0;

        opacity: 0.6;

        height: 11%;

        width: 25%;

    }



    .u-clinic {

        font-size: 0.8rem;

    }

}



@media only screen and (max-width: 600px) {

    .u-name {

        font-size: 1.4rem;

        font-weight: 700;

    }



    .bio-container {

        margin-right: 10px;

    }



    .fieldset-div {

        padding: 10px;

    }



    .radio-container {

        width: 100%;

    }



    .steps fieldset {

        width: 100% !important;

    }

}



@-webkit-keyframes buzz-out-on-hover {

    10% {

        -webkit-transform: translateX(3px) rotate(2deg);

        transform: translateX(3px) rotate(2deg);

    }



    20% {

        -webkit-transform: translateX(-3px) rotate(-2deg);

        transform: translateX(-3px) rotate(-2deg);

    }



    30% {

        -webkit-transform: translateX(3px) rotate(2deg);

        transform: translateX(3px) rotate(2deg);

    }



    40% {

        -webkit-transform: translateX(-3px) rotate(-2deg);

        transform: translateX(-3px) rotate(-2deg);

    }



    50% {

        -webkit-transform: translateX(2px) rotate(1deg);

        transform: translateX(2px) rotate(1deg);

    }



    60% {

        -webkit-transform: translateX(-2px) rotate(-1deg);

        transform: translateX(-2px) rotate(-1deg);

    }



    70% {

        -webkit-transform: translateX(2px) rotate(1deg);

        transform: translateX(2px) rotate(1deg);

    }



    80% {

        -webkit-transform: translateX(-2px) rotate(-1deg);

        transform: translateX(-2px) rotate(-1deg);

    }



    90% {

        -webkit-transform: translateX(1px) rotate(0);

        transform: translateX(1px) rotate(0);

    }



    100% {

        -webkit-transform: translateX(-1px) rotate(0);

        transform: translateX(-1px) rotate(0);

    }

}



@keyframes buzz-out-on-hover {

    10% {

        -webkit-transform: translateX(3px) rotate(2deg);

        transform: translateX(3px) rotate(2deg);

    }



    20% {

        -webkit-transform: translateX(-3px) rotate(-2deg);

        transform: translateX(-3px) rotate(-2deg);

    }



    30% {

        -webkit-transform: translateX(3px) rotate(2deg);

        transform: translateX(3px) rotate(2deg);

    }



    40% {

        -webkit-transform: translateX(-3px) rotate(-2deg);

        transform: translateX(-3px) rotate(-2deg);

    }



    50% {

        -webkit-transform: translateX(2px) rotate(1deg);

        transform: translateX(2px) rotate(1deg);

    }



    60% {

        -webkit-transform: translateX(-2px) rotate(-1deg);

        transform: translateX(-2px) rotate(-1deg);

    }



    70% {

        -webkit-transform: translateX(2px) rotate(1deg);

        transform: translateX(2px) rotate(1deg);

    }



    80% {

        -webkit-transform: translateX(-2px) rotate(-1deg);

        transform: translateX(-2px) rotate(-1deg);

    }



    90% {

        -webkit-transform: translateX(1px) rotate(0);

        transform: translateX(1px) rotate(0);

    }



    100% {

        -webkit-transform: translateX(-1px) rotate(0);

        transform: translateX(-1px) rotate(0);

    }

}



.buzz-out-on-hover {

    display: grid;

    vertical-align: middle;

    /* -webkit-transform: perspective(1px) translateZ(0);

    transform: perspective(1px) translateZ(0); */

    /* box-shadow: 0 0 1px rgba(0, 0, 0, 0); */

}



.buzz-out-on-hover:hover,

.buzz-out-on-hover:focus,

.buzz-out-on-hover:active {

    -webkit-animation-name: buzz-out-on-hover;

    animation-name: buzz-out-on-hover;

    -webkit-animation-duration: 0.75s;

    animation-duration: 0.75s;

    -webkit-animation-timing-function: linear;

    animation-timing-function: linear;

    -webkit-animation-iteration-count: 1;

    animation-iteration-count: 1;

}



.bookends-dots {

    position: relative;

    width: 50%;

    border-bottom: 2px solid transparent;

    border-image: linear-gradient(0.25turn, rgb(53 132 165), rgb(91 198 208), rgba(56, 2, 155, 0));

    border-image-slice: 1;

    background-color: transparent;

    opacity: 1;

}



.bookends-dots::before,

.bookends-dots::after {

    position: absolute;

    bottom: -5px;

    width: 10px;

    height: 10px;

    display: block;

    border-width: 0 1px 1px 0;

    border-color: rgba(128, 128, 128, 0.75);

    border-style: solid;

    box-sizing: border-box;

    border-radius: 100%;

}



.bookends-dots::before {

    transform: translateZ(0) rotate(-45deg);

    left: -10px;

}



.bookends-dots::after {

    transform: translateZ(0) rotate(135deg);

    right: -10px;

}



.candy {

    position: relative;

    margin: 10px;

    padding: 11px 32px;

    font-family: 'Exo', sans-serif;

    box-sizing: border-box;

    min-width: 100%;

    font-weight: 300;

    font-size: 19px;

    color: #fff;

    z-index: 1;

    cursor: pointer;

    outline: none;

    overflow: hidden;

    border-style: solid;

    border-color: #FE4495;

    border-width: 3px 3px 4px;

    /* text-shadow: 3px 2px 0 rgba(0, 0, 0, 0.3); */

    border-radius: 40px;

    -webkit-border-radius: 40px;

    -moz-border-radius: 40px;

    background: #FE4495;

    background: -webkit-linear-gradient(top, #FE4495, #d5095f);

    background: -o-linear-gradient(top, #FE4495, #d5095f);

    background: -moz-linear-gradient(top, #FE4495, #d5095f);

    background: linear-gradient(top, #FE4495, #d5095f);

    -moz-box-shadow: 0 6px 3px -3px rgba(0, 0, 0, 0.75);

    -webkit-box-shadow: 0 6px 3px -3px rgba(0, 0, 0, 0.75);

    box-shadow: 0 6px 3px -3px rgba(0, 0, 0, 0.75);

    /* -webkit-transition: all 0.25s cubic-bezier(1, -0.4, 0, 1.4);

    transition: all 0.25s cubic-bezier(1, -0.4, 0, 1.4);

    -webkit-animation: bounce 4s ease-out 0s infinite normal both;

    -moz-animation: bounce 4s ease-out 0s infinite normal both;

    -o-animation: bounce 4s ease-out 0s infinite normal both;

    animation: bounce 4s ease-out 0s infinite normal both; */

}



a {

    text-decoration: none !important;

}



@-webkit-keyframes bounce {



    2%,

    6% {

        -webkit-transform: rotate(-5deg);

        -ms-transform: rotate(-5deg);

        transform: rotate(-5deg);

    }



    4%,

    8% {

        -webkit-transform: rotate(5deg);

        -ms-transform: rotate(5deg);

        transform: rotate(5deg);

    }



    0%,

    10% {

        -webkit-transform: inherit;

        -ms-transform: inherit;

        transform: inherit;

    }

}



@-moz-keyframes bounce {



    2%,

    6% {

        -webkit-transform: rotate(-5deg);

        -ms-transform: rotate(-5deg);

        transform: rotate(-5deg);

    }



    4%,

    8% {

        -webkit-transform: rotate(5deg);

        -ms-transform: rotate(5deg);

        transform: rotate(5deg);

    }



    0%,

    10% {

        -webkit-transform: inherit;

        -ms-transform: inherit;

        transform: inherit;

    }

}



@-o-keyframes bounce {



    2%,

    6% {

        -webkit-transform: rotate(-5deg);

        -ms-transform: rotate(-5deg);

        transform: rotate(-5deg);

    }



    4%,

    8% {

        -webkit-transform: rotate(5deg);

        -ms-transform: rotate(5deg);

        transform: rotate(5deg);

    }



    0%,

    10% {

        -webkit-transform: inherit;

        -ms-transform: inherit;

        transform: inherit;

    }

}



@keyframes bounce {



    2%,

    6% {

        -webkit-transform: rotate(-5deg);

        -ms-transform: rotate(-5deg);

        transform: rotate(-5deg);

    }



    4%,

    8% {

        -webkit-transform: rotate(5deg);

        -ms-transform: rotate(5deg);

        transform: rotate(5deg);

    }



    0%,

    10% {

        -webkit-transform: inherit;

        -ms-transform: inherit;

        transform: inherit;

    }

}



@-webkit-keyframes bounceMin {



    2%,

    6% {

        -webkit-transform: rotate(-5deg);

        -ms-transform: rotate(-5deg);

        transform: rotate(-5deg);

    }



    4%,

    8% {

        -webkit-transform: rotate(5deg);

        -ms-transform: rotate(5deg);

        transform: rotate(5deg);

    }



    0%,

    10% {

        -webkit-transform: inherit;

        -ms-transform: inherit;

        transform: inherit;

    }





}



@-moz-keyframes bounceMin {



    2%,

    6% {

        -webkit-transform: rotate(-5deg);

        -ms-transform: rotate(-5deg);

        transform: rotate(-5deg);

    }



    4%,

    8% {

        -webkit-transform: rotate(5deg);

        -ms-transform: rotate(5deg);

        transform: rotate(5deg);

    }





    0%,

    10% {

        -webkit-transform: inherit;

        -ms-transform: inherit;

        transform: inherit;

    }

}



@-o-keyframes bounceMin {



    2%,

    6% {

        -webkit-transform: rotate(-5deg);

        -ms-transform: rotate(-5deg);

        transform: rotate(-5deg);

    }



    4%,

    10% {

        -webkit-transform: rotate(5deg);

        -ms-transform: rotate(5deg);

        transform: rotate(5deg);

    }





    0%,

    10% {

        -webkit-transform: inherit;

        -ms-transform: inherit;

        transform: inherit;

    }

}



@keyframes bounceMin {



    2%,

    6% {

        -webkit-transform: rotate(-5deg);

        -ms-transform: rotate(-5deg);

        /* transform: rotate(-5deg) ; */

    }



    4%,

    8% {

        -webkit-transform: rotate(5deg);

        -ms-transform: rotate(5deg);

        transform: rotate(5deg);

    }



    0%,

    10% {

        -webkit-transform: inherit;

        -ms-transform: inherit;

        transform: inherit;

    }

}



.candy.blue {

    border-color: #2da8e0;

    background: #2da8e0;

    background: -webkit-linear-gradient(top, #2da8e0, #0172FD);

    background: -o-linear-gradient(top, #2da8e0, #0172FD);

    background: -moz-linear-gradient(top, #2da8e0, #0172FD);

    background: linear-gradient(top, #2da8e0, #0172FD);

}



.candy.red {

    border-color: #e31e24;

    background: #e31e24;

    background: -webkit-linear-gradient(top, #e31e24, #a70006);

    background: -o-linear-gradient(top, #e31e24, #a70006);

    background: -moz-linear-gradient(top, #e31e24, #a70006);

    background: linear-gradient(top, #e31e24, #a70006);

}



.candy:hover,

.candy:focus {

    /* -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1); */

    filter: brightness(66%);

    -webkit-filter: brightness(66%);

    -moz-filter: brightness(66%);

    -o-filter: brightness(66%);

    -ms-filter: brightness(66%);

    -webkit-animation: bounceMin 10s ease-out 0s infinite normal both;

    -moz-animation: bounceMin 10s ease-out 0s infinite normal both;

    -o-animation: bounceMin 10s ease-out 0s infinite normal both;

    animation: bounceMin 10s ease-out 0s infinite normal both;

}



.candy:before,

.candy:after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

}



.candy:before {

    height: 60%;

    width: 100%;

    border-radius: 0 0 25% 25%;

    -webkit-border-radius: 0 0 25% 25%;

    -moz-border-radius: 0 0 25% 25%;

    background: rgba(255, 255, 255, 0.6);

    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2) 20%);

    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2) 20%);

    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2) 20%);

    background: linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2) 20%);

}



.candy:after {

    width: 9px;

    height: 18px;

    margin: 4px 0 0 16px;

    background: rgba(255, 255, 255, 0.2);

    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8));

    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8));

    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8));

    background: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8));

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -webkit-transform: rotate(50deg);

    -ms-transform: rotate(50deg);

    transform: rotate(50deg);

}



.steps .custom_btn {

    background: #ddd;

    width: 100%;

    padding: 10px 0px;

}



.steps .custom_btn.green {

    background: #ECFAE6;

}



.steps .custom_btn.purple {

    background: #EEEDFC;

}



.steps .custom_btn.orange {

    background: #FEF5E5;

}



.steps .custom_btn.blue {

    background: #E5F6FE;

}



.steps .custom_btn.red {

    background: #FEE9E5;

}



.ml-auto {

    margin-left: auto;

}



.mr-auto {

    margin-right: auto;

}





.steps {

    position: inherit;

}



.steps .cal-btn {

    padding: 15px 0px !important;

}



.text-heading {

    color: #e31e24;

    margin-bottom: 0;



}



@media (orientation:portrait) {

    .steps fieldset {

        max-width: 100% !important;

        width: 100% !important;

    }



    .text {



        font-size: 20px !important;



    }



    .logo {

        width: 35px;

    }

    .logo1 {

        width: 90px;

    }


    .h5 {

        font-size: 10px !important;

    }







    .reff {

        position: absolute !important;

        /* bottom: 4% !important; */

        /* right: -40% !important; */

    }



    /* 

    .result1 {

        position: absolute;

        font-size: 10px !important;

        left: 9% !important;

        color: #000 !important;

    }



    .guuu {

        position: absolute;

        font-size: 8px !important;

        left: 9% !important;

        color: #000 !important;

    }



    .guuu1 {

        position: absolute;

        font-size: 11px !important;

        left: 39% !important;

        color: #000 !important;

    }



    .score {

        position: absolute;

        left: 38% !important;

        color: #fff !important;

    } */

}



.text {

    margin-top: 17%;

    font-size: 35px;

    margin-left: 20px;

}



.btn-primary {

    color: #fff;

    background-color: #0d6efd00 !important;

    border-color: #0d6efd00 !important;

    padding: 0 !important;

}



.closebtn {

    position: absolute;

    top: 8%;

    right: 8%;

    opacity: 0 !important;

}



.h5 {

    font-size: 15px !important;

}



.borderr {

    border: 0 !important;



}



/* .score {

    position: absolute;

    bottom: 11%;

    left: 42%;

    color: #fff !important;

}



.result1 {

    position: absolute;

    bottom: 7%;

    left: 25%;

    color: #000 !important;

}



.guuu {

    position: absolute;

    bottom: 6%;

    font-size: 10px !important;

    left: 21%;

    color: #000 !important;

}



.guuu1 {

    position: absolute;

    bottom: 4%;

    font-size: 14px !important;

    left: 41%;

    color: #000 !important;

}



.valid {

    position: absolute;

    bottom: 5%;

    left: 28%;



}



.reff {

    position: absolute;

    bottom: 0px;

    right: -40%;

} */



:root {

    --main-color: #00893a;

}



.serviceBox {

    color: var(--main-color);

    /* background-color: #fff; */

    font-family: 'Raleway', sans-serif;

    text-align: center;

    padding: 0 25px 30px;

    position: relative;

    z-index: 1;

}



.span-txt {

    font-size: 11px !important;

    font-weight: 700 !important;

}



.calc_unit-button-mute__dQEge {

    flex: 0 0 auto;

    height: 44px;

    padding: 0 6px;

    border-radius: 4px;

    line-height: 47px;

    display: inline-block;

    min-width: 33%;

    vertical-align: middle;

    text-align: center;

    background-color: #f0f0f0;

    border: 1px solid #d7d7d7;

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

    font-size: 13px;

    font-weight: 400;

    box-shadow: none;

}



.serviceBox:before,

.serviceBox:after {

    content: "";

    /* width: 100%; */

    left: 4px;

    right: 4px;

    background: linear-gradient(to right, #d4d4d491 0, #ffffff 33%, #ffffff 33%, #ffffff 66%, #ffffff 66%, #b8b7b780 100%);

    border-radius: 50px 50px;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

    position: absolute;

    top: 10px;

    bottom: 30px;

    /* left: 10px;

    right: 10px; */

    z-index: -1;

}



.validate1 {

    font-size: 13px;

    color: #000;

    text-align: left;

    font-weight: 600;

}



/* 

.serviceBox:after {

    background-color: var(--main-color);

    height: 50%;

    top: auto;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: -2;

} */

.result1 {

    color: #000;

    letter-spacing: normal;

    font-weight: 600;

    font-size: 16px;

    line-height: 16px;

}







.serviceBox .service-icon {

    color: #fff;

    background: var(--main-color);

    font-size: 17px;

    width: 52%;

    height: 33px;

    margin: 0 auto 7px;

    border-radius: 0 0 50px 50px;

    position: relative;

    font-weight: 700;

}



.guuu {

    color: #000;

    line-height: 16px;

    font-size: 13px;

    letter-spacing: normal;

}



.serviceBox .service-icon:before,

.serviceBox .service-icon:after {

    content: "";

    background: linear-gradient(to top left, var(--main-color) 49%, transparent 50%);

    width: 10px;

    height: 10px;

    position: absolute;

    top: 0;

    left: -10px;

}



.serviceBox .service-icon:after {

    background: linear-gradient(to top right, var(--main-color) 49%, transparent 50%);

    left: auto;

    right: -10px;

}



.serviceBox .title {

    font-size: 18px;

    font-weight: 600;

    text-transform: uppercase;

    margin: 0 0 10px;

}



.serviceBox .description {

    color: #555;

    font-size: 14px;

    letter-spacing: 0.5px;

    line-height: 25px;

}



.serviceBox.yellow {

    --main-color: #FFB90D;

}



.serviceBox.green {

    --main-color: #60B361;

}



.serviceBox.blue {

    --main-color: #016FCE;

}



@media only screen and (max-width: 1199px) {

    .serviceBox {

        margin: 0 0 40px;

    }

}



/* 

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {

    .reff {

        bottom: -7% !important;

    }

} */

.btn-success {
    color: #fff;
    background-color: #2c61a9 !important;
    border-color: #2c61a9 !important;
}

.btn-outline-success {
    color: #2c61a9 !important;
    border-color: #2c61a9 !important;
}

.form-label {

    color: #103a73 !important;

}

.form-input-block {
    background: #f5f9ff;
    border: 1px solid #ccdff7;
    border-radius: 8px;
    padding: 4px 10px;
    color: #103a73 !important;
}

.form-control:disabled,
.form-control[readonly] {
    opacity: 111;
    background: linear-gradient(90deg, rgb(42 96 169) 0%, rgb(26 57 99) 100%);
    color: white;
}

.steps input:focus,
.steps textarea:focus {
    box-shadow: none;
    border: 1px solid #b1c2d9 !important;
    border-left: 4px solid #0b52b3 !important;
}

.gradiant-blue-box {
    background: linear-gradient(90deg, rgb(42 96 169) 0%, rgb(26 57 99) 100%);
}

.gradiant-blue-box div {
    color: white !important
}

#cost_enrolled {
    font-size: 15px;
    color: #0c7929;
    background: #dcede6;
    padding: 2px 5px;
    border-radius: 32px;
    font-weight: 900;
    border: 1px solid #bfe1bf;
}

#cost_not_enrolled {

    font-size: 15px;
    color: #990b0b;
    background: #ffeeee;
    padding: 2px 5px;
    border-radius: 32px;
    font-weight: 900;
    border: 1px solid #f1d6d6;
}