*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    user-select: none;
}

html{
    font-family: 'Nunito', sans-serif;
    font-size:10px;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

p{
    font-size: 1.6rem;
}

img{
    width:100%;
    max-width:100%;
    height: auto;
}

header{
    width:100%;
    height: 5rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

footer{
    position: relative;
    padding-top: 8.7rem;
    background-color: #1e0324 ;
    text-align: center;
    color: rgb(226, 226, 235);
}

footer::before{
    content: "";
    position: absolute;
    top: -3%;
    left: 0;
    width: 100%;
    height: 4.7rem;
    background: url("../images/wave-small-reversed.png") center no-repeat;
    background-size: cover;
}

footer .social-media ul, footer .address ul, footer .social-media, .something{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.something{
    flex-direction: column;
}

.line {
    width: 20%;
    border-bottom: .1px solid #be63f9;
}

footer svg{
    width: 25px;
    height: 25px;
    margin: 8px;
}

footer .image-container{
    width: 60px;
}

footer .grid{
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))
}

.copy-right{
    margin: 8px;
    font-size: 15px;
    color: rgba(255,255,255,.7);
}

.container{
    width:100%;
    padding:1.5rem;
}

nav{
    width:100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
}

.nav-brand {
    width: 5rem;
}

.nav-brand img{
    width: none;
    height: none;
}

.menu-icons i{
    font-size: 3.5rem;
    color:#fafafa;
    cursor: pointer;
}

.close i{
    color: #fd8700;
}

.nav-list{
    width:100%;
    height: 100%;
    background-color: #000;
    color: rgb(255, 174, 0);
    position: fixed;
    top:0;
    right: -100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 650ms ease-in-out;
    z-index:5;
}

.nav-list.active{
    right:0;
}

.close{
    position: absolute;
    top: 1rem;
    left: 1.5rem;
}

.nav-item{
    margin: 1.5rem 0;
    z-index: 6;
}

.nav-link{
    font-size: 1.6rem;
    text-transform: uppercase;
    color: rgb(255, 174, 0);
}

/* intro */
.intro{
    display: flex;
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 174, 0, 0.9) 0%, rgba(255, 174, 0, 0.8) 100%), url("../images/header-bg.jpg") center no-repeat;
    background-size: cover;
    position: relative;
}

.intro::after{
    content: "";
    position: absolute;
    bottom: -3%;
    left: 0;
    width: 100%;
    border-bottom: 0;
    height: 4.7rem;
    background: url("../images/wave-small.png") center no-repeat;
    background-size: cover;
}

.main-message{
    min-width: 50%;
    color: #fafafa;
    text-transform: uppercase;
    margin-top: 10rem;
    padding: 3rem;
    word-wrap: break-word;
}

.main-message h2{
    font-size: 1.6rem;
}
.main-message h3{
    font-size: 1.3rem;
    color: #000;
}

.main-message h1{
    font-family: 'aldrich', sans-serif;
    font-size: 1.9rem;
    margin: 1rem 0;
    color: rgb(0,0,0);
}

.main-message p{
    text-transform: none;
}

.btn{
    background-color: #050505;
    border-radius: 2rem;
    color:#fafafa;
    display:inline-block;
    margin-top: 2rem;
    padding: 1rem 2.5rem;
    text-transform: uppercase;
    transition: all 650ms;
}

.btn:hover{
    background-color: #555;
    cursor: pointer;
}

.innovate .btn{
    background-color: #e89d43;
}

.innovate .btn:hover{
    background-color: rgb(255, 145, 0);
    cursor: pointer;
    color: #000;
}

.peanut .btn{
    background-color:#62dbfb;
}

.peanut .btn:hover{
    background-color: rgb(42, 245, 245);
    cursor: pointer;
    color: #000;
}

.agriculture .btn{
    background-color: rgb(33, 231, 155);
}

.agriculture .btn:hover{
    background-color: rgb(0, 255, 157);
    cursor: pointer;
    color: #000;
}

.media .btn{
    background-color: rgb(255, 115, 0);
}

.media .btn:hover{
    background-color: rgb(255, 81, 0);
    cursor: pointer;
    color: #000;
}

.what-we-do{
    padding: 0;
    display: flex;
    text-align: center;
}

.what-we-do .container{
    padding: 9rem 0;
    margin: 0 auto;
}


.title-heading{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    color: rgba(0,0,0,.7);
}

.title-heading h3{
    font-size: 1.4rem;
}

.title-heading h1{
    font-size: 2rem;
    font-family: 'Aldrich', sans-serif;
    margin: .5rem 0 1 rem;
}

.title-heading p{
    text-transform: capitalize;
}


.activities-item{
    flex: 1;
    max-width: 100%;
    margin: 8px;
    padding: 1rem;
    color: #fafafa;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    justify-content: center;
    z-index: 0;
}

.activities-item p{
    text-align: left;
}

.activities-item::before{
    content: "";
    position: absolute;
    top:0px;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, rgba(40,24,131,.9) 0%, rgba(72,65,149,.8) 100%); */
    background: linear-gradient(135deg, rgba(15, 6, 29, 0.9) 0%, rgba(39, 17, 49, 0.8) 100%);
    z-index: -1;
}

