@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,700&display=swap');

/*pre-set styles*/

html,
body {
    width: 100%;
    height: auto;
    background-color: white;
    font-family: 'Kanit', sans-serif;
    min-height: 100%;
}

html {
    height: 100%;
}

ul,
li {
    text-decoration: none;
    list-style-type: none;
}

h1 {
    font-family: 'Kanit', sans-serif;
    font-size: 52px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: 3.9px;
    text-transform: uppercase;
}

h2 {
    font-family: 'Kanit', sans-serif;
    font-size: 42px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.02;
    letter-spacing: 2px;
    text-transform: uppercase;
}

h3 {
    font-family: 'Kanit', sans-serif;
    font-size: 32px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.34;
    letter-spacing: 1.52px;
    text-transform: uppercase;
}

h4 {
    font-family: 'Kanit', sans-serif;
    font-size: 26px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: 1.24px;
    text-transform: uppercase;
}

h5 {
    font-family: 'Kanit', sans-serif;
    font-size: 22px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.27;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}

h6 {
    font-family: 'Kanit', sans-serif;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.95px;
}

.col-grey {
    color: #A3A3A3;
}

.col-lightPurple {
    color: #AA99C8 !important;
}

p {
    font-family: 'Kanit', sans-serif;
    font-size: 18px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
}

p.services {
    color: #3E4096;
}

.thumb-grow {
    transition: all .2s ease-in-out;
}

