:root {
    --brand-blue-dark: #202B46;
    --primary-light: #7AAAD1;
    --heading: #11314B;
    --sub-heading: #274791;
    --blue-btn: #1E2F57;
    --golden-btn: linear-gradient(110.97deg, #219d66 45.82%, #8cfa99 109.23%);
    --primary-section-light: #F8FAFB;
    --question-sectionBg: #EDF3F8;
    --setp-circle-bg: #52545E;
    --table-section: #272D3A;
    --table-bgHeading1: #F8F4ED;
    --table-bgHeading2: #29654F;
    --table-bgHeading3: #F8F8F9;
    --table-heading-text1: #272D3A;
    --table-heading-text2: #393A45;
    --table-bgData2: rgba(241, 248, 248, 0.5);
    ;
    --table-dataText1: #2C463F;
    --table-dataText2: #29654F;
    --table-dataText3: #52545E;
    --give-backSection: #F8F4ED;
    --footer-btnSection: #C6A26A;
    --footer: #272D3A;
    --roboto: 'Roboto', sans-serif;
    --marriWeather: 'Merriweather', serif
}

body {}

a {
    text-decoration: none
}

h2 {
    color: var(--heading)
}

.sub-heading {
    color: var(--sub-heading)
}

.roboto {
    font-family: var(--roboto)
}

.mariiWeather {
    font-family: var(--marriWeather)
}

.fs-9 {
    font-size: 9px
}

.fs-11 {
    font-size: 11px
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px
}

.fs-16 {
    font-size: 16px
}

.fs-19 {
    font-size: 19px
}

.fs-20 {
    font-size: 20px
}

.fs-21 {
    font-size: 21px
}

.fs-24 {
    font-size: 24px
}

.fs-32 {
    font-size: 32px
}

.fs-40 {
    font-size: 40px
}

.fs-48 {
    font-size: 48px
}

.fw-400 {
    font-weight: 400
}

.fw-600 {
    font-weight: 600
}

.fw-700 {
    font-weight: 700
}

.lh-115 {
    line-height: 115%
}

.lh-120 {
    line-height: 120%
}

.lh-125 {
    line-height: 125%
}

.lh-140 {
    line-height: 140%;
}

.text-primary-light {
    color: var(--primary-light)
}

.img {
    width: 100%;
    height: auto
}

.blue-btn {
    border: none;
    background-color: var(--blue-btn);
    border-bottom: 3px solid #7AAAD1;
    box-shadow: 0px 1px 2px #D4E7F7, 0px 6px 4px rgba(95, 191, 249, 0.1);
    border-radius: 7px;
    padding: 16px 0px;
    transition: 0.5s
}

.blue-btn:hover {
    background-color: #272d3a
}

.golden-btn {
    background: var(--golden-btn);
    font-size: 20px;
    line-height: 120%;
    font-weight: 600;
    color: white;
    padding: 16px 0px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 7px;
    moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    background-size: 150% 100%
}

.golden-btn:hover {
    background-position: 100% 0;
    moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out
}

.white-btn {
    background: linear-gradient(90.54deg, #FEFDFB -14.54%, #FFFFFF 98.62%);
    color: #52545E;
    font-size: 20px;
    font-weight: 600;
    line-height: 120%;
    font-family: var(--roboto);
    border: none;
    border-radius: 7px;
    padding: 18px 0px;
    box-shadow: 0px 1px 1px rgba(9, 44, 71, 0.3);
    moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    background-size: 150% 100%
}

.white-btn:hover {
    background-position: 100% 0;
    moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out
}

.phone-btn-footer {
    background-color: var(--footer-btnSection);
    border-radius: 7px;
    border: none;
    max-width: 350px
}

.f-btn-icon {
    width: 90px;
    border-radius: 6px 0px 0px 6px
}

.f-btn-text {
    border-radius: 0px 6px 6px 0px;
    border: 2px solid white
}

#loader {
    position: relative;
    width: 4px;
    height: 4px;
    padding: 0;
    display: inline-block
}

#loader>div {
    content: "";
    background: #ffd473;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%
}

