:root{
    --primary-color: #F16232;
    --primary-bg-color: #FBF6F4;
    --secondary-color: #00AB84;
    --body-color: #15342A;
    --body-bg-color: #012A35;
    --black-color: #000000;
    --white-color: #fff;
}
.text_primary{
    color: var(--primary-color);
}
.text_secondary{
    color: var(--secondary-color);
}
.text_black{
    color: var(--black-color);
}
.text_body{
    color: var(--body-color);
}
.bg_primary_light{
    background-color: var(--primary-bg-color);
}

.section_spacing{
    padding: 120px 0px;
}
h2, h3, h4 {
    font-weight: 600;
    color: var(--black-color);
}
h2 {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
}
h3{
    font-size: 30px;
    line-height: 37px;
    margin-bottom: 15px;
}

h4, .card_title{
    font-size: 25px;
    line-height: 31px;
    margin-bottom: 10px;
}
img{
    max-width: 100%;
}

.hero_section {
    padding: 150px 0px;
    position: relative;
    background-image: url(../images/new-index/hero_bg.webp);
    background-repeat: no-repeat;
    background-position: center 85%;
    background-size: contain;
    overflow: hidden;
}
.hero_section::before, .hero_section::after{
    content: '';
    background-size: contain !important;
    position: absolute;
    z-index: 0;
}
.hero_section::before{
    width: 100%;
    height: 50px;
    background: url('data:image/svg+xml,<svg width="1920" height="46" viewBox="0 0 1920 46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 46L960 26L1920 46L960 0L0 46Z" fill="%2300AB84"/></svg>') no-repeat;
    background-position: center bottom;
    bottom:-2px;
    left: 0;
}
.hero_section::after{
    width: 135px;
    height: 130px;
    background: url('data:image/svg+xml,<svg width="135" height="131" viewBox="0 0 135 131" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-0.000432403 15.3496L15.6309 0L-0.000431061 -1.36653e-06L-0.000432403 15.3496Z" fill="%23F2E0D7"/><path d="M-0.000432403 44.1596L15.6309 28.8101L-0.000431061 28.8101L-0.000432403 44.1596Z" fill="%23F2E0D7"/><path d="M-0.000432403 72.9694L15.6309 57.6199L-0.000431061 57.6199L-0.000432403 72.9694Z" fill="%23F2E0D7"/><path d="M-0.000432403 101.78L15.6309 86.4299L-0.000431061 86.4299L-0.000432403 101.78Z" fill="%23F2E0D7"/><path d="M-0.000432423 130.59L15.6309 115.004L-0.000431061 115.004L-0.000432423 130.59Z" fill="%23F2E0D7"/><path d="M29.8433 15.3496L45.4746 0L29.8433 -1.36653e-06L29.8433 15.3496Z" fill="%23F2E0D7"/><path d="M29.8433 44.1596L45.4746 28.8101L29.8433 28.8101L29.8433 44.1596Z" fill="%23F2E0D7"/><path d="M29.8433 72.9694L45.4746 57.6199L29.8433 57.6199L29.8433 72.9694Z" fill="%23F2E0D7"/><path d="M29.8433 101.78L45.4746 86.4299L29.8433 86.4299L29.8433 101.78Z" fill="%23F2E0D7"/><path d="M59.6832 15.3496L75.3145 0L59.6832 -1.36653e-06L59.6832 15.3496Z" fill="%23F2E0D7"/><path d="M59.6832 44.1596L75.3145 28.8101L59.6832 28.8101L59.6832 44.1596Z" fill="%23F2E0D7"/><path d="M59.6832 72.9694L75.3145 57.6199L59.6832 57.6199L59.6832 72.9694Z" fill="%23F2E0D7"/><path d="M89.7618 15.3496L105.156 0L89.7618 -1.34583e-06L89.7618 15.3496Z" fill="%23F2E0D7"/><path d="M89.7618 44.1596L105.156 28.8101L89.7618 28.8101L89.7618 44.1596Z" fill="%23F2E0D7"/><path d="M119.604 15.3496L134.998 0L119.604 -1.34583e-06L119.604 15.3496Z" fill="%23F2E0D7"/></svg>') no-repeat;
    background-position: center;
    top: 29px;
    left: 32px;
}
.hero_section>div{
    position: relative;
    z-index: 1;
}
.main_heading {
    font-size: 45px;
    line-height: 56px;
    margin-bottom: 20px;
}
.lorem_text {
    font-size: 22px;
    line-height: 34px;
    margin-bottom: 38px;
}
.custom_btn {
    padding: 22px 30px;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: var(--white-color);
    text-transform: uppercase;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 20px;
}
.custom_btn, .custom_btn *{
    transition: all ease-in-out 0.3s;
}
.custom_btn:hover{
    box-shadow: 5px 6px 30px rgba(241,98,50,.34);
    background-color: var(--white-color);
    color: var(--black-color);
}
.custom_btn:hover img{
    filter: invert(1);
}
/* Affiliate Program Works */
.program_group {
    margin: 50px 0px 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
}
.program_card .card_title{
    margin: 30px 0px 17px;
}
.program_card .card_img img{
       max-height: 224px;
       height: 100%;
}
/* Affiliate Partner Program */
.partner_card {
    background-color: var(--body-bg-color);
    border-radius: 10px;
    padding: 30px;
    gap: 30px;
    display: flex;
}
.partner_card, .p_enrollment_form {
    border-radius: 10px;
}
.p_enrollment_form {
    width: 40%;
    padding: 40px 30px;
    background: linear-gradient(180deg, #00AB84 0%, #008D6D 100%);
    position: relative;
}
.p_enrollment_form::before{
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: url('data:image/svg+xml,<svg width="173" height="168" viewBox="0 0 173 168" fill="none" xmlns="http://www.w3.org/2000/svg"><g style="mix-blend-mode:color-dodge" opacity="0.53"><path d="M173.002 147.682L152.971 167.352L173.002 167.352L173.002 147.682Z" fill="%2300BC93"/><path d="M173.002 110.761L152.971 130.432L173.002 130.432L173.002 110.761Z" fill="%2300BC93"/><path d="M173.002 73.8409L152.971 93.5116L173.002 93.5116L173.002 73.8409Z" fill="%2300BC93"/><path d="M173.002 36.9205L152.971 56.5912L173.002 56.5912L173.002 36.9205Z" fill="%2300BC93"/><path d="M173.002 0.000144066L152.971 19.9734L173.002 19.9735L173.002 0.000144066Z" fill="%2300BC93"/><path d="M134.758 147.682L114.727 167.352L134.758 167.352L134.758 147.682Z" fill="%2300BC93"/><path d="M134.758 110.761L114.727 130.432L134.758 130.432L134.758 110.761Z" fill="%2300BC93"/><path d="M134.758 73.8409L114.727 93.5116L134.758 93.5116L134.758 73.8409Z" fill="%2300BC93"/><path d="M134.758 36.9205L114.727 56.5912L134.758 56.5912L134.758 36.9205Z" fill="%2300BC93"/><path d="M96.5161 147.682L76.4844 167.352L96.5161 167.352L96.5161 147.682Z" fill="%2300BC93"/><path d="M96.5161 110.761L76.4844 130.432L96.5161 130.432L96.5161 110.761Z" fill="%2300BC93"/><path d="M96.5161 73.8409L76.4844 93.5116L96.5161 93.5116L96.5161 73.8409Z" fill="%2300BC93"/><path d="M57.9704 147.682L38.2422 167.352L57.9704 167.352L57.9704 147.682Z" fill="%2300BC93"/><path d="M57.9704 110.761L38.2422 130.432L57.9704 130.432L57.9704 110.761Z" fill="%2300BC93"/><path d="M19.7282 147.682L0 167.352L19.7282 167.352L19.7282 147.682Z" fill="%2300BC93"/></g></svg>') no-repeat;
    background-position: center bottom;
    background-size: contain;
    width: 173px;
    height: 165px;
}
.partner_card .list{
    margin: 25px 0px 0px;
    padding: 0px;
    font-size: 16px;
    line-height: 27px;
}
.partner_card .list li:not(:last-child){
    margin-bottom: 15px;
}
.partner_card .list li{
    position: relative;
    padding-left: 28px;
    background-image: url('data:image/svg+xml,<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.2783 9.60987C18.9806 9.43679 18.7131 9.21635 18.4863 8.9572C18.5093 8.59642 18.5952 8.24243 18.7403 7.91129C19.007 7.1587 19.3086 6.3062 18.8246 5.64345C18.3406 4.9807 17.4267 5.00179 16.6246 5.02012C16.2702 5.05659 15.9121 5.03241 15.5658 4.94862C15.3813 4.64842 15.2496 4.31886 15.1763 3.9742C14.9489 3.19962 14.6895 2.3242 13.8929 2.06204C13.1248 1.81454 12.4134 2.35904 11.7846 2.83754C11.5132 3.08533 11.1988 3.28136 10.8569 3.41595C10.5114 3.28246 10.1935 3.08637 9.91917 2.83754C9.29217 2.36179 8.58358 1.81179 7.81175 2.06295C7.017 2.32145 6.75758 3.19962 6.52842 3.9742C6.4552 4.31774 6.32475 4.64652 6.1425 4.94679C5.79556 5.03035 5.43706 5.05514 5.08192 5.02012C4.27708 4.99812 3.3705 4.97429 2.88192 5.64345C2.39333 6.31262 2.69858 7.1587 2.96625 7.91037C3.11332 8.24102 3.20054 8.59515 3.22383 8.95629C2.99749 9.21577 2.73028 9.43654 2.43275 9.60987C1.76175 10.0682 1 10.5898 1 11.4368C1 12.2838 1.76175 12.8035 2.43275 13.2637C2.73021 13.4368 2.99742 13.6572 3.22383 13.9164C3.20298 14.2774 3.11825 14.6318 2.97358 14.9632C2.70775 15.7149 2.40708 16.5674 2.89017 17.2301C3.37325 17.8929 4.28442 17.8718 5.09017 17.8535C5.44489 17.817 5.80323 17.8411 6.14983 17.925C6.33352 18.2255 6.46493 18.5549 6.5385 18.8994C6.76583 19.674 7.02525 20.5494 7.82183 20.8115C7.94954 20.8525 8.0828 20.8735 8.21692 20.8739C8.86153 20.7814 9.46064 20.4882 9.92925 20.036C10.2006 19.7882 10.515 19.5922 10.8569 19.4576C11.2024 19.5911 11.5203 19.7872 11.7947 20.036C12.4226 20.5155 13.1339 21.0627 13.903 20.8106C14.6978 20.5521 14.9572 19.674 15.1863 18.9003C15.2598 18.5561 15.3912 18.2269 15.575 17.9268C15.9206 17.8426 16.278 17.8179 16.6319 17.8535C17.4368 17.8727 18.3433 17.8993 18.8319 17.2301C19.3205 16.561 19.0153 15.7149 18.7476 14.9623C18.6015 14.6319 18.5143 14.2786 18.49 13.9182C18.7165 13.6585 18.984 13.4377 19.282 13.2646C19.953 12.8063 20.7148 12.2838 20.7148 11.4368C20.7148 10.5898 19.9503 10.0691 19.2783 9.60987Z" fill="%23F16232"/><path d="M10.2346 14.3293C10.118 14.3295 10.0024 14.3066 9.89471 14.2619C9.78697 14.2172 9.68917 14.1515 9.60696 14.0688L7.23839 11.7002C7.08149 11.5318 6.99608 11.3091 7.00014 11.079C7.0042 10.8489 7.09742 10.6293 7.26015 10.4666C7.42289 10.3039 7.64244 10.2106 7.87255 10.2066C8.10266 10.2025 8.32536 10.2879 8.49373 10.4448L10.3175 12.2686L14.4389 9.17765C14.6273 9.0363 14.8642 8.97562 15.0974 9.00893C15.3306 9.04225 15.541 9.16683 15.6824 9.35529C15.8237 9.54375 15.8844 9.78063 15.8511 10.0138C15.8178 10.247 15.6932 10.4574 15.5047 10.5988L10.7676 14.1517C10.6138 14.2669 10.4268 14.3292 10.2346 14.3293Z" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 22px;
}
.partner_program {
    flex: 1 1 0;
}
.contact_form {
    margin-top: 40px;
}
.contact_form .form_grid{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 30px;
}
.contact_form .form_group{
    margin-bottom: 30px;
}
.contact_form label{
    color: var(--white-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 8px;
    text-transform: capitalize;
}
.contact_form .form-control{
    border-radius: 3px;
    padding: 21px 15px;
    font-size: 14px;
    line-height: 16px;
    box-shadow: none;
    outline: none;
}
.contact_form .form-control:focus{
    border-color: var(--primary-color);
}
.contact_form .custom_btn{
    max-height: 55px;
    max-width: 245px;
    width: 100%;
    float: right;
}
/* How Can You Benefit CSS */
.benefit_section{
    position: relative;
    overflow: hidden;
}
.benefit_section::before{
    content: '';
    position: absolute;
    top: 24%;
    right: 4%;
    background: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_142_843)"><path d="M32 16L16 0L0 16L16 32L32 16ZM5.54973 16L16 5.54973L26.4503 16L16 26.4503L5.54973 16Z" fill="%23F16232"/></g><defs><clipPath id="clip0_142_843"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>') no-repeat;
    background-position: center;
    background-size: contain;
    width: 32px;
    height: 32px;
}
.benefit_section .content{
    margin: 30px 0px 40px;
}
/* How Mobi Doctor Work? CSS */
.how_to_work{
    background-image: linear-gradient(180deg, #001d20d6 0%, #000e14e8 100%), url(../images/new-index/how-to-work.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
}
.steps_group {
    margin: 60px 0px 52px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 52px;
    justify-content: center;
}
.steps_group .step_item{
    display: flex;
    gap: 20px;
    flex: 1 1 0;
    min-width: 30%;
    max-width: 33%;
    padding: 18px;
    position: relative;
}
.steps_group .step_item::before{
    content: '';
    width: 100%;
    height: 136px;
    position: absolute;
    top: -6px;
    left: 0;
    background: url(../images/new-index/pill-shap.webp) no-repeat;
    background-position: top left;
    background-size: contain;
}
.step_item .step_count{
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    backdrop-filter: blur(52px);
    background-color: hsl(0deg 0% 100% / 16%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 47px;
    font-weight: 600;
    line-height: 59px;
    color: transparent;
    -webkit-text-stroke: 1.5px  var(--white-color);
    text-stroke: 1.5px var(--white-color);
    position: relative;
}
/* Ready to Earn While Making a Difference CSS */
.making_card {
    padding: 60px 30px;
    border-radius: 30px;
    background: url(../images/new-index/Making_bg.webp) no-repeat center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.making_card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #009875;
    opacity: 0.8;
}
.making_card_body {
    max-width: 1034px;
    margin: auto;
    position: relative;
}
.making_card_body .custom_btn {
    text-transform: capitalize;
}
/* Mobi Doctor Affiliate FAQ CSS */
.accordion_group {
    margin: 60px 0px 0px;
}
.accordion_group *,
.accordion_group .accordion-item:focus-visible {
    outline: none !important;
    box-shadow:  none !important;
}
.accordion_group .accordion-item:not(:last-child){
    margin-bottom: 30px;
}
.accordion_group .accordion-item{
    border-radius: 10px;
    overflow: hidden;
    border: none;
}
.accordion_group .accordion-item .accordion-button{
    padding: 26px 30px;  
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: var(--black-color);
    background-color: transparent;
    border: 1px solid #D9EAEA;
    border-radius: 10px !important;
}

.accordion_group .accordion-item .accordion-button:not(.collapsed){
    border-radius: 0px !important;
    border: 1px solid #FDF5F2;
}
.accordion_group .accordion-item .accordion-collapse{
    padding: 0px 30px 30px;
    transition: 0s;
}
.accordion_group .accordion-item .accordion-collapse:not(.show){
    background-color: var(--white-color);
}
.accordion_group .accordion-item .accordion-button:not(.collapsed), .accordion_group .accordion-item .accordion-collapse{
    background-color: #FDF5F2;
}
.accordion_group .accordion-item .accordion-body{
    padding: 20px 0px 0px;
}
.accordion_group .accordion-item .show .accordion-body{
    border-top: 1px solid #EBD6CE;
}
.accordion_group .accordion-item .accordion-body p:last-child{
    margin-bottom: 0px;
}
.accordion_group .accordion-button::after{
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 8L12 16L21 8" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
/* .accordion_group .accordion-button:not(.collapsed)::after{
    transform: unset;
} */
.accordion_group .accordion-item .accordion-button:focus-visible{
    outline: none !important;
}

@media screen and (max-width: 1399.98px) {
    .steps_group .step_item{
        min-width: 45%;
        max-width: 45%;
    }
    .section_spacing{
        padding: 100px 0px;
    }
}

@media screen and (max-width: 1200px) {
    .hero_section{
        padding: 120px 0px;
    }
    .main_heading {
        font-size: 40px;
        line-height: 50px;
    }
    .lorem_text {
        font-size: 18px;
        line-height: 32px;
    }
    .custom_btn {
        padding: 16px 30px;
    }
    .section_spacing{
        padding: 80px 0px;
    }
    h2 {
        font-size: 35px;
        line-height: 45px;
    }
    h4, .card_title{
        font-size: 22px;
    }
    .program_group {
        margin: 40px 0px 50px;
    }
    .steps_group {
        margin: 50px 0px 42px;
        row-gap: 42px;
    }
}

@media screen and (max-width: 991.98px) {
    .hero_section{
        padding: 80px 0px;
    }
    .main_heading {
        font-size: 35px;
        line-height: 45px;
    }
    .hero_section::before{
        background-size: calc(100% + 200px) !important;
    }
    .hero_section::after {
        width: 110px;
        height: 104px;
        top: 15px;
        left: 15px;
    }
    .section_spacing{
        padding: 60px 0px;
    }
    h2 {
        font-size: 30px;
        line-height: 40px;
    }
    h3 {
        font-size: 28px;
        line-height: 35px;
    }
    .program_group {
        margin: 30px 0px 40px;
        grid-template-columns: repeat(2, 1fr);
    }
    .custom_btn {
        padding: 14px 30px;
    }
    .partner_card{
        flex-direction: column;
    }
    .p_enrollment_form, .partner_program{
        width: 100%;
        flex: 1 1 100%;
    }
    .partner_card .list li:not(:last-child) {
        margin-bottom: 10px;
    }
    .contact_form {
        margin-top: 30px;
    }
    .contact_form .form-control {
        padding: 18px 15px;
    }
    .benefit_section .content{
        margin: 20px 0px 30px;
    }
    .steps_group {
        margin: 40px 0px 32px;
        row-gap: 30px;
    }
    .steps_group .step_item{
        min-width: 100%;
        max-width: 100%;
        gap: 36px;
    }
    .steps_group .step_item::before{
        display: none;
    }
    .step_item .step_count::before{
        content: '';
        width: calc(100% + 30px);
        height: calc(100% + 30px);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid var(--secondary-color);
        border-radius: 50%;
    }
    .step_item .step_count {
        width: 80px;
        height: 80px;
        font-size: 40px;
        line-height: 50px;
    }
    .making_card {
        padding: 40px 30px;
    }
    .accordion_group .accordion-item .accordion-button {
        padding: 20px 24px;
        font-size: 18px;
        line-height: 26px;
    }
}
@media screen and (max-width: 768px) {
    .program_group {
        margin: 20px 0px 30px;
        grid-template-columns: repeat(1, 1fr);
    }
    .program_card .card_title {
        margin: 20px 0px 15px;
    }
    h2 {
        font-size: 28px;
        line-height: 35px;
    }
    h3 {
        font-size: 26px;
        line-height: 30px;
    }
    .contact_form .custom_btn{
        max-width: 100%;
    }

}
@media screen and (max-width: 576px) {
    .main_heading {
        font-size: 32px;
        line-height: 42px;
    }
    h2 {
        font-size: 24px;
        line-height: 32px;
    }
    h3 {
        font-size: 22px;
        line-height: 30px;
    }
    h4, .card_title{
        font-size: 20px;
        line-height: 30px;
    }
    .partner_card {
        padding: 25px;
    }
    .p_enrollment_form {
        padding: 30px 20px;
    }
    .program_card .card_img img {
        max-height: 200px;
    }
    .contact_form {
        margin-top: 20px;
    }
    .contact_form .form_grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .contact_form .form_group {
        margin-bottom: 20px;
    }
    .steps_group {
        margin: 10px 0px 20px;
        row-gap: 0px;
    }
    .step_item .step_count {
        width: 50px;
        height: 50px;
        font-size: 26px;
        line-height: 26px;
        margin-top: 18px;
    }
    .making_card {
        padding: 30px 20px;
        border-radius: 20px;
    }

}