.thumb-grow:hover {
    transform: scale(1.01);
    text-decoration: none;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.force-w100 {
    width: 100% !important;
    max-width: 100% !important;
}

.force-w90 {
    width: 90% !important;
    max-width: 90% !important;
}

.force-w80 {
    width: 80% !important;
    max-width: 80% !important;
}


/*Navigation Bar*/

.top-nav h6 {
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.35px;
    color: #000000;
    text-transform: uppercase;
}

a.tel {
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.35px;
    color: #3e4096 !important;
}

.btn-primary {
    cursor: pointer;
    background-color: #3E4096;
    border-radius: 10px;
    border: none;
    color: #ffffff !important;
    font-size: 14px;
    line-height: 35px;
    font-weight: 400;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}

.btn-primary:hover {
    background-color: #2A2B68;
    transform: scale(1.05);
}

.btn-primary:active {
    border: none !important;
    background-color: #2A2B68 !important;
    transform: scale(1.05);
}

.btn-secondary {
    cursor: pointer;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    background-color: #ffffff;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-align: center;
    color: #000000;
    padding: 10px 30px 10px 30px;
    line-height: 34px;
    transition: all .2s ease-in-out;
}

.btn-secondary:hover {
    border-color: #3E4096;
    background-color: #3E4096;
    transform: scale(1.07);
    text-decoration: none;
    color: white !important;
}

.btn-secondary:active {
    border-color: #3E4096 !important;
    background-color: #3E4096 !important;
}

.btn-secondary-orange {
    cursor: pointer;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    background-color: #ffaa20;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-align: center;
    color: #000000;
    padding: 10px 30px 10px 30px;
    line-height: 34px;
    transition: all .2s ease-in-out;
}

.btn-secondary-orange:hover {
    border-color: #3E4096;
    background-color: #3E4096;
    transform: scale(1.07);
    text-decoration: none;
    color: #ffffff;
}

.btn-instagram {
    cursor: pointer;
    border-radius: 10px;
    background: -moz-linear-gradient(right, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background: -webkit-gradient(right top, right top, color-stop(0%, rgba(151, 56, 163, 1)), color-stop(51%, rgba(226, 82, 104, 1)), color-stop(100%, rgba(250, 145, 32, 1)));
    background: -webkit-linear-gradient(right, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background: -o-linear-gradient(right, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background: -ms-linear-gradient(right, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background: linear-gradient(to left, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    transition: all .2s ease-in-out;
    padding: 10px 30px 10px 30px;
    line-height: 34px;
}

.btn-instagram:hover {
    transform: scale(1.07);
    text-decoration: none;
    color: white;
}

.btn-facebook {
    cursor: pointer;
    border-radius: 10px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #3c5a9a;
    transition: all .2s ease-in-out;
    padding: 10px 30px 10px 30px;
    line-height: 34px;
}

.btn-facebook:hover {
    transform: scale(1.07);
    text-decoration: none;
    color: white;
}

.top-navbar {
    height: 126px;
}

.top-logo {
    max-width: 300px;
}

.donation-logo {
    width: 26px;
    height: 30px;
}

ul.toplink-navbar-nav {
    padding: 0px;
    float: right;
}

ul.toplink-navbar-nav li {
    float: left;
}

.main-nav {
    background-image: linear-gradient(91deg, #3e4096 8%, #723ba3 130%);
}

ul.main-navbar-nav {
    width: 100%;
}

ul.main-navbar-nav li {
    padding: 0px;
    width: 100%;
}

ul.main-navbar-nav li a {
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: 1.05px;
    text-transform: uppercase;
    color: #ffffff;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: transparent !important;
}

.dropdown-menu {
    padding-bottom: 20px;
    border-radius: 3%;
}

.dropdown-menu .btn {
    margin-left: 5% !important;
    margin-right: 5% !important;
}

.dropdown-btn:hover {
    background-color: #2A2B68 !important;
}

.dropdown-item {
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: #3e4096 !important;
}


/*Index Page*/


/*Home Container*/

.hero-home {
    background-image: url(../images/pattern-25@2x.png);
    background-color: #261437;
    max-height: 954px;
}

.carousel {
    width: 100%;
}

.moved-carousel {
    background-image: url(../images/moved@2x.jpg);
}

.covid-carousel {
    background-image: url(../images/covid-19@2x.jpg);
}

.childhood-development-carousel {
    background-image: url(../images/childhood-development@2x.jpg);
}

.humble-beginnings-carousel {
    background-image: url(../images/humble-beginnings-carousel@2x.png);
}

.ecd-carousel {
    background-image: url(../images/changing-lives.png);
}

.success-stories-carousel {
    background-image: url(../images/touched-lives-carousel@2x.png);
}

.carousel-item {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.carousel-item h1 {
    max-width: 505px;
    margin-bottom: 25px;
    color: #ffffff;
}

.carousel-item p {
    max-width: 417px;
    margin-bottom: 30px;
    color: #ffffff;
}

.card-donation {
    margin-left: auto;
    margin-right: auto;
    min-height: 360px !important;
    background-image: url(../images/holding-hands@2x.png);
    background-repeat: no-repeat;
    background-position: 130px -15px;
    background-size: 423px 204px;
    background-color: #543c7c;
}

.card-donation h2 {
    color: #ffffff;
}

.card-donation p {
    margin-top: 14px;
    margin-bottom: 34px;
}

.card-stories {
    margin-left: auto;
    margin-right: auto;
    min-height: 360px !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/success-stories@2x.png);
}

.card-stories h2 {
    color: #ffffff;
}

.card-stories p {
    margin-top: 14px;
    margin-bottom: 34px;
}

.card-report {
    background-image: url(../images/annual-report-image.png), url(../images/pattern-50@2x.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #543c7c;
}

.card-ecd {
    background-image: url(../images/since@2x.png), url(../images/pattern-50@2x.png);
    background-position: right top 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #20215e;
}

.card-heroes {
    background-image: url(../images/pattern-50@2x.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #323581;
}

@media only screen and (max-width: 991px) {
    .card-stories .btn {
        position: relative;
        margin-top: 15px;
        left: inherit !important;
    }
    .card-heroes .btn {
        position: relative;
        margin-top: 15px;
        bottom: 0px;
    }
}

@media only screen and (min-width: 992px) {
    .card-heroes {
        background-image: url(../images/ecd-heroes.png), url(../images/pattern-50@2x.png);
        background-position: right -30px top, left top;
        background-repeat: no-repeat;
        background-size: contain, cover;
    }
}

.cards.card-ecd a {
    bottom: 50px;
}

.what-we-do h1 {
    margin-top: 10px;
    color: #3e4096;
    text-align: center;
}

.what-we-do h2 {
    text-align: center;
    color: #000000;
    text-decoration: none;
}

.what-we-do h4 {
    margin-top: 10px;
    text-align: center;
    color: #000000;
}

.what-we-do p {
    margin-left: auto;
    margin-right: auto;
    max-width: 495px;
    margin-top: 20px;
    text-align: center;
    color: #676767;
}

.icon {
    max-width: 130px;
    max-height: 132px;
}

.card-board {
    margin-left: auto;
    margin-right: auto;
    min-height: 360px !important;
    background-image: url(../images/board@2x.png);
    background-repeat: no-repeat;
    background-size: 420px;
    background-position: right bottom;
    background-color: #A880A6;
}

.card-board h2 {
    color: #ffffff;
}

.card-board p {
    margin-top: 14px;
    margin-bottom: 34px;
}

.card-staff {
    background-image: url(../images/do-more-foundation-logo@2x.png), url(../images/pattern-50@2x.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #595a99;
}

.card-staff h2 {
    color: #ffffff;
}

.card-staff p {
    margin-top: 20px;
}

.card-standard-bank {
    background: linear-gradient(45deg, rgba(0, 57, 92, 1) 0%, rgba(0, 113, 184, 1) 100%);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

.card-standard-bank h2,
.card-heroes h2 {
    color: #ffffff;
}

.card-standard-bank p {
    margin-top: 20px;
}

.card-since {
    background-image: url(../images/time-1986@2x.png), url(../images/pattern-50@2x.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #543c7c;
}

.card-since h2 {
    color: #ffffff;
}

.card-since p {
    margin-top: 20px;
}

.changing-lives {
    background-image: url(../images/changing-lives.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.changing-lives-content h2 {
    color: #ffffff;
}

.changing-lives-content p {
    max-width: 556px;
    margin-top: 30px;
    color: #ffffff;
}

.our-programmes {
    border-radius: 40px;
    box-shadow: 0 2px 24px 10px rgba(0, 0, 0, 0.09);
    background-color: #ffffff;
}

.our-programmes-heading h3 {
    float: left;
    color: #000000;
}

.btn-outline-primary {
    cursor: pointer;
    float: right;
    text-transform: uppercase;
    border-color: #3e4096;
    border-radius: 10px;
    background-color: none;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-align: center;
    color: #3e4096 !important;
    padding: 10px 30px 10px 30px;
    line-height: 34px;
    transition: all .2s ease-in-out;
}

.btn-outline-primary:hover {
    border-color: #3e4096;
    background-color: #3e4096;
    color: #ffffff !important;
    transform: scale(1.07);
    text-decoration: none;
}

.btn-outline-primary:active {
    border-color: #3e4096 !important;
    background-color: #3e4096 !important;
}

.program {
    margin-left: 10px;
    margin-right: 10px;
    background-repeat: no-repeat;
    padding: 30px;
    border-radius: 30px;
}

.program-content {
    max-width: 267px;
    position: absolute;
    bottom: 30px;
}

.program-content h5 {
    margin-bottom: 24px;
    color: #ffffff;
}

.program-1 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program1.jpg);
    background-size: cover;
}

.program-2 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program2.jpg);
    background-size: cover;
}

.program-3 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program3.jpg);
    background-size: cover;
}

.program-4 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program4.jpg);
    background-size: cover;
}

.program-5 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program5.jpg);
    background-size: cover;
}

.program-6 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program6.jpg);
    background-size: cover;
}

.program-7 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program7.jpg);
    background-size: cover;
}