#loader>div:nth-of-type(1) {
    left: 15px
}

#loader>div:nth-of-type(3) {
    left: -15px
}

.dots-fade>div {
    -webkit-animation: dots-fade 1.6s infinite ease;
    animation: dots-fade 1.6s infinite ease;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s
}

.dots-fade>div:nth-of-type(1) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s
}

.dots-fade>div:nth-of-type(3) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

@-webkit-keyframes dots-fade {
    0% {
        opacity: 1
    }

    40% {
        opacity: 0.2
    }

    80% {
        opacity: 1
    }
}

@keyframes dots-fade {
    0% {
        opacity: 1
    }

    40% {
        opacity: 0.2
    }

    80% {
        opacity: 1
    }
}

.top-header {
    background-color: var(--brand-blue-dark)
}

.top-mobile-btn {
    display: none
}

.top-mobile-btn {
    border: 2px solid white;
    border-radius: 4px;
    text-align: center;
    padding: 10px 0px
}

.top-btn-text1 {
    font-size: 15px;
    font-weight: 400;
    line-height: 125%;
    font-family: var(--roboto)
}

.top-btn-text2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 120%;
    font-family: var(--roboto)
}

.radius-4 {
    border-radius: 4px
}

label {
    color: #444444
}

.hero-section {
    background-color: var(--brand-blue-dark)
}

.form-heading {
    background-image: url("../media/Vector.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 10px
}

.form-heading span {
    color: #424350
}

.herder-form {
    border-radius: 8px;
    padding: 28px 36px
}

.form-phone-text {
    color: #52545E
}

/* CORRECTED: Removed invalid character before 'display' */
.small-text {
    color: #575965;
    display: block;
}

.mobile-logo {
    display: none
}

.badge-section {
    background-color: var(--primary-section-light)
}

.bg-badge {
    background-color: var(--brand-blue-dark);
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15)
}

.steps {
    background-color: var(--primary-section-light)
}

.step-1.lazybg {
    background-image: none;
    background-color: #c99f62
}

.step-2.lazybg {
    background-image: none;
    background-color: #c99f62
}

.step-3.lazybg {
    background-image: none;
    background-color: #c99f62
}

