/* Main Colours Begins */
:root {
    --site-theme:#2f5599;
    --grey: #a9a9a9;
    --box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --switches-bg-color: goldenrod;
    --switches-label-color: white ;
    --switch-bg-color: white;
    --switch-text-color: goldenrod ;
    }
    /* Main Colours Ends*/
    /* Scroll bar begins*/
    ::-webkit-scrollbar {
    width: 5px;
    height: 20px;
    background-color: #f6f8ff; /* or add it to the track */
    }
    /* Add a thumb */
    ::-webkit-scrollbar-thumb {
    background: var(--orange);
    }
    /* Scroll bar ends*/
    /* Page Styles Begin */
    html {
    scroll-behavior: smooth;
    }
    body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    overflow-x: hidden;
    }
    section{
    width: 100%;
    float: left;
    }
    /* header */
    header figure.top_header_logo img{
    width: 100%;
    height: 100%;
    }
    /* header */
    .header-1 {
    position: relative;
    overflow: hidden;

    }
    .header-1 header{
    z-index: 1000;
    position: relative;
    }

    .header-1 svg{
    position: absolute;
    top: 0;
    left: 0;
    fill: #25549C;
    width: 100%;
    z-index: -1;
    height: 100%;
    }
    section {
    width: 100%;
    float: left;
    }
    .section-rotate {
    width: 100%;
    float: left;
    /* min-height: 880px; */
    }


    .bg-gradient-primary {
    /* background: linear-gradient(50deg, #25549C 0, #79427b 100%) !important; */
    }

    .banner_content{
    /* position: absolute; */
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 83vh;
    right: 0;
    margin: auto;
    width: 84%;
    }
    .banner_content .content_wrapper h1{
    font-size: 60px;
    font-family: 'Exo 2';
    color: #25549C;
    }
    .banner_content .content_wrapper p{
    font-size: 14px;
    color: #25549C;
    }

    .form_wrapper{
    background: #fff;
    padding: 25px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    .form_wrapper h4{
    font-family: 'Exo 2';
    font-weight: bold;
    border-left: 5px solid #25549C;
    padding-left: 15px;
    margin: 0;
    margin-bottom: 25px;
    }
    .form_wrapper button{
    width: 100%;
    padding: 10px;
    background: #25549C;
    border: none;
    box-shadow: var(--box-shadow);
    border-radius: 0px;
    }


    .form_wrapper [type="radio"]:checked,
    .form_wrapper [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
    }
    .form_wrapper [type="radio"]:checked + label,
    .form_wrapper [type="radio"]:not(:checked) + label
    {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
    }
    .form_wrapper [type="radio"]:checked + label:before,
    .form_wrapper [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
    }
    .form_wrapper [type="radio"]:checked + label:after,
    .form_wrapper [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 8px;
    height: 8px;
    background: #25549C;
    position: absolute;
    top: 5px;
    left: 4.7px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    }
    .form_wrapper [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    }
    .form_wrapper [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    }
    .mr-5{
    margin-right: 15px;
    }

    .form_wrapper input{
    border-radius: 0;
    height: 45px;
    transition: 0.5s;
    }

    .form_wrapper input:focus{
    outline: none;
    box-shadow: none;
    border: 1px solid #25549C;
    transition: 0.5s;
    }

    .grouping_wrap_inside .image_wrapper img{
    width: 100px;
    height: 100px;
    opacity: 0.7;
    }
    a{
    text-decoration: none;
    }
    .grouping_wrap_inside .grouping_content_wrapper h4{
    font-size: 16px;
    text-transform: capitalize;
    text-align: right;
    font-weight: bold;
    color: initial;
    margin: 0;
    color: #25549C;
    /* font-family: 'Inter'; */
    }

    .grouping_wrap_inside{
    position: relative;
    }
    .grouping_content_wrapper p{
    position: absolute;
    bottom: 0;
    right: 30px;
    font-weight: bold;
    font-family: 'Exo 2';
    font-size: 14px;
    color: #a9a9a9;
    font-size: 12px;
    text-transform: capitalize;
    }

    .grouping_wrap_inside{
    background: #fff;
    border-radius: 10px;
    min-height: 150px;
    display: flex;
    border: 2px solid #e8e8e8;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    box-shadow: var(--box-shadow)
    }
    .once_all_finished{
    border: 2px solid #009688;
    }
    .not_yet_started{
    border: 2px solid #f00;
    }
    .half_done{
    border: 2px solid #ffc107;
    }
    .grouping_wrap_inside.once_all_finished .grouping_content_wrapper h4{
    color: #009688 !important;
    }
    .grouping_wrap_inside.not_yet_started .grouping_content_wrapper h4{
    color: #f00 !important;
    }
    .grouping_wrap_inside.half_done .grouping_content_wrapper h4{
    color: #ffc107 !important;
    }
    .grouping_wrapper{
    /* margin-top: -190px; */
    position: relative;
    z-index: 100;
    }
    .grouping_wrapper span.overlay_div{
    /* position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    cursor: not-allowed; */
    }
    .site_footer{
    margin-top: 100px;
    width: 100%;
    float: left;
    text-align: center;
    position: relative;
    z-index: 100;
    }
    .site_footer p{
    text-transform: capitalize;
    color: #000;
    font-weight: bold;
    }
    .site_footer p a{
    /* text-transform: lowercase; */
    text-decoration: none;
    color: #25549C;
    font-weight: bold;
    }

    .total_completed_progress{
    width: 100%;
    float: left;
    margin-bottom: 45px;
    position: relative;
    z-index: 1;
    /* margin-top: -100%; */
    }

    .total_completed_progress h3{
    font-size: 20px;
    padding-bottom: 10px;
    font-family: 'Exo 2';
    font-weight: bold;
    text-transform: capitalize;
    }
    .total_completed_progress .progress {
    height: 16px;
    }
    .total_completed_progress .progress-bar{
    /* background: #5c2b58; */

    }
    .progress-bar {
    background-color: #25549C;
    transition: width .6s ease;
    }

    .top_header_logo {
    display: flex;
    }

    .bsn_lgo {
    max-width: 60%;
    height: 60% !important;
    margin-top: 25px;
    box-shadow: var(--box-shadow);
    }


    /* toggle switch */
    .switches-container {
    width: 8rem;
    position: relative;
    display: flex;
    padding: 0;
    position: relative;
    background: #25549C;
    line-height: 2rem;
    border-radius: 3rem;
    margin-left: auto;
    /* margin-right: auto; */
    }

    /* input (radio) for toggling. hidden - use labels for clicking on */
    .switches-container input {
    visibility: hidden;
    position: absolute;
    top: 0;
    }

    /* labels for the input (radio) boxes - something to click on */
    .switches-container label {
    width: 50%;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    color: #fff;
    }

    /* switch highlighters wrapper (sliding left / right)
    - need wrapper to enable the even margins around the highlight box
    */
    .switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 0.15rem;
    z-index: 3;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
    /* transition: transform 1s; */
    }

    /* switch box highlighter */
    .switch {
    border-radius: 3rem;
    background: var(--switch-bg-color);
    height: 100%;
    }

    /* switch box labels
    - default setup
    - toggle afterwards based on radio:checked status
    */
    .switch div {
    width: 100%;
    text-align: center;
    opacity: 0;
    display: block;
    color: #25549C;
    transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    }

    /* slide the switch box from right to left */
    .switches-container input:nth-of-type(1):checked~.switch-wrapper {
    transform: translateX(0%);
    }

    /* slide the switch box from left to right */
    .switches-container input:nth-of-type(2):checked~.switch-wrapper {
    transform: translateX(100%);
    }

    /* toggle the switch box labels - first checkbox:checked - show first switch div */
    .switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
    opacity: 1;
    }

    /* toggle the switch box labels - second checkbox:checked - show second switch div */
    .switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
    opacity: 1;
    }
    /* toggle switch */

    .banner_text_wrapper{
    padding: 0;
    list-style: none;
    margin: 0;
    }
    .banner_text_wrapper li{
    margin-bottom: 20px;
    /* font-family: 'Exo 2'; */
    font-weight: bold;
    font-size: 16px;
    line-height: 25px;
    color: #2c2b2b;
    display: flex;
    }
    .banner_text_wrapper li i{
    padding-right: 10px;
    position: relative;
    top: 5px;
    display: block;
    }



    canvas {
    display: block;
    vertical-align: bottom;
    }
    #particles-js {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    }

    .support_banner_img{
    position: absolute;
    left: 14%;
    width: 500px;
    height: 500px;
    opacity: 0.1;
    z-index: -1;
    -webkit-animation: 1.5s infinite beatHeart;
    animation: 1.5s infinite beatHeart;
    }
    .support_banner_img img{
    width: 100%;
    height: 100%;
    }


    @-webkit-keyframes beatHeart {
    0% {
    transform: scale(1);
    }
    25% {
    transform: scale(1.1);
    }
    40% {
    transform: scale(1);
    }
    60% {
    transform: scale(1.1);
    }
    100% {
    transform: scale(1);
    }
    }

    @keyframes beatHeart {
    0% {
    transform: scale(1);
    }
    25% {
    transform: scale(1.1);
    }
    40% {
    transform: scale(1);
    }
    60% {
    transform: scale(1.1);
    }
    100% {
    transform: scale(1);
    }
    }



    .banner_content_wrapper{
    min-height: 100vh;
    margin-bottom: 20px;
    }
    .info_form input.form-control{
    border-radius: 0;
    z-index: 10;
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    position: relative;
    color: #000;
    font-weight: bold;
    }
    .info_form input.form-control:focus{
    box-shadow: none;
    outline: none;
    }
    .info_form label{
    z-index: 10;
    position: relative;
    text-transform: capitalize;
    color: #000;
    }
    .vital_info{
    background: #25549C;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    min-height: 350px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    font-family: 'Exo 2';
    }
    .vital_info figure img.imgdounut{
    position: absolute;
    top: 20%;
    left: 0;
    width: 250px;
    height: 250px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.1;
    }
    .vital_info figure img.imgtripod{
    position: absolute;
    top: 0%;
    right: 0;
    width: 125px;
    height: 125px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.1;
    }
    .info_form h4{
    text-align: left;
    color: #006eb6;
    z-index: 1;
    position: relative;
    font-weight: bold;
    font-size: 26px;
    letter-spacing: 1px;
    text-transform: capitalize;
    }
    .vital_info::after{
    position: absolute;
    content: '';
    top: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background: #fd871f;
    }
    .vital_info::before{
    position: absolute;
    content: '';
    bottom: -90px;
    right: -30px;
    width: 150px;
    height: 150px;
    background: #fd871f;
    opacity: 0.4;
    border-radius: 100px;
    }
    .info_form button{
    width: 100px;
    padding: 6px 10px;
    font-family: 'Exo 2';
    margin: auto;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    color: #000;
    border: none;
    text-transform: capitalize;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    float: right;
    z-index: 1;
    position: relative;
    transition: 0.5s all linear;
    }
    .info_form button:focus{
    background: #fff;
    box-shadow: none;
    outline: none;
    }
    .info_form button:hover{
    background: #fff;
    color: #000;
    transition: 0.5s all linear;
    }
    .vibrant_living{
    background: #576070;
    }
    .vibrant_living::after{
    background: #fd871f;
    }
    .vibrant_living::before{
    background: #fd871f;
    }
    .content_shadow{
    background-color: #fff;
    }
    .content_shadow h4{
    color: #000;
    }
    .content_shadow::after,.content_shadow::before{
    background-color: #e8e8e8;
    opacity: 0.5;
    }
    .content_shadow a{
    background-color: #000;
    padding: 6px 10px;
    font-family: 'Exo 2';
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    display: block;
    width: 150px;
    color: #fff;
    border: none;
    float: right;
    text-transform: capitalize;
    font-weight: bold;
    z-index: 10;
    position: relative;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .right_img{
    position: absolute;
    right:0;
    top: 0;
    width: 125px;
    padding: 15px;
    height: 125px;
    opacity: 0.2;
    }
    .hra_consent{
    background-color: #050f3c;
    }
    .hra_consent  h4{
    color: #fff;
    }
    .hra_consent  .banner_text_wrapper li{
    color: #ddd;
    }
    .hra_consent::before{
    top: -50px;
    width: 175px;
    height: 175px;
    bottom: auto;
    }
    .hra_consent a{
    background-color: #fff;
    color: #000;
    }
    .dass_21{
    background-color: #006eb6;
    }
    /* .dass_21  h4{
    color: #000;
    }
    .dass_21  .banner_text_wrapper li{
    color: #333;
    } */

    #hra_modal  .btn-close,#consent_modal .btn-close{
    background-image: none;
    }
    #hra_modal .btn-close:focus,#consent_modal .btn-close:focus{
    box-shadow: none;
    border: none;
    outline: none;
    }
    .info_modal_img{
    width: 100%;
    }
    #hra_modal .modal_content_wrapper p,#consent_modal .modal_content_wrapper p{
    padding-bottom: 25px;
    font-weight: bold;
    }
    #hra_modal .modal_content_wrapper ul,#consent_modal .modal_content_wrapper ul{
    padding: 0;
    margin: 0;
    list-style: none;
    }
    #hra_modal .modal_content_wrapper ul li,#consent_modal .modal_content_wrapper ul li{
    margin-bottom: 10px;
    }
    #hra_modal .modal-content,#consent_modal .modal-content{
    background-color: #dae7ea;
    border: 5px solid #205bba;
    border-radius: 10px;
    }
    #hra_modal .modal-header,#consent_modal .modal-header{
    background-color: #205bba;
    color: #fff
    }
    #hra_modal .modal-header h5,#consent_modal .modal-header h5{
    font-size: 20px;
    text-transform: uppercase;
    }
    #hra_modal .btn-close,#consent_modal .btn-close{
    opacity: 1;
    }
    #hra_modal .btn-close i,#consent_modal .btn-close i{
    font-size: 20px;
    color: #fc2b2b;
    opacity: 1;
    border: 5px solid #333;
    border-radius: 100px;
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: red;
    width: 30px;
    }
    #hra_modal .close_btn,#consent_modal .close_btn{
    border: 5px solid #adc1c4;
    text-transform: uppercase;
    font-size: 18px;
    color: #6e798d;
    background-color: transparent;
    padding: 5px 25px;
    font-weight: bold;
    }
    #hra_modal .modal-header,#consent_modal .modal-header{
    border-bottom: 5px solid #adc1c4;
    }
    #hra_modal .modal-body,#consent_modal .modal-body{
    border: 5px solid #fff;
    border-top: transparent;
    border-radius: 12px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    }

    #info_modal{

    }
    #info_modal .side_blue_bg,#factors_modal .side_blue_bg,#risk_modal .side_blue_bg,#view_answers_modal .side_blue_bg{
    background-color: #1250a1;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    }
    #view_answers_modal .side_blue_bg{
    min-height: 100% !important;
    }
    #info_modal .modal-content,#factors_modal .modal-content,#risk_modal .modal-content ,#view_answers_modal .modal-content {
    /* padding: 0; */
    border-radius: 0 !important;
    }

    .info_modal_content p.tit_p{
    display: flex;
    align-items: center;
    font-size:19px;
    font-weight: bold;
    padding-top: 20px;
    text-transform: uppercase;
    justify-content: space-between;
    color: #000;
    }

    #info_modal  .btn-close,#factors_modal  .btn-close,#risk_modal .btn-close,#view_answers_modal .btn-close{
    background-image: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #006eb6;
    color: #fff;
    width: auto;
    display: flex;
    align-items: center;
    opacity: 1;
    font-size: 18px;
    padding: 8px 20px;
    border-radius: 0;
    }
    #info_modal .btn-close:focus,#factors_modal .btn-close:focus,#risk_modal .btn-close:focus,#view_answers_modal .btn-close:focus{
    box-shadow: none;
    border: none;
    outline: none;
    }
    .inside_para_wrapper{
    width: 100%;
    float: left;
    min-height: 265px;
    display: flex;
    align-items: baseline;
    padding: 20px;
    flex-direction: column;
    }
    .inside_para_wrapper p{
    /* font-weight: bold; */
    font-size: 16px;
    color: #000;
    }
    .inside_para_wrapper ul{
    padding: 0;
    margin: 0;
    list-style: none;
    }
    .inside_para_wrapper ul li{
        text-transform: capitalize;
        font-size: 18px;
        color: #0e0e0e;
    }
    .inside_para_wrapper ul li img{
    width: 20px;
    height: auto;
    margin-right: 15px;
    }
    .side_blue_bg figure{
    margin-bottom: 0;
    }

    .shapes_blue .shape_1{
    position: absolute;
    top: 15%;
    right: 0;
    width:40%
    }

    .shapes_blue .shape_4{
    position: absolute;
    top: 8%;
    left: 15%;
    width: 20px;
    }
    .shapes_blue .shape_2{
    position: absolute;
    bottom: 35%;
    left: 8%;
    width: 20px;
    }
    .shapes_blue .shape_3{
    position: absolute;
    bottom: 35%;
    right: 8%;
    width: 20px;
    }
    .shape_11{
    bottom: 15%;
    left: 0;
    top: initial !important;
    }
    .shape_22{
    bottom: initial !important;
    right: 28px;
    top: 85px !important;
    left: 35% !important;
    }
    .shape_33{
    bottom: 59% !important;
    left: 22px;
    top: initial !important;
    }
    .shape_44{
    bottom: 15%;
    left: 150px !important;
    top: initial !important;
    }
    /* Circle Section   */

    .circle {
    display: grid;
    grid-template-areas: "layer";
    place-items: center;
    /* background: #185adb; */
    border-radius: 50%;
    --radius: 25vmin;
    width: calc(2 * var(--radius));
    height: calc(2 * var(--radius));
    margin: auto;
    transform: rotate(77deg);
    }

    .stat {
    grid-area: layer;
    width: 40vmin;
    height: 20vmin;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: #185adb;
    font-weight: bold;
    font-size: 3vmin;
    --d: calc(var(--i) / var(--total));
    --r-offset: -0.25turn;
    --r-amount: 1.7turn;
    --r: calc((var(--r-amount) * var(--d)) + var(--r-offset));
    --transform: rotate(var(--r)) translate(var(--radius))
    rotate(calc(-1 * var(--r)));
    transform: var(--transform);
    transition: transform 1.5s ease-in-out;
    }


    .stat img{
    width: 40%;
    cursor: pointer;
    filter: drop-shadow(-1px -1px 3px rgba(50, 50, 0, 0.5));
    }

    .inside_para_wrapper h5{
    display: block;
    padding-bottom: 35px;
    font-size: 35px;
    font-weight: bold;
    text-transform: uppercase;
    color: #bf1d2d;
    }

    /* .score_wrapper img,.modal img{
    max-width: 40%;
    } */

    .circle_wrapper{
    position: relative;
    }

    .full_circle{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #fff;
    margin: auto;
    border-radius: 100px;;
    text-align: center;
    line-height: 200px;
    display: flex;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    align-items: center;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
    }
    .full_circle h4{
    font-family: 'Kanit';
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
    margin-top: 15px;
    }
    .full_circle h4 span{
    font-weight: normal;
    font-size: 25px;
    text-transform: capitalize;
    position: relative;
    top: 14px;
    display: block;
    }
    .high_red{
        color: #f00;
    }
    .low_green{
        color: #009688;
    }
    .medium_yellow{
        color: #ffeb3b;
    }
    .progress_wrapper img{
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    width: auto;
    height: 84px;
    margin: auto;
    z-index: 10;
    z-index: 10;
    transform: scale(1.7);
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .circle .stat:nth-of-type(1) img{
    transform:rotate(280deg) scale(1.2) translate(10px, -1px);
    }
    .circle .stat:nth-of-type(2) img{
    transform: scale(1.5) translate(-18px, 2px) rotate(285deg);
    }
    .circle .stat:nth-of-type(3) img{
    transform: rotate(289deg) scale(1.2) translate(-20px, -15px)
    }

    /* Circle Section   */


    .transform_wrapper{
    transform: scale(0.8);
    }



    /* hra_new_section_wrapper */
    .hra_new_section_wrapper{
    width: 100%;
    float: left;
    padding: 80px 0;
    position: relative;
    z-index: 10;
    }
    .hra_summary_wrap{
    text-align: center;
    position: relative;
    margin-bottom: 80px;
    }
    .top_title_ul{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
    }
    .top_title_ul li{
    cursor: pointer;
    }
    .top_title_ul li img{
    width: 30px;
    height: 30px;
    }
    .hra_summary_wrap h3{
    background-color: #fff;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 15px;
    position: relative;
    color: #f1671f;
    min-width: 350px;
    -webkit-box-shadow: 10px 10px 5px -5px rgba(0,110,182,1);
    -moz-box-shadow: 10px 10px 5px -5px rgba(0,110,182,1);
    box-shadow: 10px 10px 5px -5px rgba(0,110,182,1);
    border-bottom-right-radius: 10px;
    text-transform: uppercase;
    }
    .hra_summary_wrap h3 span.h3_span{
    display: block;
    font-size: 14px;
    color: #000;
    }
    .hra_summary_wrap span.top_count {
        position: absolute;
        background: #006eb6;
        width: 100px;
        height: 65px;
        z-index: 1;
        left: -18px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        top: -18px;
    }
    .span_value{
        display: block;
        margin-bottom: 5px;
        font-size: 24px;
    }
    .hra_summary_wrap span.top_count::before {
        position: absolute;
        content: '';
        clip-path: polygon(0 0, 56% 0, 54% 100%);
        bottom: -19px;
        width: 30px;
        height: 30%;
        left: 0;
        background: #099eff;
    }
    .hra_summary_wrap span.top_count::after {
        position: absolute;
        content: '';
        clip-path: polygon(0 0px, 14% 0, 0 100%);
        left: 100px;
        top: 0px;
        width: 100px;
        height: 100%;
        background: #006eb6;
        filter: drop-shadow(-1px -1px 3px rgba(50, 50, 0, 0.5));
        clip-path: polygon(0 100%, 25% 0, 0 0);
    }
    .hra_summary_wrap span.top_right {
        position: absolute;
        background: #006eb6;
        width: 100px;
        height: 65px;
        z-index: 1;
        right: -18px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 40px;
    }
    .hra_summary_wrap span.top_right::before {
        position: absolute;
        content: '';
        clip-path: polygon(50% 0, 0 98%, 0 0);
        bottom: 69px;
        width: 30px;
        height: 30%;
        right: -6px;
        background: #099eff;
        transform: rotate(268deg);
    }
    .hra_summary_wrap span.top_right::after {
        position: absolute;
        content: '';
        /* clip-path: polygon(23% 0, 23% 100%, 0 0); */
        right: 44px;
        top: 0;
        width: 85px;
        height: 100%;
        background: #006eb6;
        filter: drop-shadow(-1px -1px 3px rgba(50, 50, 0, 0.5));
        /* clip-path: polygon(0 0, 30% 100%, 41% 0); */
        clip-path: polygon(0 100%, 36% 100%, 34% 0);
    }
    .top_right button{
    background: transparent;
    border: none;
    font-weight: bold;
    text-transform: capitalize;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    }
    /* .hra_summary_wrap span.top_right::before{
    position: absolute;
    content: '';
    clip-path: polygon(50% 0, 0 98%, 0 0);
    bottom: -15px;
    width: 30px;
    height: 30%;
    right: -15px;
    background: #099eff;
    } */
    .hra_main{
    width: 100%;
    float: left;
    border-radius: 25px;
    border: 5px solid #006eb6;
    padding: 15px;
    z-index: 2000;
    position: relative;
    background: #fff;;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }
    .mb_25{
    width: 100%;
    float: left;
    }
    .hra_main::after{
    position: absolute;
    content: '';
    bottom: -35px;
    right: 26px;
    width: 68px;
    height: 35px;
    clip-path: polygon(80% 0, 20% 0, 50% 100%);
    background-color: #006eb6;
    }
    .hra_main::before{
    position: absolute;
    content: '';
    bottom: -23px;
    right: 42.6px;
    width: 35px;
    height: 23px;
    clip-path: polygon(80% 0, 20% 0, 50% 100%);
    background-color: #fff;
    z-index: 1;
    }
    .hra_main h5{
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    font-size: 18px;
    color: #000;
    padding: 20px 0;
    }
    .cir_img{
    position: relative;
    text-align: center;
    background-color: #34acba;
    display: inline-block;
    text-align: center;
    border-radius: 100px;
    margin-bottom: 20px !important;
    }
    .cir_img::after{
    position: absolute;
    content: '';
    top: 50%;
    left: 48%;
    transform: translate(-34%, -10%) rotate(145deg);
    height: 40px;
    width: 80px;
    border-radius: 150px 150px 0 0;
    background-color: #41bcd2;
    }
    .cir_img img{
    width: 80px;
    height: 80px;
    padding: 16px;
    position: relative;
    z-index: 1;
    }
    .hra_main h3{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    }
    .moderate_risk_color{
    color: #fab911;
    }
    .high_risk_color{
    color: #fb4429;
    }
    .low_risk_color{
    color: #2eaea1;
    }
    .hra_main .progress{
    height: 0.7rem;
    font-size: 10px;
    background-color: #000;
    border-radius: 100px;
    }
    .moderate_risk_progress .progress-bar{
    background-color: #f26d0d;
    }
    .high_risk_progress .progress-bar{
    background-color: #fb4429;
    }
    .low_risk_progress .progress-bar{
    background-color: #2eaea1;
    }
    .hra_btn_wrapper{
    width: 100%;
    float: left;
    }
    .hra_btn_wrapper ul{
    padding: 0;
    margin: 0;
    list-style: none;
    height: 80px;
    margin: 35px 0 45px 0;
    border-radius: 100px;
    display: flex;
    border: 1px solid #006eb6;
    align-items: center;
    background: #fff;;
    justify-content: space-evenly;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }
    .hra_btn_wrapper ul li{
    font-size: 14px;
    color: #006eb6;
    text-transform: uppercase;
    font-weight: bold;
    padding: 15px 25px;
    cursor: pointer;
    }
    .factors_text{
    opacity: 0.4;
    }
    .factors_continue{
    position: relative;
    }
    .factors_continue::after{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1px;
    height: 100%;
    background: #006eb6;
    }

    /* hra_new_section_wrapper */


    .country_wrapper h4{
    font-weight: bold;
    padding-bottom: 15px;
    text-transform: capitalize;
    font-size: 24px;
    color: #25549C;
    }

    .questionnaire_wrapper .qstn p{
    font-weight: bold;
    font-size: 16px;
    color: #0389be;
    }
    .questionnaire_wrapper .qstn p i{
    padding-right: 15px;
    }

    .questionnaire_wrapper .answ p{
    margin: 0;
    text-transform: capitalize;
    font-size: 13px;
    padding-left: 35px;
    }
    .numbers_count_wrapper ol li{
    margin-top: 15px
    }
    .numbers_count_wrapper ol li i{
    margin:  0 5px;
    color: #AF0606;
    }
    .quest_name{
    font-size: 16px;
    font-weight: bold;
    }

    .quest_answer{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 20px;
    /* padding: 10px 0; */
    flex-wrap: wrap;
    }

    .quest_answer li{
    color: #000;
    font-weight: bold;
    display: flex;
    gap: 15px;
    font-size: 14px !important;
    text-transform: capitalize;
    }
    .quest_answer li span{
    color: #8c8c8c;
    font-weight: normal;
    text-transform: capitalize;
    }
    .questionnaire_wrapper{
    width: 100%;
    float: left;
    margin-bottom: 30px;
    }

    .far.fa-check{
    padding-right: 5px;
    }


    .edit_bttn{
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 10px;
    border-radius: 0;
    background-color: #8993c5;
    padding: 5px 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border: none;
    }


    .vital_new_info{
    background: #fff;
    width: 100%;
    float: left;
    padding: 15px;
    border-radius: 100px;
    border: 2px solid #1fbfc4;
    min-height: 500px;
    display: grid;
    align-items: center;
    margin-bottom: 0;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    .info_form{
    padding-left: 30px;
    }
    .vital_new_info .info_form button{
    float: left;
    background-color: #4bc4f1;
    border: 2px solid #272727;
    text-transform: uppercase;
    color: #272727;
    }
    .vital_new_info .info_form input.form-control{
    border-bottom: 1px dashed #676cb0;
    }
    .float-right{
    float: right !important;
    }

    .padd_right{
    padding-left: 0 !important;
    padding-right: 30px;
    }
    .pr_45{
    padding-right: 65px;
    }
    .hra_cont img{
    width: 100px;
    height: 100px;
    }
    .flex_rght{
    display: flex;
    align-items: end;
    justify-content: center;
    flex-direction: column;
    padding: 65px;
    position: relative;
    }
    .flex_rght p{
    text-align: end;
    width: 80%;
    text-align: justify;
    padding-left: 65px;
    }
    .flex_left {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-direction: column;
    padding: 65px;
    }
    .flex_left p{
    text-align: justify;
    padding-right: 116px;
    }
    .flex_rght img{
    position: absolute;
    left: 0;
    bottom: 35px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    }
    .flex_left{
    position: relative;
    }
    .flex_left img{
    position: absolute;
    right: 55px;
    bottom: 13px;
    }
    .flex_left h4{
    text-transform: uppercase;
    color: #006eb6;
    padding-bottom: 30px;
    font-weight: bold;
    }
    .flex_rght h4{
    text-transform: uppercase;
    color: #006eb6;
    padding-bottom: 30px;
    font-weight: bold;
    }
    .pos_rel{
    position: relative;
    }

    .center_image{
    margin: 0;
    position: absolute;
    top: 0;
    left: 0px;
    right: 0;
    margin: auto;
    width: 425px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    }
    .pos_relativge{
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    }
    .overall_score{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100%;
    }
    .overall_score span{
    position: relative;
    top: 0;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    left: 10px;
    font-size: 20px;
    }

    .mob_pos {
    position: relative;
    width: 100%;
    float: left;
    }
    .mob_pos .overall_score{
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100%;
    }
    .max-width-300{
    /* max-width: 300px; */
    text-align: center;

    }
    .max-width-300 .modal-content{
    border-radius: 15px;

    }
    .max-width-300 ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .max-width-300 ul li{
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14px;
    text-transform: capitalize;
    }
    .max-width-300 ul li span{
    font-weight: normal;
    }
    .close_overall{
    border: none;
    background: transparent;
    width: 100%;
    border-top: 2px solid #ddd;
    color: #000 !important;
    font-weight: bold;
    transition: all linear 0.5s;
    }
    .close_overall:focus{
    outline: none;
    box-shadow: none;
    }
    .close_overall:hover{
    background-color: #006eb6;
    transition: all linear 0.5s;
    }
    .overall{
    padding: 25px 0 0 0;
    }
    .overall h5{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    }
    .overall span.count_no{
    font-weight: bold;
    font-size: 25px;
    color: #a76156;
    margin: 16px 0;
    display: block;
    }
    .z-inex .vital_new_info h4,.vital_new_info p{
    position: relative;
    z-index: 100;
    color: inherit;
    }
    .z-inex .vital_new_info h4{
    color: #006eb6;
    }
    .z-inex .vital_new_info p{
    color: #000;
    }


    .bd_title{
    font-weight: bold;
    text-transform: capitalize;
    color: #000;
    font-size: 12px;
    }
    .info_form label{
    font-size: 13px;
    }

    .access_btn{
    position: relative;
    z-index: 41;
    background-color: #4bc4f1;
    border: 2px solid #272727;
    text-transform: uppercase;
    color: #272727;
    padding: 6px 10px;
    font-family: 'Exo 2';
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius: 0.25rem;
    }

    .video_bg video{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    }
    .video_bg span{
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.1);
    z-index: 1;

    }
    .p_5{
    padding: 5px;
    }


    .grey_out{
    background-color: #576070;
    border: transparent;
    }
    .grey_out h4{
    color: #fff !important;
    }
    .grey_out p{
    color: #ddd !important;
    }
    .grey_out .access_btn{
    color: #000;
    background-color: #fff;
    border: transparent
    }

    .mt_space{
    position: relative;
    top: 75px;
    }
    .acc_mt_5{
    position: relative;
    top: 22px;
    }

    .container_wrapper{
    width:250px;
    height:250px;
    margin:20px auto 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .react-logo{
    display: inline-block;
    border-radius:50%;
    border:10px solid #0070b8;

    animation-name:rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    }

    .react-logo , .react-logo:before , .react-logo:after{
    position:absolute;
    display: inline-block;
    width:165px;
    height:70px;
    border-radius:50%;
    border:10px solid #0070b8;
    }

    .nucleo , .react-logo , .react-logo:before , .react-logo:after {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .nucleo{
    width:40px;
    height:40px;
    border-radius:100%;
    background:#0070b8;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-weight: bold;
    bottom: 0;
    color: #fff;
    font-size: 18px;
    }

    .nucleo span{
    animation-name:rotate_minus !important;
    animation-duration: 5s !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    position: relative;
    }

    .react-logo:before , .react-logo:after{
    content:"";
    }

    .react-logo:after{
    transform:rotate(-57deg);
    }

    .react-logo:before{
    transform:rotate(57deg);
    }



    @keyframes rotate_minus{

    100%{
    transform:rotate(0deg);
    }
    }

    @keyframes rotate{

    100%{
    transform:rotate(360deg);
    }
    }


    .top_title_ul.logo{
        left: 0 !important;
        top: -35px !important;
    }
    .top_title_ul.logo li a img{
        width: 100%;
        height: 100px;
    }

    .white_bgg{
        background: #fff;
        padding: 15px;
        border-radius: 10px;
    }
    .white_bgg li:first-child{
       position: relative;
    }
    .white_bgg li:first-child::after{
        position: absolute;
        top: 0;
        right: -10px;
        content: '';
        width: 1px;
        height: 100%;
        background: #c6c6c6;
    }
    .hs_hra_main_2 {
        min-height: 245px;
       /* display: none; */
    }
    .hs_hra_main_2.active_block.changed::before{
        left: 42.6px;
    }
    .hs_hra_main_2.active_block.changed::after{
        left: 26px;
    }
    .hs_hra_main_2 ul{
        margin: 0;
    }
    .hs_hra_main_2 ul li{
        color: #000 !important;
        text-transform: capitalize;
        font-weight: bold !important;
    }
    .mha_span span{
        display: block;
        text-align: right;
    }




.inside_dass_image ul{
    padding: 30px 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    gap: 20px;
    flex-wrap: wrap;
}
.inside_dass_image ul li{
width: 25%;
}
.inside_dass_image ul li img{
    width: 100%;
height: 100%;
}
.dass_position{
    position: relative;
}
.main_count{
    position: absolute;
    top: 42px;
    left: 42px;
    font-size: 25px;
    color: #fff;
}

.main_text{
    position: absolute;
    top: 48px;
    right: -8px;
    font-size: 12px;
    color: #000;
    font-weight: bold !important;
    text-transform: capitalize;
    width: 100px;
    text-align: center;
}
.main_text p{
   margin: 0;
}


.view_summary{
    width: 100%;
}

.view_summary ul{
    margin: 0;
    list-style: none;
    border: 1px solid #ddd;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.view_summary ul li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}
.view_summary ul li span a{
    background-color: #4bc4f1;
    color: #000;
    font-weight: 600;
    padding: 5px;
    text-transform: capitalize;
    z-index: 100;
    position: relative;
    font-size: 10px;
    border-radius: .25rem;
    border: 2px solid #272727;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.view_summary button.back_hra_wrapper{
    background-color: #4bc4f1;
    width: 100px;
    padding: 6px 10px;
    font-family: 'Exo 2';
    margin: auto;
    text-align: center;
    font-size: 14px;
    color: #000;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    z-index: 1;
    position: relative;
    border-radius: .25rem;
    transition: 0.5s all linear;
    border: 2px solid #272727;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.view_summary {
    width: 85%;
}


.normal_d{
    background: green !important;
    color: #fff;
}
.mild_d{
    background: #009688 !important;
    color: #fff;
}
.moderate_d{
    background: #ffeb3b !important;
    color: #000;
}
.severe_d{
    background: #ff5722 !important;
    color: #fff;
}
.ex_severe_d{
    background: red !important;
    color: #fff;
}

.scroll_btn{
padding: 0;
margin: 0;
list-style: none;
height: 200px;
overflow-y: scroll;
padding-right: 10px;
}
.scroll_btn::-webkit-scrollbar {
width: 5px;
background-color: #ddd; /* or add it to the track */
}
/* Add a thumb */
.scroll_btn::-webkit-scrollbar-thumb {
background: #333;
}
.scroll_btn li{
    text-transform: capitalize;
}
.scroll_btn li button{
z-index: 41;
background-color: #4bc4f1;
border: 2px solid #272727;
text-transform: uppercase;
color: #272727;
padding: 6px 10px;
font-family: 'Exo 2';
font-weight: bold;
letter-spacing: 1px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 0.25rem;
width: 100%;
font-size: 12px;
margin-bottom: 8px;
}
.bottom_diagnosis{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: end;
}
.bottom_diagnosis li{
    border: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 12px;
    text-transform: capitalize;
    font-weight: bold;
    z-index: 45;
    position: relative;
    cursor: pointer;
}
.bmi_span_value{
    font-weight: bold;
    font-size: 14px;
    position: relative;
    top: 60px;
    text-align: center;
    display: block;
    font-size: 21px;
}
.p-55{
    padding-right: 45px;
}
.bd_active{
    background: #4bc4f1;
    color: #000;
}


.actionalmd_logo{
    width: 64% !important;
    height: 100%;
    object-fit: contain;
    height: 90px !important;
}

    /* responsive */
    @media(min-width: 2000px) and (max-width: 3000px){
        .circle .stat:nth-of-type(3) img {
            transform: rotate(289deg) scale(1.2) translate(-13px, -37px);
        }
        .circle .stat:nth-of-type(2) img {
    transform: scale(1.5) translate(-35px, 2px) rotate(285deg);
    }
    .circle .stat:nth-of-type(1) img {
    transform: rotate(280deg) scale(1.2) translate(3px, -22px);
    }
    }

    @media(min-width: 1707px) and (max-width: 3000px){
        /* *{display: none;} */
        .circle .stat:nth-of-type(3) img {
            transform: rotate(286deg) scale(1.2) translate(-15px, -65px);
        }
        .circle .stat:nth-of-type(2) img {
            transform:scale(1.5) translate(-64px, 5px) rotate(285deg);
        }
        .circle .stat:nth-of-type(1) img {
            transform: rotate(282deg) scale(1.2) translate(-26px, -52px);
        }
        .progress_wrapper img {
            position: absolute;
            top: 30%;
        }
        .full_circle h4{
            font-size: 20px;
        }
        .full_circle h4 span{
            display: block;
            font-size: 22px;
        }

    }
    @media(min-width: 2048px) and (max-width: 3000px){
        /* *{display: none;} */
        .circle .stat:nth-of-type(3) img {
            transform: rotate(286deg) scale(1.2) translate(-19px, -85px);
        }
        .circle .stat:nth-of-type(2) img {
            transform:scale(1.5) translate(-84px, 11px) rotate(285deg);
        }
        .circle .stat:nth-of-type(1) img {
            transform: rotate(278deg) scale(1.2) translate(-42px, -77px);
        }
        .progress_wrapper img {
            position: absolute;
            top: 26%;
        }
        .full_circle h4{
            font-size: 20px;
        }
        .full_circle h4 span{
            display: block;
            font-size: 22px;
        }

    }
    @media(min-width: 2304px) and (max-width: 3000px){
        /* *{display: none;} */

        .circle .stat:nth-of-type(3) img {
            transform: rotate(286deg) scale(1.2) translate(-41px, -113px);
        }
        .circle .stat:nth-of-type(2) img {
            transform:scale(1.5) translate(-115px, 24px) rotate(285deg);
        }
        .circle .stat:nth-of-type(1) img {
            transform: rotate(278deg) scale(1.2) translate(-66px, -115px);
        }
        .progress_wrapper img {
            position: absolute;
            top: 26%;
        }
        .full_circle h4{
            font-size: 20px;
        }
        .full_circle h4 span{
            display: block;
            font-size: 22px;
        }

    }
    @media(min-width: 1200px) and (max-width: 1400px){
    .form-label {
    font-size: 12px;
    }
    .banner_content .content_wrapper h1 {
    font-size: 50px;
    font-family: 'Exo 2';
    color: #25549C;
    }
    .support_banner_img{
    width: 400px;
    height: 400px;
    }
    .center_image{
    top: -2px;;
    }
    .overall_score span{
    top: 0px;
    }

    .vital_new_info{
    min-height: 500px;
    }
    .full_circle{
        top: 40px;
    }
    .circle .stat:nth-of-type(1) img {
    transform: rotate(280deg) scale(1.6) translate(28px, -24px);
    }
    .circle .stat:nth-of-type(2) img {
    transform: scale(1.8) translate(-33px, -9px) rotate(283deg);
    }
    .circle .stat:nth-of-type(3) img {
    transform: rotate(286deg) scale(1.5) translate(-21px, -32px);
    }
    .progress_wrapper img {
    top: 35%;
    width: auto;
    /* transform: scale(2.3); */
    }

    .circle_wrapper{
    position: relative;
    margin-top: 0;
    margin-bottom: 125px;
    }
    .p_5{
    /* padding: 10px; */
    }


    }
    @media(min-width: 992px) and (max-width: 1199px){
    .support_banner_img{
    width: 350px;
    height: 350px;
    }
    .full_circle{
        top: 40px;
    }
    .circle .stat:nth-of-type(1) img {
    transform: rotate(280deg) scale(1.6) translate(28px, -24px);
    }
    .circle .stat:nth-of-type(2) img {
    transform: scale(1.8) translate(-33px, -9px) rotate(283deg);
    }
    .circle .stat:nth-of-type(3) img {
    transform: rotate(286deg) scale(1.5) translate(-21px, -32px);
    }
    .progress_wrapper img {
    top: 35%;
    width: auto;
    /* transform: scale(2.3); */
    }
    .circle_wrapper{
    position: relative;
    margin-top: 0;
    margin-bottom: 100px;
    }
    .center_image{
    top: -60px;
    }
    .overall_score span{
    top: -65px;
    }
    .p_5{
    padding: 10px;
    }
    .mt_space{
    position: relative;
    top: 0;
    }
    .acc_mt_5{
    position: relative;
    top: 0;
    }
    .container_wrapper{
        top: -100px;
    }
    .nucleo{
        top: -100px;
    }
    .flex_left h4,.z-inex .vital_new_info h4{
        padding-bottom: 10px;
        font-size: 15px;
    }
    .info_form h4{
        font-size: 15px;
    }
    .form-control{
        font-size: 12px;
    }
    .hra_main h5{
        font-size: 14px;
        padding: 5px 0;
    }
    .hra_main h3{
        font-size: 13px;
    }
    .hra_btn_wrapper ul {
        height: 45px;
        margin: 30px 0 20px 0;
    }

    }
    @media(min-width: 768px) and (max-width: 991px){
    .banner_content .content_wrapper h1{
    font-size: 25px;
    }
    .banner_content{
    top: 10%;
    }
    .grouping_wrapper{
    margin-top: 0px;
    }
    header figure.top_header_logo img {
    width: 100%;
    height: 100%;
    }
    .circle_wrapper{
    position: relative;
    margin-top: -100px;
    margin-bottom: 120px;
    }

    .circle .stat:nth-of-type(1) img {
    transform: rotate(280deg) scale(1.6) translate(21px, 60px);
    }
    .circle .stat:nth-of-type(2) img {
    transform: scale(1.8) translate(45px, 9px) rotate(283deg);
    }
    .circle .stat:nth-of-type(3) img {
    transform: rotate(282deg) scale(1.5) translate(-20px, 54px);
    }
    .progress_wrapper img {
    top: 60%;
    transform: scale(1.7);
    }
    .full_circle {
        width: 200px;
        height: 200px;
        top: 20%;
    }
    .full_circle h4 {
        font-size: 20px;
        text-align: center;
    }
    .full_circle h4 span {
        font-size: 24px;
    top: 8px;
    display: block;
    }
    .center_image img {
    position: relative;
    top: 0;
    left: 0px;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    }
    .flex_rght p {
    text-align: start;
    width: 100%;
    text-align: justify;
    padding: 20px;
    padding-right: 0;
    }
    .flex_rght {
    padding: 30px;
    }
    .vital_new_info {
    border-radius: 0 !important;
    margin-bottom: 30px;
    margin-top: 40px;
    }
    .flex_rght img {
    position: relative;
    }
    .flex_left p {
    text-align: justify;
    padding-right: 0;
    }
    .mob_pos {
    text-align: center;
    }
    .mob_pos .w-100{
    width: 50% !important;
    }
    .p_5{
    padding: inherit;
    }
    .mt_space{
    position: relative;
    top: 0;
    }
    .acc_mt_5{
    position: relative;
    top: 0;
    }
    .inside_dass_image ul{
        flex-direction: column;
      }
      .inside_dass_image ul li{
      width: 60%;
      }
      .main_text {
        top: 74px;
        right: 0;
        font-size: 15px;
      }
      .main_count {
        left: 70px;
        top: 65px;
      }


    }
    @media(min-width: 0) and (max-width: 767px){
    .support_banner_img {
    left: 30%;
    width: 200px;
    height: 200px;
    top: 10%;
    }
    .banner_content .content_wrapper h1{
    font-size: 25px;
    }
    .banner_content{
    top: 20%;
    width: 92%;
    padding-bottom: 50px;
    }
    .circle_wrapper{
    position: relative;
    margin-top: -100px;
    margin-bottom: 120px;
    }
    .grouping_wrapper{
    margin-top: 0px;
    }
    header figure.top_header_logo img {
    width: 100%;
    height: 100%;
    }

    .circle .stat:nth-of-type(1) img {
    transform: rotate(275deg) scale(2.6) translate(40px, 56px);
    }
    .circle .stat:nth-of-type(2) img {
    transform: scale(3) translate(53px, 12px) rotate(283deg);
    }
    .circle .stat:nth-of-type(3) img {
    transform: rotate(288deg) scale(2.6) translate(-37px, 56px);
    }
    .progress_wrapper img {
    top: 80%;
    }
    .full_circle {
        width: 200px;
        height: 200px;
        top: 0;
    }
    .full_circle h4 {
        font-size: 23px;
    }
    .full_circle h4 span {
    font-size: 20px;
    top: 8px;
    display: block;
    }
    .transform_wrapper {
    transform: scale(0.6);
    }
    .center_image img {
    position: relative;
    top: 0;
    left: 0px;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    }
    .flex_rght p {
    text-align: start;
    width: 100%;
    text-align: justify;
    padding: 20px;
    padding-right: 0;
    }
    .flex_rght {
    padding: 30px;
    }
    .vital_new_info {
    border-radius: 0 !important;
    margin-bottom: 30px;
    min-height: auto;
    }
    .flex_left {
        position: relative;
        padding: 20px;
    }
    .flex_left img {
        position: absolute;
        right: 0;
        bottom: -10px;
        float: right;
        padding: 20px;
    }

    .z-inex .vital_new_info h4{
        font-size: 18px;
        padding-bottom: 0;
    }
    .info_form {
        padding-left: 0px;
    }
   .flex_rght img {
    position: absolute;
    right: 0;
    bottom: 0;
    float: right;
    padding: 20px;
}
.info_form h4 {
    padding-bottom: 15px;
    font-size: 20px;
}
    .flex_left p {
    text-align: justify;
    padding-right: 0;
    }
    .p_5 {
        padding: 15px;
    }
    .banner_content_wrapper {
    margin-top: 25px;
    }
    .mt_space{
    position: relative;
    top: 0;
    }
    .acc_mt_5{
    position: relative;
    top: 0;
    }
    .top_title_ul {
    position: relative;
    align-items: center;
    margin-top: 30px;
    justify-content: center;
    }
    .info_modal_img {
    width: 40%;
    }
    .video_bg video,.video_bg span,#particles-js{
        height: 100%;
    }
    .hra_summary_wrap span.top_right{
        right: 0
    }
    .hra_summary_wrap span.top_count{
        left: 0;
    }
    .hra_summary_wrap span.top_count::before,.hra_summary_wrap span.top_right::before{
        display: none;
    }
    .hra_summary_wrap h3{
        min-width: 335px;
    }
    .hra_summary_wrap h3{
        font-size: 14px;
    }
    .hra_summary_wrap {
        margin-bottom: 20px;
    }
    .hra_new_section_wrapper{
        padding: 20px 0 0 0;
    }
    .hra_btn_wrapper ul {
        height: 50px;
        margin: 20px 0 20px 0;
    }
    .shapes_blue{
        display: none;
    }
    .quest_answer li {
        font-size: 12px !important;
    }
    .info_modal_content p.tit_p{
        padding: 15px 0 0 15px;
        font-size: 20px;
    }
    .country_wrapper h4{
        font-size: 16px;
        margin: 0;
    }
    .inside_para_wrapper p{
        font-size: 16px;
    }


.inside_dass_image ul{
  flex-direction: column;
}
.inside_dass_image ul li{
width: 60%;
}
.main_text {
    top: 53px;
    right: -8px;
}
.main_count {
    left: 50px;
}
    }
    @media(min-width: 576px) and (max-width: 760px){
        .hra_main h5{
            font-size: 15px;
        }
        .hra_main h3{
            font-size: 14px;
        }
    }


    /* Ios Device Responsive */
    @supports (-webkit-touch-callout: none) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
      }

      @supports not (-webkit-touch-callout: none) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        /* header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        } */
      }
      @media only screen
      and (device-width: 428px)
      and (device-height: 926px)
      and (-webkit-device-pixel-ratio: 3) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
      }


    /* ----------- iPhone 4 and 4S ----------- */

    /* Portrait and Landscape */
    @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* Portrait */
    @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* Landscape */
    @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

    /* Portrait and Landscape */
    @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* Portrait */
    @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* Landscape */
    @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* ----------- iPhone 6, 6S, 7 and 8 ----------- */

    /* Portrait and Landscape */
    @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 667px)
      and (-webkit-min-device-pixel-ratio: 2) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
        height: 100px !important;
        object-fit: contain !important;
        position: absolute !important;
        left: 0 !important;
        }
    }

    /* Portrait */
    @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 667px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* Landscape */
    @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 667px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* ----------- iPhone 6+, 7+ and 8+ ----------- */

    /* Portrait and Landscape */
    @media only screen
      and (min-device-width: 414px)
      and (max-device-width: 736px)
      and (-webkit-min-device-pixel-ratio: 3) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
        height: 100px !important;
        object-fit: contain !important;
        position: absolute !important;
        left: 0 !important;
        }
    }

    /* Portrait */
    @media only screen
      and (min-device-width: 414px)
      and (max-device-width: 736px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
        height: 100px !important;
        object-fit: contain !important;
        position: absolute !important;
        left: 0 !important;
        }
    }

    /* Landscape */
    @media only screen
      and (min-device-width: 414px)
      and (max-device-width: 736px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: landscape) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* ----------- iPhone X ----------- */

    /* Portrait and Landscape */
    @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 812px)
      and (-webkit-min-device-pixel-ratio: 3) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
            height: 100px !important;
            object-fit: contain !important;
            position: absolute !important;
            left: 0 !important;
        }
    }

    /* Portrait */
    @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 812px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
        height: 100px !important;
        object-fit: contain !important;
        position: absolute !important;
        left: 0 !important;
        }
    }

    /* Landscape */
    @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 812px)
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: landscape) {
        .top_title_ul.logo li a img {
            width: 100% !important;
            height: 100px !important;
            object-fit: contain !important;
        }
        header figure.top_header_logo img {
            width: 20% !important;
        height: 100px !important;
        object-fit: contain !important;
        position: absolute !important;
        left: 0 !important;
        }
    }









    /* Ios Device Responsive End*/

    @media screen and (min-width: 1024px) and (max-width: 1200px) {
        /* *{display: none;} */
        .circle .stat:nth-of-type(3) img {
            transform: rotate(286deg) scale(1.5) translate(-40px, 5px);
        }
        .circle .stat:nth-of-type(2) img {
            transform: scale(1.8) translate(4px, 7px) rotate(283deg);
        }
        .circle .stat:nth-of-type(1) img {
            transform: rotate(280deg) scale(1.6) translate(32px, 8px);
        }
        .full_circle {
            top: -35px;
        }
     }
    /* responsive */