.program-8 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program8.jpg);
    background-size: cover;
}

.program-8 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program8.jpg);
    background-size: cover;
}

.program-9 {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program9.jpg);
    background-position: -140px 0px;
    background-size: cover;
}

.helping-hand-content img {
    max-width: 70px;
    max-height: 90px;
    margin-bottom: 41px;
}

.helping-hand-content h2 {
    text-align: center;
    color: #000000;
    margin-bottom: 20px;
}

.helping-hand-content p {
    max-width: 556px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #676767;
}

.helping-hand-content a {
    width: 232px;
    height: 46px;
}

.image-slider img {
    width: 320px;
    height: 320px;
}

.donate-content img {
    max-width: 330px;
    max-height: 89px;
    margin-bottom: 46px;
}

.donate-content h2 {
    max-width: 448px;
    color: #000000;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.donate-content p {
    max-width: 630px;
    margin-top: 26px;
    color: #676767;
    margin-left: auto;
    margin-right: auto;
}

.donate-content a {
    margin-top: 30px;
    width: 232px;
    height: 46px;
}

.card-acollades {
    min-height: 400px !important;
    background-image: url(../images/accolades-star.svg), url(../images/pattern-50@2x.png);
    background-position: 50px 50px;
    background-repeat: no-repeat;
    background-color: #20215e;
}

