@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/inter/Inter-Bold.woff2) format("woff2"), url(/fonts/inter/Inter-Bold.woff) format("woff"), url(/fonts/inter/Inter-Bold.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/inter/Inter-Black.woff2) format("woff2"), url(/fonts/inter/Inter-Black.woff) format("woff"), url(/fonts/inter/Inter-Black.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/inter/Inter-ExtraBold.woff2) format("woff2"), url(/fonts/inter/Inter-ExtraBold.woff) format("woff"), url(/fonts/inter/Inter-ExtraBold.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/inter/Inter-Regular.woff2) format("woff2"), url(/fonts/inter/Inter-Regular.woff) format("woff"), url(/fonts/inter/Inter-Regular.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/inter/Inter-SemiBold.woff2) format("woff2"), url(/fonts/inter/Inter-SemiBold.woff) format("woff"), url(/fonts/inter/Inter-SemiBold.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 200;
    src: url(/fonts/inter/Inter-ExtraLight.woff2) format("woff2"), url(/fonts/inter/Inter-ExtraLight.woff) format("woff"), url(/fonts/inter/Inter-ExtraLight.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/inter/Inter-Light.woff2) format("woff2"), url(/fonts/inter/Inter-Light.woff) format("woff"), url(/fonts/inter/Inter-Light.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 100;
    src: url(/fonts/inter/Inter-Thin.woff2) format("woff2"), url(/fonts/inter/Inter-Thin.woff) format("woff"), url(/fonts/inter/Inter-Thin.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/inter/Inter-Medium.woff2) format("woff2"), url(/fonts/inter/Inter-Medium.woff) format("woff"), url(/fonts/inter/Inter-Medium.ttf) format("truetype")
}

.btn {
    align-items: center;
    background-color: #fe5f00;
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    justify-content: center;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (min-width: 568px) {
    .btn.mobile {
        display: none
    }
}

@media (max-width: 567.99px) {
    .btn.desktop {
        display: none
    }
}

.btn:hover {
    background-color: #983900;
    color: #fff
}

.btn:focus-visible {
    color: #fff;
    outline: 0
}

.btn.disabled, .btn:disabled {
    background-color: #fff;
    color: #fff;
    opacity: .8;
    pointer-events: none
}

.btn.btn-primary {
    height: 56px
}

@media (max-width: 567.99px) {
    .btn.btn-primary {
        width: 100%
    }
}

@media (min-width: 568px) {
    .btn.btn-primary {
        width: 212px
    }
}

.btn.btn-facebook {
    background-image: url(/img/facebook.svg);
    background-position-x: 15px;
    background-position-y: 15px;
    background-repeat: no-repeat;
    height: 56px;
    padding-left: 32px;
    width: 143px
}

@media (min-width: 1400px) {
    .container.front .col.slogan {
        max-width: 600px
    }

    .container.front {
        padding-bottom: 64px;
        padding-top: 64px
    }
}

@media (min-width: 1140px) and (max-width: 1399.99px) {
    .container.front .col.image, .container.front .col.slogan {
        max-width: 500px
    }

    .container.front {
        padding-bottom: 32px;
        padding-top: 32px
    }

}

@media (min-width: 1024px) and (max-width: 1139.99px) {
    .container.front .col.image, .container.front .col.slogan {
        max-width: 400px
    }

    .container.front {
        padding-bottom: 32px;
        padding-top: 32px
    }
}

@media (max-width: 400px) {
    .container.front .col.slogan img {
        width: 100%
    }
}

@media (max-width: 1024px) {
    .container.front .col.image {
        display: none
    }
}

.container.front .col.image img {
    width: 100%
}

.container.front .row {
    justify-content: space-between
}

.container.our-services .col {
    display: flex;
    flex-direction: column;
    max-width: 722px;
    text-align: center
}

.container.our-services .col, .container.our-services .row {
    align-items: center;
    justify-content: center
}

@media (min-width: 1024px) {
    .container.our-services .image {
        display: none
    }
}

@media (max-width: 699.99px) {
    .container.our-services .image {
        width: 100%
    }
}

.container.our-services .image img {
    width: 100%
}

.services {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-evenly
}

@media (max-width: 560px) {
    .services {
        background-image: url(/img/bg-wheelbarrow.svg);
        background-position-x: right;
        background-position-y: bottom;
        background-repeat: no-repeat
    }
}

a.service {
    color: #333;
    text-decoration: none
}

.service {
    align-items: stretch;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 1px 3px 22px 1px hsla(0, 4%, 61%, .2);
    -webkit-box-shadow: 1px 3px 22px 1px hsla(0, 4%, 61%, .2);
    -moz-box-shadow: 1px 3px 22px 1px hsla(0, 4%, 61%, .2);
    display: flex;
    flex-direction: column;
    font-weight: 600;
    justify-content: space-between;
    overflow: hidden
}

@media (max-width: 459.99px) {
    .service {
        font-size: 14px;
        height: 106px;
        width: 150px
    }
}

@media (min-width: 460px) and (max-width: 559.99px) {
    .service {
        font-size: 18px;
        height: 118px;
        width: 203px
    }
}

@media (min-width: 560px) and (max-width: 1023.99px) {
    .service {
        font-size: 18px;
        height: 130px;
        width: 223px
    }
}

@media (min-width: 1024px) {
    .service {
        font-size: 20px;
        height: 200px;
        width: 293px
    }
}

.service.bg-img {
    background-position-x: right;
    background-position-y: bottom;
    background-repeat: no-repeat
}

@media (max-width: 767.99px) {
    .service.bg-img {
        background-size: 50px
    }
}

@media (min-width: 768px) {
    .service.bg-img {
        background-size: 100px
    }
}

.service .r-first {
    display: flex;
    height: 20px;
    justify-content: start;
    padding: 10px
}

.service .r-middle {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    text-align: center
}

.service .r-last {
    align-items: baseline;
    display: flex;
    height: 20px;
    justify-content: end;
    padding: 10px
}

.service .dot {
    border-radius: 9px;
    display: block;
    height: 9px;
    width: 9px
}

.service .dot.green {
    background-color: #008640
}

.service .dot.orange {
    background-color: #fe5f00
}

.bg-img-blooming-pana-1-svg {
    background-image: url(/img/service/blooming-pana-1.svg)
}

.bg-img-blooming-rafiki-3-svg {
    background-image: url(/img/service/blooming-rafiki-3.svg)
}

.bg-img-environment-rafiki-1-svg {
    background-image: url(/img/service/environment-rafiki-1.svg)
}

.bg-img-gardening-amico-1-svg {
    background-image: url(/img/service/gardening-amico-1.svg)
}

.bg-img-gardening-bro-1-svg {
    background-image: url(/img/service/gardening-bro-1.svg)
}

.bg-img-gardening-pana-2-svg {
    background-image: url(/img/service/gardening-pana-2.svg)
}

.bg-img-seeding-rafiki-1-svg {
    background-image: url(/img/service/seeding-rafiki-1.svg)
}

.container.about-us .row.heading {
    align-items: center;
    justify-content: center;
    text-align: center
}

@media (min-width: 1024px) {
    .container.about-us .row.heading {
        padding-bottom: 64px;
        padding-top: 64px
    }
}

@media (max-width: 1023.99px) {
    .container.about-us .row.heading {
        padding-bottom: 48px;
        padding-top: 48px
    }
}

.container.about-us .row.about {
    flex-wrap: nowrap;
    gap: 30px;
    justify-content: space-between
}

@media (max-width: 1023.9px) {
    .container.about-us .row.about {
        flex-direction: column-reverse
    }
}

.container.about-us .row.about .col.image {
    align-items: baseline
}

@media (max-width: 1023.99px) {
    .container.about-us .row.about .col.image {
        flex-direction: column;
        gap: 10px
    }
}

@media (min-width: 1024px) {
    .container.about-us .row.about .col.image {
        max-width: 656px
    }
}

.container.about-us .row.about .col.image img {
    width: 100%
}

.container.about-us .row.about .col.text .h3 {
    margin-bottom: 16px
}

@media (min-width: 1024px) {
    .container.about-us .row.about .col.text {
        max-width: 568px
    }
}

.container.about-us .col.text {
    flex-direction: column
}

.container.about-us .col {
    display: flex
}

.field.not-validated .message {
    min-height: 20px;
    opacity: 0
}

.field.not-valid input {
    border-color: #fe2d2d
}

.field.validated input {
    border-color: #008640
}

.field.validated .message {
    opacity: 0
}

section.contact-us {
    background-position-x: right;
    background-repeat: no-repeat
}

@media (min-width: 1024px) {
    section.contact-us {
        background-image: url(/img/gardening-pana-2.svg);
        background-position-y: bottom
    }
}

@media (max-width: 1023.99px) {
    section.contact-us {
        background-image: url(/img/f-bg-blooming-rafiki-2.svg);
        background-position-y: top;
        background-size: 35%
    }
}

@media (min-width: 1024px) {
    section.contact-us {
        min-height: 640px
    }
}

@media (max-width: 1023.99px) {
    section.contact-us .col.heading {
        padding: 20px 50px;
        text-align: center;
        width: 100%
    }

    section.contact-us .col.heading img {
        display: none
    }

    section.contact-us .col.heading .h2 {
        margin-bottom: 20px
    }
}

@media (min-width: 1300px) and (max-width: 1450px) {
    section.contact-us .col.heading {
        max-width: 450px
    }

    section.contact-us .col.heading img {
        width: 450px
    }
}

@media (min-width: 1024px) and (max-width: 1299.99px) {
    section.contact-us .col.heading {
        max-width: 300px
    }

    section.contact-us .col.heading img {
        width: 300px
    }
}

section.contact-us .row {
    justify-content: space-between
}

@media (max-width: 700px) {
    section.contact-us .col.form {
        width: 100%
    }
}

@media (min-width: 1450px) {
    section.contact-us .col.form {
        width: 700px
    }
}

@media (min-width: 1024px) and (max-width: 1449.99px) {
    section.contact-us .col.form {
        width: 630px
    }
}

section.contact-us .col.form form {
    display: flex;
    flex-direction: column;
    width: 100%
}

section.contact-us .col.form form .field {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px
}

section.contact-us .col.form form .field label {
    margin-bottom: 8px
}

section.contact-us .col.form form .field .message {
    color: #fe2d2d
}

@media (min-width: 1024px) {
    section.contact-us .col.form form .field input {
        width: 100%
    }
}

@media (min-width: 700px) {
    section.contact-us .col.form form .input-group.message {
        width: 100%
    }
}

section.contact-us .col.form form .input-group.message textarea {
    min-height: 160px
}

section.contact-us .col.form form .input-group.inputs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width: 700px) {
    section.contact-us .col.form form .input-group.inputs {
        flex-direction: column
    }
}

section.contact-us .col.form form .input-group.inputs .field {
    align-items: stretch;
    display: flex;
    flex-direction: column
}

@media (min-width: 700px) {
    section.contact-us .col.form form .input-group.inputs .field {
        width: 300px
    }

    section.contact-us .col.form form .input-group.inputs .field input {
        width: 272px
    }
}

.title-block {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.title-block p {
    margin: 0
}

.title-block .h1, .title-block h1 {
    margin-bottom: 28px
}

section.gallery {
    padding-bottom: 64px;
    padding-top: 64px
}

section.gallery .heading {
    align-items: center;
    gap: 16px;
    justify-content: center;
    padding-bottom: 32px
}

footer, section.gallery .heading {
    display: flex;
    flex-direction: column
}

footer {
    background-color: #333;
    color: #fff;
    justify-content: space-between;
    padding-bottom: 46px;
    padding-top: 46px
}

@media (max-width: 306px) {
    footer {
        font-size: 14px
    }
}

@media (min-width: 306px) {
    footer {
        font-size: 18px
    }
}

footer .heading {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 40px
}

@media (max-width: 1023.99px) {
    footer .heading {
        text-align: center
    }
}

footer .contact-us {
    gap: 15px
}

footer .contact-us, footer .contact-us .contact {
    display: flex;
    flex-direction: column
}

footer .contact-us .contact span {
    color: #686868
}

footer .contact-us .contact a {
    display: block;
    padding-bottom: 6px;
    padding-top: 6px
}

footer .menu {
    align-items: center;
    display: flex
}

@media (min-width: 1024px) {
    footer .menu {
        justify-content: center
    }
}

@media (max-width: 1023.99px) {
    footer .menu {
        justify-content: space-between;
        margin-bottom: 50px
    }
}

footer .navbar-nav {
    align-items: center;
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0
}

@media (max-width: 1023.99px) {
    footer .navbar-nav {
        margin-left: -5px
    }
}

@media (min-width: 1024px) {
    footer .navbar-nav {
        gap: 11px
    }
}

footer .navbar-nav a {
    display: block;
    padding: 5px
}

@media (min-width: 1024px) {
    footer .navbar-nav a {
        font-weight: 700
    }
}

@media (max-width: 1023.99px) {
    footer .navbar-nav a {
        font-weight: 500
    }
}

@media (max-width: 306px) {
    footer .navbar-nav a {
        font-size: 14px
    }
}

@media (min-width: 306px) {
    footer .navbar-nav a {
        font-size: 18px
    }
}

footer a {
    color: #fff;
    text-decoration: none
}

.copyright {
    align-items: center;
    color: #686868;
    display: flex;
    justify-content: center;
    margin-top: 50px
}

@media (min-width: 1024px) {
    body.front-page {
        background-image: url(/img/seeding-rafiki-1.svg);
        background-position-x: -110px;
        background-position-y: 515px;
        background-repeat: no-repeat;
        background-size: 394px
    }
}