.innovate{
    background: url("../images/Innovations.jpg") center no-repeat;
}

.peanut{
    background: url("../images/peanut-mfg.jpg") center no-repeat;
}

.agriculture{
    background: url("../images/agriculture.jpg") center no-repeat;
}

.activities-item i{
    font-size: 4rem;
    color: #eb648c;
}

.activities-item h1{
    font-family: 'Aldrich', sans-serif;
    font-size: 1.7rem;
    text-transform: uppercase;
    margin: 2rem 0;
}


.testimonials{
    width: 100%;
    /* background: linear-gradient(135deg, rgba(255, 174, 0, 0.9) 0%, rgba(255, 174, 0, 0.8) 100%), url("../images/test-bg.jpg") center no-repeat fixed; */
    background: linear-gradient(135deg, rgba(0,255,200,.7) 0%, rgba(0,200,255,.7) 100%), url("../images/test-bg.jpg") center no-repeat fixed;
    background-size: cover;
}


.testimonials .title-heading{
    color:#fafafa
}

.testimonial{
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    justify-content: center;
    width:100%;
    color: #000;
    text-align: center;
}

.testimonial-text-box{
    padding: 0 1.5rem;
    color: rgba(0,0,0,.9);
    text-align: left;
}

.testimonial-text-box i{
    color: #be63f9;
}

.testimonial-customer{
    width: 50rem;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    padding: 1rem;
    margin: .8rem;
}

.testimonial-customer img, .testimonial-customer .svg-placeholder{
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    border: 5px solid #f5e6fe;
    overflow: hidden;
}

.svg-placeholder svg{
    height: auto;
    width: 100%;
}

.step-section{
    margin: .8rem;
}

.step-section-item{
    border-radius: .8rem;
    box-shadow: 0px 0px 3px .1px rgba(129, 79, 4, 0.356);
    /* margin: 2.5rem 0; */
    padding: 1.3rem;
}

.step-section-item p, .step-section-item ul{
    font-size: 1.5rem;
}

.step-section-item ul{
    list-style: disc;
    padding-left: 2rem;
}

.step-section .title-heading{
    font-size: large;
}

.team{
    background: rgb(245, 244, 244);
}
.team-section {
    display: flex;
    flex-wrap: wrap;
}

.team-section-item{
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: .8rem;
     background: #fff;
     border-radius: 1.9rem;
     padding: .8rem 1rem;
}

.team-image{
    margin: 0 auto;
    width:8rem;
    height: 8rem;
}

.team-textbox {
    font-size: 1.1rem;
    flex: 2;
    padding: .7rem;
}

.team-textbox h1{
    font-size: 2.1rem;
    text-align: center;
}

.team-textbox .position{
    text-align: center;
    font-size: 1.3rem;
    color: rgba(0, 0, 0, .7);
}

.team-textbox p{
    color:rgba(0, 0, 0, 0.925);
    border-radius: 1.8rem;
    padding: 2px;
}
.team-image img{
    border-radius: 50%;
    height: 8rem;
    border: 5px solid rgb(241, 241, 241);
}

.team .social-media, .testimonial .social-media{
    display: flex;
    align-items: center;
    justify-content: center;
}

.team .social-media svg, .testimonial .social-media svg{
    width: 15px;
    height: 15px;
}

.team .social-media ul, .testimonial .social-media ul{
    display: flex;
}

.team .social-media li, .testimonial .social-media li{
    margin: 1rem;
}

.play-with-me{
    padding:1rem;
}

.play-with-me .container {
    transition: all 3s linear;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 220px;
}

#play{
    color: orange;
    text-align: center;
    font-family: 'Aldrich', sans-serif;
    font-size: x-large;
    margin: 2.5rem;
    transition: all 3s ease-in-out;
    display: inline-block;
}

#play::after{
    color: black;
    content: "Swipe away from the card to scroll";
    font-size: medium;
}
.card-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
}

.card{
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    height: 20rem;
    width: 20rem;
    box-shadow: 0px 0px 4px 4px rgba(163, 4, 255, 0.096);
    border-radius: 2rem;
    background: rgba(148, 146, 146, 0.055);
}

.card-image{
    width: 100%;
    height:80%;
    padding: 1rem;
    transition: all 3s ease-in-out;
    color: #362019;
}
.card-image img{
    height: 100%;
    border-radius: 2rem;
    box-shadow: 0px 0px 5px 3px rgba(200, 197, 202, 0.247);
}
.card-text{
    display: flex;
    align-items: center;
    flex: 1;
    flex-wrap: nowrap;
}
.card-text .text{
    margin: auto;
    font-family: 'Aldrich', sans-serif;
    color: rgba(0, 0, 121, 0.637);
}

.highlights-container, .career-grid, .firms-grid, .grid, .activities, .step-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    grid-gap: 1.8rem;
    z-index: 0;
}

.highlights-item, .career-grid-item, .firms-grid-item, .grid-item {
    padding: 3rem;
    border-radius: 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 0;
}