.card-acollades h2 {
    color: #ffffff;
}

.card-acollades p {
    max-width: 350px;
}

.card-funders {
    min-height: 400px !important;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #543c7c;
    background-image: url(../images/pattern-50@2x.png);
}

.card-funders h2 {
    color: #ffffff;
}

.card-funders p {
    max-width: 450px;
}

.exciting-future {
    border-radius: 30px;
    background-image: url(../images/exciting-future@2x.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.exciting-future-content h1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 505px;
    margin-bottom: 28px;
    color: #000000;
}

.exciting-future-content p {
    margin-left: auto;
    margin-right: auto;
    max-width: 556px;
    margin-bottom: 41px;
    color: #000000;
}


/*Our-Story Page*/

.making-differences {
    background-image: url(../images/making-differences@2x.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.making-differences h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #ffffff;
}

.who-we-are h1 {
    color: #000000;
}

.who-we-are h6 {
    color: #3e4096;
    text-transform: uppercase;
}

.who-we-are p {
    max-width: 480px;
    margin-top: 17px;
    color: #676767;
}

.who-we-are img {
    margin-left: auto;
    margin-right: auto;
}

.card-programmes {
    margin-left: auto;
    margin-right: auto;
    min-height: 360px !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/graduation-hat.svg), url(../images/pattern-50@2x.png);
    background-position: 50px 30px;
    background-size: 990px 300px;
    background-color: #20215e;
}

.card-programmes h2 {
    color: #ffffff;
}

.card-programmes p {
    margin-top: 14px;
    margin-bottom: 34px;
}

.our-funders {
    margin-top: 120px;
    margin-bottom: 130px;
}

.our-funders h2 {
    text-align: center;
    color: #000000;
}

.our-funders p {
    max-width: 552px;
    margin-top: 10px;
    margin-bottom: 64px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #676767;
}

.funders-list img {
    margin-bottom: 30px;
}

.operational-area {
    background-color: #f4f4ff;
    min-height: 860px;
    padding-top: 90px;
    margin-bottom: 90px;
    padding-bottom: 90px;
}

.operational-area h2 {
    color: #000000;
}

.operational-area p {
    margin-bottom: 20px;
    color: #676767;
}

.honours img {
    max-width: 105px;
    max-height: 122px;
}

.honours h4 {
    margin-top: 18px;
    text-align: center;
    color: #000000;
}

.honours p {
    max-width: 540px;
    margin-top: 17px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #676767;
}

.honours .honours-description h6 {
    margin-top: 34px;
    text-align: center;
    color: #000000;
    text-transform: uppercase;
}

.honours-slider {
    margin-top: 61px;
}

.honours-slider img {
    margin-left: auto;
    margin-right: auto;
    width: 40px;
    height: 40px;
}

.honours-slider h5 {
    margin-top: 10px;
    text-align: center;
    color: #e37a09;
}

.honours-slider h6 {
    margin-left: 13px;
    margin-right: 13px;
    text-align: center;
    color: #000000;
}

.our-staff {
    background-color: #f4f4ff;
    background-image: url(../images/the-team.png);
    background-position: bottom;
    background-repeat: no-repeat;
}

.our-staff .row {
    display: inherit;
    width: inherit;
}

.our-staff h2 {
    text-align: center;
    color: #000000;
}

.our-staff p {
    max-width: 490px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #676767;
}


/* The actual timeline (the vertical ruler) */

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
}


/* The actual timeline (the vertical ruler) */

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #20215e;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}


/* Container around content */

.timeline .timeline-container {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}


/* The circles on the timeline */

.timeline .timeline-container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -20px;
    background-color: white;
    border: 4px solid #20215e;
    top: 0px;
    border-radius: 50%;
    z-index: 1;
}

.timeline-content img {
    border-radius: 30px;
}


/* Place the container to the left */

.left {
    text-align: right;
    left: -0.7%;
}


/* Place the container to the right */

.right {
    text-align: left;
    left: 50%;
}


/* Fix the circle for containers on the right side */