.step-1 {
    background-image: url("../media/step1Bg.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background-position: center center;
    height: 220px;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.step-2 {
    background-image: url("../media/step2Bg.jpg");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    position: relative;
    height: 220px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.step-3 {
    background-image: url("../media/step3Bg.jpg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    height: 220px;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.stepCenter-box {
    border-radius: 50%;
    height: 68px;
    width: 68px;
    background-color: var(--setp-circle-bg);
    box-shadow: inset 0px 7px 4px #38393F;
    position: absolute;
    left: 40%;
    /* CORRECTED: Added 'px' unit to the 'top' property */
    top: -50px;
}

.bg-successStories.lazybg {
    background-image: none;
    background-color: #272D3A
}

.bg-successStories {
    max-height: 339px;
    min-height: 323px;
    background-image: url("../media/sliderBG.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 2px;
    padding: 28px 34px;
    margin-top: -4px;
    position: relative
}

.success-video {
    border-radius: 2px
}

.video-subheading-bold {
    color: #112D40
}

.video-subheading-normal {
    color: var(--sub-heading)
}

.carousel {
    position: static !important
}

.carousel-indicators {
    justify-content: start !important;
    margin-left: 40px !important
}

.carousel-indicators [data-bs-target] {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    background-color: #F8F4ED !important;
    opacity: 1 !important
}

.carousel-indicators .active {
    background-color: #C6A97B !important
}

.customerHeading {
    position: relative
}

.customerHeading::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: -40px;
    right: -40px;
    background-image: url(../media/arrowTestimonials.svg);
    background-repeat: no-repeat;
    background-position: bottom right
}

.table-section {
    background-color: var(--table-section);
    background-image: url("../media/patternSVG.svg");
    background-repeat: no-repeat;
    background-position: bottom right
}

.table-heading-box {
    max-width: 707px
}

table {
    border-radius: 4px
}

tbody {
    border: 1px solid #D2D3DE !important
}

.b-left {
    border-left: 1px solid #D2D3DE
}

.border-last {
    border-radius: 0px 4px 0px 0px
}

.v-middle {
    vertical-align: middle !important
}

.table-bgHeading1 {
    background-color: var(--table-bgHeading1) !important;
    color: var(--table-heading-text1);
    font-size: 19px;
    font-weight: 600;
    line-height: 120%;
    font-family: var(--roboto);
    border-radius: 4px 0px 0px 0px
}

.table-bgHeading2 {
    background-color: var(--table-bgHeading2) !important;
    color: white;
    font-size: 16px;
    font-weight: 600;
    line-height: 125%;
    font-family: var(--roboto)
}

.table-bgHeading3 {
    background-color: var(--table-bgHeading3) !important;
    color: var(--table-heading-text2);
    font-size: 16px;
    font-weight: 600;
    line-height: 125%;
    font-family: var(--roboto)
}

.table>:not(caption)>*>* {
    padding: .7rem .9rem !important
}

.table-dataText1 {
    color: var(--table-dataText1);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%
}

.table-dataText2 {
    color: var(--table-dataText2);
    font-weight: 600;
    font-size: 16px;
    line-height: 130%;
    background-color: var(--table-bgData2) !important
}

.table-dataText3 {
    color: var(--table-dataText3);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%
}

.rad-label {
    display: flex;
    align-items: center;
    border-radius: 100px;
    padding: 5px 10px;
    margin: 10px 0;
    cursor: pointer;
    transition: .3s
}

.rad-label:hover,
.rad-label:focus-within {
    background: hsla(0, 0%, 80%, .14)
}

.rad-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    z-index: -1
}

.rad-design {
    width: 22px;
    height: 22px;
    border-radius: 100px;
    background: linear-gradient(110.97deg, #B9893C 45.82%, #DAB57C 109.23%);
    position: relative
}

.rad-design::before {
    content: '';
    display: inline-block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: hsl(0, 0%, 90%);
    transform: scale(1.1);
    transition: .3s
}

.rad-input:checked .rad-label:focus-within {
    background: hsla(0, 0%, 80%, .14)
}

.rad-input:checked .rad-design::before {
    transform: scale(0)
}

.rad-input:checked~.rad-text {
    color: white
}

.rad-text {
    color: hsl(0, 0%, 60%);
    margin-left: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 900;
    transition: .3s
}

.mobile-table {
    display: none
}

.question-Section {
    background-color: var(--question-sectionBg)
}

.accordion-button:not(.collapsed)::after {
    background-image: url(../media/minus.svg)
}

.accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: #DDC6A0;
    box-shadow: inset 0 -1px 0 rgba(155, 141, 128, 1);
    border: 1px solid #9B8D80
}

.accordion-button::after {
    background-image: url(../media/plus.svg);
    position: absolute;
    top: 28px
}

.accordion-button {
    border-bottom: 1px solid #7AAAD1;
    background-color: #D1E2F0;
    padding: 28px 36px !important
}

.accordion-button:focus {
    border: 1px solid #9B8D80;
    box-shadow: 0 0 0;
    background-color: #DDC6A0;
    /* BEST PRACTICE: Avoid removing the focus outline for accessibility. 
      Users who navigate with a keyboard need to see what element is active.
      A better approach is to style a custom outline.
    */
    /* outline: none !important; */
    outline: 2px solid #52545E; /* Example of a custom outline */
}

#myAccordion {
    border: none;
    border-bottom: none
}

.accordion-collapse {
    border-bottom: solid 1px #8AA7BF
}

.Accordion-Questions {
    margin-left: 36px;
    text-align: left;
    color: #272D3A;
    line-height: 120%;
    font-family: var(--roboto);
    font-weight: 600
}

.accordion-collapse .card-body {
    padding: 40px 72
}

.accordion-collapse .card-body p {
    font-family: var(--roboto);
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    text-align: left;
    color: #343640
}

.CEO-massage {
    padding-left: 72px;
    padding-right: 72px
}

.ceo-messageText {
    color: #4A5F98;
    font-weight: 400
}

.ceo-messageText span {
    color: #4A5F98;
    font-weight: 600
}

.give-back {
    background-color: var(--give-backSection)
}

.give-back1.lazybg {
    background-image: none;
    background-color: #c99f62
}

.give-back2.lazybg {
    background-image: none;
    background-color: #c99f62
}

.give-back3.lazybg {
    background-image: none;
    background-color: #c99f62
}

/* REMOVED: Redundant .jpg background-image declarations */
.give-back1 {
    background-image: url("../media/warrierNGO.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
    height: 265px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.give-back2 {
    background-image: url("../media/humansNGO.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
    height: 265px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.give-back3 {
    background-image: url("../media/dreamNGO.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
    height: 265px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.services.lazybg {
    background-image: none;
    background-color: #272D3A
}

.services {
    background-image: url("../media/imageFooter.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -10
}

.services-list {
    list-style-type: none
}

.services-list li {
    background-image: url("../media/n-check-Icon.svg");
    background-repeat: no-repeat;
    position: relative;
    background-position: 0% 6%;
    padding: 4px 0px 16px 48px
}

.services-list::marker {
    position: absolute;
    top: 50px
}

.footer-btns {
    background-color: var(--footer-btnSection)
}

footer {
    background-color: var(--footer)
}

.footer-text {
    color: #D9DFEC;
    line-height: 130%
}

.footer-textSmall {
    color: #CBDDEC;
    line-height: 125%
}

.copyRight {
    background-color: var(--footer)
}

.link {
    text-decoration: underline
}

.link:hover {
    color: #CBDDEC
}

.thanks {
    background-color: var(--primary-section-light)
}

.thanks h1 {
    color: var(--brand-blue-dark)
}

@media screen and (max-width: 991px) {
    .fs-9 {
        font-size: 9px
    }

    .fs-11 {
        font-size: 11px
    }

    .fs-12 {
        font-size: 12px
    }

    .fs-13 {
        font-size: 13px
    }

    .fs-16 {
        font-size: 16px
    }

    .fs-19 {
        font-size: 16px
    }

    .fs-20 {
        font-size: 19px
    }

    .fs-21 {
        font-size: 19px
    }

    .fs-24 {
        font-size: 20px
    }

    .fs-32 {
        font-size: 28px
    }

    .fs-40 {
        font-size: 33px
    }

    .fs-48 {
        font-size: 40px
    }

    .table-hide {
        display: none
    }

    .mobile-table {
        display: block
    }

    .desktop-logo {
        display: none
    }

    .mobile-logo {
        display: block
    }

    .top-destop-btn {
        display: none
    }

    .top-mobile-btn {
        display: block
    }

    .ceo-img-mobile {
        position: inherit !important
    }

    .tablet-badge {
        padding-top: 24px !important
    }

    .step-1,
    .step-2,
    .step-3 {
        height: 235px
    }

    .mobile-video {
        padding-bottom: 24px
    }

    .step-3 {
        margin-top: 96px !important
    }

    .give-back1,
    .give-back2,
    .give-back3 {
        height: 254px
    }

    .give-back3 {
        margin-top: 36px
    }

    .mobile-w-100 {
        width: 100%
    }

    .badge-section .container {
        padding: 0px !important
    }

    .table-bgHeading1 {
        font-size: 16px
    }

    .table-bgHeading2 {
        font-size: 16px
    }

    .table-bgHeading3 {
        font-size: 16px
    }

    .table-dataText1 {
        font-size: 16px
    }

    .table-dataText2 {
        font-size: 16px
    }

    .table-dataText3 {
        font-size: 16px
    }

    .mobile-marginLeft {
        margin-left: 28px
    }

    .customerHeading::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 50px;
        bottom: -35px;
        right: -40px;
        background-image: url(../media/arrowTestimonials.svg);
        background-repeat: no-repeat;
        background-position: bottom right
    }
}

@media screen and (max-width: 767px) {
    .fs-9 {
        font-size: 9px
    }

    .fs-11 {
        font-size: 11px
    }

    .fs-13 {
        font-size: 11px
    }

    .fs-16 {
        font-size: 15px
    }

    .fs-19 {
        font-size: 16px
    }

    .fs-20 {
        font-size: 16px
    }

    .fs-21 {
        font-size: 17px
    }

    .fs-24 {
        font-size: 19px
    }

    .fs-32 {
        font-size: 24px
    }

    .fs-40 {
        font-size: 28px
    }

    .fs-48 {
        font-size: 33px
    }

    .table-hide {
        display: none
    }

    /* BEST PRACTICE: This is a very broad selector. Consider using a more
      specific class to avoid accidentally removing borders from all sections. 
    */
    section {
        border: none
    }

    .ceo-messageText {
        padding-bottom: 0px !important
    }

    .CEO-massage {
        padding-left: 24px !important;
        padding-right: 24px !important
    }

    .form-col-mobile {
        padding: 0px !important
    }

    .mobile-badge {
        padding-bottom: 24px !important
    }

    .tablet-badge {
        padding-top: 0px !important;
        padding-bottom: 24px !important
    }

    .step-1,
    .step-2,
    .step-3 {
        height: 235px
    }

    .step-2 {
        margin-top: 96px !important
    }

    .give-back2 {
        margin-top: 36px
    }

    .top-mobile-btn {
        margin-top: 24px
    }

    .phone-btn-footer {
        max-width: 100% !important;
        margin-top: 30px
    }

    .footerTextMobile {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .mobli-last-footer {
        justify-content: center;
        display: flex
    }

    .table-bgHeading1 {
        font-size: 16px
    }

    .table-bgHeading2 {
        font-size: 15px
    }

    .table-bgHeading3 {
        font-size: 15px
    }

    .table-dataText1 {
        font-size: 15px
    }

    .table-dataText2 {
        font-size: 15px
    }

    .table-dataText3 {
        font-size: 15px
    }

    .mobile-padding-all {
        padding-left: 24px !important;
        padding-right: 24px !important
    }

    .mobile-padding-t-none {
        padding-top: 0px !important
    }

    .mobile-padding12 {
        padding-left: 12px
    }

    .f-btn-text {
        padding: 6px 0px
    }
}

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

    .step-1,
    .step-2,
    .step-3 {
        margin-left: 0px !important;
        margin-right: 0px !important
    }

    .give-back1,
    .give-back2,
    .give-back3 {
        margin-left: 0px !important;
        margin-right: 0px !important
    }
}

@media screen and (max-width: 1024px) {
    .ceo-messageText {
        font-size: 16px
    }

    .ipad-pro {
        padding-top: 64px !important
    }

    .ipad-pro-text {
        padding-bottom: 36px !important
    }
}

@media screen and (max-width: 435px) {
    .table>:not(caption)>*>* {
        padding: 12px 3px !important
    }

    .rad-text {
        font-size: 16px
    }
}

@media screen and (max-width: 350px) {
    .table-bgHeading1 {
        font-size: 14px !important
    }

    .table-bgHeading2 {
        font-size: 13px !important
    }

    .table-bgHeading3 {
        font-size: 13px !important
    }

    .table-dataText1 {
        font-size: 13px !important
    }

    .table-dataText2 {
        font-size: 13px !important
    }

    .table-dataText3 {
        font-size: 13px !important
    }

    .table>:not(caption)>*>* {
        padding: 3px 2px !important
    }

    .rad-text {
        font-size: 14px
    }

    .footerLogo {
        width: 100%
    }
}