.firms-grid-item{
    justify-content: flex-end;
}

.highlights-item h1{
    /* text-decoration: underline; */
    font-weight: 900;
    font-size: 2.5rem;
    color: white;
}

.highlight-text{
    font-size: 1.5rem;
    font-weight: 300;
    color: white;
}

.highlights-item::before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.438);
    border-radius: 2px;
    z-index: -1;
}

.magazine{
    background: url("../images/magazine-bg.jpg") center no-repeat;
    background-size: cover;
}

.green-track-mushroom{
    background: url("../images/mushroom-bg.jpg") center no-repeat;
    background-size: cover;
}

.longwalk{
    background: url("../images/longwalk-bg.jpg") center no-repeat;
    background-size: cover;
}

.breath-easy{
    background: url("../images/breath-easy-bg.jpg") center no-repeat;
    background-size: cover;
}

.lecture-me{
    background: url("../images/lecture-me-bg.jpg") center no-repeat;
    background-size: cover;
}

.longwalk-plus {
    background: url("../images/longwalkp-bg.jpg") center no-repeat;
    background-size: cover;
}

.goals-container .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    font-size: 1.3rem;
}

.goals-container table{
    border-collapse: collapse;
    padding: .8rem;
}

.goals-container td{
    padding: 1rem;
}

.goals-container thead{
    background: orange;
    color: #fff;
}

.light-bg{
    background-color: #eee;
}

.light-bg{
    background-color: #ccc;
}

.career-grid-item, .grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid gray;
    border-radius: 2rem;
}

.career-grid-item svg, .career-grid-item g, .career-grid-item path{
    transform-origin: initial;
}

.firms-grid{
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.products .image-container{
    display: flex;
    align-items: center;
    justify-content: center;
    width:10rem;
    height: 10rem;
}

.grid-item img{
    width: 8rem;
    height: 8rem;
}

.products .grid-item img {
    border-radius: 1rem;
}

img[alt="Agricultural Inovations"]{
    filter: brightness(.8) sepia(50);
}

img[alt="darren nganga"]{
    transform: rotateZ(28deg);
}

img[alt="Tisa Banda"]{
    transform: rotateZ(-20deg);
}

img[alt="Mwikisa Lufungulo"]{
    transform: rotateZ(-10deg);
}

.magazine-products .image-container{
    width: 180px;
}

.greentrack-products .image-container{
    width: 200px;
}
.greentrack-products img, .wild-grass-products img{
    height: 100%;
}
.lecture-me-firm .image-container, .just-nuts-firm .image-container, .wild-grass-firm .image-container, .maetag-firm .image-container, .PanCake-Factory .image-container{
    width: 10rem;
}

.wild-grass-products .image-container{
    height: 80px;
}

/* Media Queries */
@media screen and (min-width: 350px){
    .main-message{
        padding:5rem 0;
    }

    .main-message h3{
        font-size: 1.6rem;
    }

    .main-message h1{
        font-size: 4rem;
    }
}


@media screen and (min-width: 470px){
    .intro::after{
        height: 9.4rem;
        background: url("../images/wave-medium.png");
        background-size: cover;
    }

    footer::before{
        height: 9.4rem;
        background: url("../images/wave-medium-reversed.png");
        background-size: cover;
    }

    footer{
        padding-top: 10.4rem;
    }

    #play::after{
        content: "";
    }
}

@media screen and (min-width: 700px){
    header{
        height: 8rem;
    }

    .nav-brand{
        width: 8rem;
        height: 4rem;
    }

    .nav-list{
        width: initial;
        height: initial;
        background-color: transparent;
        position: initial;
        top: initial;
        right: initial;
        flex-direction: row;
        transition: initial;
    }

    .menu-icons{
        display: none;
    }

    .nav-item{
        margin: 0 2.5rem ;
        z-index: 10;
    }

    .nav-link, .current{
        color: #000000;
        font-weight: 550;
        position: relative;
        font-size: 1.3rem;
    }

    .nav-link::before, .current::before{
        content: ""; 
        position: absolute;
        left: 0;
        bottom: -.5rem;
        background-color: rgba(0,0,0,.5);
        width: 100%;
        height: 2px;
        transform: scale(0);
        transform-origin: left;
        transition: all 650ms;
    }

    .current::before{
        transform: scaleX(1);
    }

    .nav-link:hover::before{
        transform: scaleX(1);
    }

    .main-message{
        padding: 13rem 0;
    }

    .main-message h1{
        font-size: 4rem;
    }

    .title-heading h1{
        font-size: 2.5rem;
    }

    .team-section-item{
        flex-basis: 2;
        flex: none;
        align-self: center;
    }
    .team-section{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
   
@media screen and (min-width: 950px){
    .intro::after{
        height: 22.7rem;
        width: 100%;
        background: url("../images/wave-large.png");
        background-size: cover;
    }

    footer::before{
        height: 22.7rem;
        width: 100%;
        background: url("../images/wave-large-reversed.png");
        background-size: cover;
    }

    footer{
        padding-top: 22.7rem;
    }
    
}