.right::after {
    left: -13px;
}


/* The actual content */

.timeline .timeline-container .timeline-content {
    background-color: transparent;
    position: relative;
    border-radius: 6px;
    margin-top: -15px;
}

.rich-history-header h2 {
    margin-bottom: 60px;
    text-align: center;
    color: #000000;
    text-transform: uppercase;
}

.rich-history h5 {
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: 1.52px;
}

.rich-history div.text-right {
    border-right: solid 1px #20215e;
    padding-right: 45px;
    padding-top: 437px;
}

.rich-history div.text-left {
    border-left: solid 1px #20215e;
    padding-left: 45px;
}

.rich-history h3 {
    color: #543c7c;
}

.rich-history h4 {
    color: #000000;
}

.rich-history p {
    max-width: 465px;
    margin-top: 20px;
    color: #676767;
}

.rich-history img {
    resize: inherit;
}


/*Programmes Page*/

.changing-lives-2 {
    background-image: url(../images/changing-lives-2@2x.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.changing-lives-2 h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #ffffff;
}

.ecd h1 {
    color: #000000;
}

.ecd p {
    color: #676767;
}

.programmes {
    padding-left: 30px;
    padding-right: 30px;
}

.programmes div.row {
    margin-bottom: 40px;
    border-radius: 30px;
    background-color: #f4f4ff;
}

.programmes div.row div:nth-child(2) {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}

.programmes div.card-mini {
    background-repeat: no-repeat;
}

.programmes div.one {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program1.jpg);
    background-size: cover;
}

.programmes div.two {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program2.jpg);
}

.programmes div.three {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program3.jpg);
    background-size: cover;
}

.programmes div.four {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program4.jpg);
    background-size: cover;
}

.programmes div.five {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program5.jpg);
    background-size: cover;
}

.programmes div.six {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program6.jpg);
    background-size: cover;
}

.programmes div.seven {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program7.jpg);
    background-size: cover;
}

.programmes div.eight {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program8.jpg);
    background-size: cover;
}

.programmes div.nine {
    background: -moz-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -webkit-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -o-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: -ms-linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 26%);
    background: linear-gradient(180deg, rgba(62, 64, 150, 0) 0%, rgba(62, 64, 150, 0.78) 98%), url(../images/program9.jpg);
    background-size: cover;
}

.programmes h4 {
    color: #000000;
}

.programmes p {
    color: #676767;
}


/*Success Stories Page*/

.touched-lives {
    background-image: url(../images/touched-lives@2x.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.touched-lives h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #ffffff;
}

.success-stories h1 {
    color: #000000;
}

.success-stories p {
    margin-top: 10px;
    margin-bottom: 17px;
    color: #676767;
}

.feedback h2 {
    color: #ffffff;
}

.feedback h3 {
    font-size: 30px;
    color: #ffffff;
}

.feedback p {
    color: #ffffff;
}

.feedback .grid {
    width: 100%;
    display: grid;
    grid-gap: 30px;
}

.feedback .grid .item {
    min-height: 400px;
    padding: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.feedback .grid .item1 {
    width: 650px;
    grid-column: 1/3;
    background-image: url(../images/card-story-1@2x.jpg);
}

.feedback .grid .item2 {
    margin-left: -134px;
    width: 458px;
    grid-column: 3/4;
    background-image: url(../images/card-story-2@2x.jpg);
}

.feedback .grid .item3 {
    width: 430px;
    grid-column: 1/2;
    background-image: url(../images/card-makhosazana-ndaba@2x.jpg);
}

.feedback .grid .item4 {
    width: 325px;
    grid-column: 2/3;
    background-image: url(../images/card-mildred-mkhatshwa@2x.jpg);
}

.feedback .grid .item5 {
    width: 325px;
    grid-column: 3/4;
    background-image: url(../images/card-hlobisile-nkosi@2x.jpg);
}

.feedback .grid .item6 {
    width: 270px;
    grid-column: 1/2;
    background-image: url(../images/card-nompumelelo_nkosi@2x.jpg);
}

.feedback .grid .item7 {
    margin-left: -170px;
    width: 270px;
    grid-column: 2/3;
    background-image: url(../images/card-may-mhlongo@2x.jpg);
}

.feedback .grid .item8 {
    margin-left: -235px;
    width: 270px;
    grid-column: 3/4;
    background-image: url(../images/card-nompumelelo-maluka@2x.jpg);
}

.feedback .grid .item9 {
    margin-left: -300px;
    width: 270px;
    grid-column: 4/5;
    background-image: url(../images/card-bonga-muziwethu-masina@2x.jpg);
}

.item .inner-container {
    position: absolute;
    bottom: 30px;
    width: 80%;
}

.tell-story-content img {
    max-width: 70px;
    max-height: 100px;
    margin-bottom: 18px;
}

.tell-story-content h4 {
    text-align: center;
    color: #000000;
    margin-bottom: 17px;
}

.tell-story-content p {
    max-width: 544px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #676767;
}

.tell-story-content a {
    margin-top: 30px;
    width: 232px;
    height: 46px;
}

.humble-beginnings {
    background-color: #f4f4ff;
}

.humble-beginnings .humble-beginning-content img {
    max-width: 289px;
    max-height: 410px;
}

.humble-beginnings .humble-beginning-content h2 {
    margin-top: 47px;
    font-size: 42px;
    color: #000000;
}

.humble-beginnings p {
    margin-bottom: 20px;
    color: #676767;
}


/*Contact Us Page*/

.contact_us {
    padding-top: 80px;
    padding-bottom: 196px;
    background-color: #f4f4ff;
}

.contact_us_heading {
    margin-bottom: 80px;
    text-align: center;
}

.contact_us h1 {
    margin-bottom: 50px;
    color: #000000;
}

.contact_us h2 {
    margin-bottom: 50px;
    color: #000000;
}

.contact_us h4 {
    color: #000000;
    text-align: center;
}

.contact_us_heading h4 {
    margin-bottom: 10px;
}

.contact_us p {
    font-size: 18px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
}

.contact_us_heading a {
    margin-bottom: 80px;
    width: 232px;
}

.contact_us form {
    margin-top: 62px;
    margin-bottom: 120px;
    margin-left: auto;
    margin-right: auto;
    max-width: 555px;
}

.contact_us_form h4 {
    max-width: 410px;
    margin-left: auto;
    margin-right: auto;
}

.contact_us_form label {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.2px;
    color: #20215e;
}

input,
select {
    height: 60px !important;
}

::placeholder {
    font-family: 'Kanit' !important;
    font-size: 18px !important;
    font-weight: normal !important;
    font-stretch: normal !important;
    font-style: normal !important;
    line-height: center !important;
    letter-spacing: 1.35px !important;
    color: rgba(32, 33, 94, 0.55) !important;
}

.contact_us_form input {
    color: #3e4096;
    border-radius: 10px;
    border: none;
}

select {
    /* styling */
    background-color: white;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.contact_us_form select {
    border-radius: 10px;
    color: #3e4096;
    border: none;
    background-image: linear-gradient(45deg, transparent 50%, #3e4096 50%), linear-gradient(135deg, #3e4096 50%, transparent 50%), linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 20px) calc(1.6em + 2px), calc(100% - 15px) calc(1.6em + 2px), 100% 0;
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
}

.contact_us_form select:focus {
    background-image: linear-gradient(45deg, gray 50%, transparent 50%), linear-gradient(135deg, transparent 50%, gray 50%), linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 15px) 1.6em, calc(100% - 20px) 1.6em, 100% 0;
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: grey;
    outline: 0;
}

.contact_us_form textarea {
    color: #3e4096;
    border-radius: 10px;
    border: none;
}

.contact_us_form .form-group a {
    min-width: 555px !important;
}

.card-heading {
    text-align: center;
}

.card-location {
    background-repeat: no-repeat;
    background-image: url(../images/location@3x.png);
    background-size: cover;
}

.card-location h2 {
    margin-bottom: 20px;
    color: #ffffff;
}

.card-facebook {
    background-repeat: no-repeat;
    background-color: #3c5a9a;
    background-position: right;
    background-image: url(../images/facebook-like.svg), url(../images/pattern-50@2x.png);
    background-size: contain;
}

.card-facebook h2 {
    margin-bottom: 20px;
    color: #ffffff;
}

.card-facebook a {
    position: absolute;
    bottom: 30px;
}

.card-instagram {
    background: -moz-linear-gradient(right, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background: -webkit-gradient(right top, right top, color-stop(0%, rgba(151, 56, 163, 1)), color-stop(51%, rgba(226, 82, 104, 1)), color-stop(100%, rgba(250, 145, 32, 1)));
    background: -webkit-linear-gradient(right, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background: -o-linear-gradient(right, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background: -ms-linear-gradient(right, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background: url(../images/instagram-like.svg), url(../images/pattern-50@2x.png), linear-gradient(to left, rgba(151, 56, 163, 1) 0%, rgba(226, 82, 104, 1) 51%, rgba(250, 145, 32, 1) 100%);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
}

.card-instagram h2 {
    margin-bottom: 20px;
    color: #ffffff;
}

.card-instagram h2 a {
    position: absolute;
    bottom: 30px;
}


/*Modals*/


/*General Styling*/

.modal {
    overflow-y: auto;
}

.modal-content {
    padding: 20px;
    border-radius: 30px 30px 30px 30px;
    border: none !important;
}

.close-content img {
    max-width: 30px;
    max-height: 30px;
}

.modal-header {
    border-bottom: none;
    margin-left: auto;
    margin-right: auto;
}

.modal-header h4 {
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: 1.52px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
}

.modal-body h6 {
    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.95px;
    color: #543c7c;
    text-transform: uppercase;
}

.modal-footer {
    text-align: center;
    border-top: none;
}

.modal-footer p {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: 0.67px;
    text-align: center;
    color: #ffffff;
}


/*Donation Modal Styling*/

.modal-body h6 {
    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.95px;
    color: #543c7c;
    text-transform: uppercase;
}

.modal-content {
    border: none !important;
}

.purpleModal .modal-content {
    background-color: #543c7c;
}

.donationModal .modal-content {
    background-position: 20px -70px;
    background-size: 450px 354px;
    background-image: url(../images/stars.svg);
    background-repeat: no-repeat;
    background-color: #543c7c;
}

#donationModal .modal-body p {
    padding-right: 10px;
    font-size: 15px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: #676767;
}

a.modal-btn {
    font-family: 'Kanit', sans-serif;
    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.95px;
    color: #543c7c;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 5px rgba(32, 33, 94, 0.26);
    background-color: #f4f4ff;
    text-decoration: none;
    min-height: 100px;
    height: auto;
    width: 100%;
    padding: 15px;
}

a.modal-btn::after {
    content: url(../images/right.svg);
    float: right;
    margin-top: -48px;
}

a.modal-btn span {
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 18px;
    letter-spacing: normal;
    color: #676767;
    max-width: 80%;
    display: block;
    margin-top: 5px;
}


/*Volunteer Modal*/

.volunteerModal .modal-content {
    padding-bottom: 50px;
    text-align: center;
    background-position: 0px 95px;
    background-image: url(../images/modal-chain.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #20215e;
}

.volunteerModal p {
    margin-bottom: 80px;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.22;
    letter-spacing: 0.86px;
    text-align: center;
    color: #ffffff;
}

.volunteerModal a {
    margin-bottom: 20px;
    min-width: 316px;
}


/*Helping Hand Modal*/

#helpinghandModal .modal-content {
    background-position: 0px 95px;
    background-image: url(../images/modal-chain.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #20215e;
}

#helpinghandModal p {
    margin-bottom: 40px;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.22;
    letter-spacing: 0.86px;
    text-align: center;
    color: #ffffff;
}

#helpinghandModal .modal-content label {
    text-align: left;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.2px;
    color: #ffffff;
}

#helpinghandModal .modal-content a {
    min-width: 100% !important;
    color: #000000 !important;
    background-color: #a7aaff;
}


/*Payfast Modal*/

#payfastModal .modal-content {
    text-align: center;
}

#payfastModal .modal-content .modal-header img {
    max-width: 200px;
    max-height: 100px;
}

#payfastModal .modal-content h6 {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: 1.24px;
    color: #000000;
}

#payfastModal .modal-content p {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 18px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #676767;
}

#payfastModal .modal-content a {
    width: 232px;
}


/*Storie Modals*/

#firststoryModal .modal-content {
    background-image: url(../images/story-1@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#secondstoryModal .modal-content {
    background-image: url(../images/story-2@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#thirdstoryModal .modal-content {
    background-image: url(../images/story-makhosazana-ndaba@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#fourthstoryModal .modal-content {
    background-image: url(../images/story-mildred-mkhatshwa@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#fifthstoryModal .modal-content {
    background-image: url(../images/story-hlobisile-nkosi@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#sixthstoryModal .modal-content {
    background-image: url(../images/nompumelelo_nkosi@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#seventhstoryModal .modal-content {
    background-image: url(../images/may-mhlongo@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#eightstoryModal .modal-content {
    background-image: url(../images/nompumelelo-maluka@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

#ninthstoryModal .modal-content {
    background-image: url(../images/story-bonga-muziwethu-masina@2x.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

.storyModal .modal-header h4 {
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: 1.52px;
    text-align: center;
    color: #000000;
}

.storyModal .modal-content .modal-body {
    height: 600px;
}

.storyModal .modal-content .modal-body div.container {
    margin-bottom: 30px;
    background-color: #ffffff;
    position: absolute;
    left: 0px;
    max-height: 550px;
    overflow-y: scroll;
}

.storyModal .modal-content .modal-body h6 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.95px;
    color: #543c7c;
    text-align: center;
    text-transform: uppercase;
}

.storyModal .modal-content .modal-body p {
    font-size: 18px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: #676767;
}


/*Donation Success/Cancelled Page and Error Page*/

.donation-review-content:nth-child(1) img {
    margin-bottom: 46px;
}

.donation-review-content:nth-child(1) h2 {
    max-width: 448px;
    color: #000000;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.donation-review-content:nth-child(1) p {
    max-width: 630px;
    margin-top: 26px;
    color: #676767;
    margin-left: auto;
    margin-right: auto;
}

.donation-review-content:nth-child(1) a {
    margin-top: 30px;
    width: 232px;
    height: 46px;
}


/*Footer*/

.footer {
    background-color: #20215e;
}

.footer-tel {
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: 1.52px;
    color: #ffffff;
    text-decoration: none;
}

.footer-tel:hover {
    color: #aaacf9;
    text-decoration: none;
}

.footer-email {
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: 1.52px;
    color: #aaacf9;
}

.footer-email:hover {
    color: #ffffff;
    text-decoration: none;
}

ul.social-links {
    float: right;
    padding: 0px;
}

ul.social-links li {
    float: left;
    margin-left: 20px;
}

hr {
    background-color: #ffffff;
}

ul.footer-link {
    padding-left: 15px;
}

ul.footer-link li a {
    color: #ffffff;
    text-decoration: none;
}

ul.footer-link li a:hover {
    color: #aeb0fd;
}

ul.footer-link h5 {
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.35px;
    color: #aeb0fd;
    text-transform: uppercase;
}

.cards {
    padding: 30px;
    border-radius: 30px;
    height: 100%;
    min-height: 310px;
}

.cards a {
    position: absolute;
    bottom: 30px;
}

.cards h3 {
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: 1.52px;
    color: #ffffff;
    text-transform: uppercase;
}

.cards p {
    font-size: 18px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #ffffff;
}

.card-profile {
    background-image: url(../images/pattern-50@2x.png);
    background-size: contain;
    background-color: #543c7c;
}

.card-profile h3 {
    margin-bottom: 17px;
}

.card-profile p {
    margin-bottom: 51px;
}

.card-referance {
    background-image: url(../images/prefer-container-background@2x.png);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    background-color: #000000;
}

.card-referance h3 {
    margin-bottom: 15px;
}

.card-referance p {
    margin-top: 10px;
    margin-bottom: 60px;
}

.copyright {
    margin-top: 100px;
    padding-top: 29px;
    padding-bottom: 19px;
    background-color: #13143b;
    color: #ffffff;
}

.copyright a {
    text-decoration: none;
    color: #306EFF;
}

.copyright a:hover {
    text-decoration: none;
    color: #1589FF;
}

    /* Backdrop */
    .popup-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    /* Popup container */
    .popup {
      position: relative;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      max-width: 90%;
      max-height: 90%;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }

    /* Image */
    .popup img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* Close button */
    .popup-close {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #ff4d4d;
      color: white;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      text-align: center;
    }

    .popup-close:hover {
      background: #e60000;
    }