:root {

        --base: 16px;
        --lh-head: 1.25;
        --pFontSize:  clamp(1rem, 1.2vw + 0.8rem, 1.2rem);
        --lh-body: calc(var(--pFontSize)/10);
        --measure: 77ch;
        --h1Height:clamp(2rem, 2.9vw + 1rem, 3.4rem);
        overflow-x: hidden ;
        --brandGreen: #548357;
        --brandPurple: #500596fe;

        --header: var(--brandGreen);
        /* --textColour: rgb(56, 34, 34); */
        --textColour: #2c3e50;
        

        --titleColour:  var(--brandGreen);

		--h3Colour: var(--subTitleColour);

        --subtitleColour: var(--brandGreen);

        --sloganColour: #1b5e1fa7;

        --figuresColour: #fff

        --textColour: #59789B;

        /* --buttonColour: linear-gradient(90deg, #7e16ba 0%, #7a3d98 50%, #c469da 100%);     */
        /* --buttonColour: linear-gradient(180deg, #169239 0%,  #21503a 100%);     */
        --buttonColour: linear-gradient(90deg, #473f13 0%,  #b78948 100%);    


        --boldColour: #1b5e1fa7;

        --subTitleColour: #500596fe;

        /* --backgroundColour: #fbf2e6c8; */
        --backgroundColour: #f4f8f4;

        --paragraphTextColour: var(--textColour);
        
        --leafTextColour:#fff   ;

        --formInputColour: rgb(103, 110, 210);

        --formInputsColour: #fff;

        --buttonTextColour: white;

        --buttonHoverColour: linear-gradient(to right,  #2bcd76, var(--brandGreen));

        --section2Colour:rgba(251, 242, 230, 0.783);
        
        --figuresBackgroundColour: #fbf7ff;

        --visionBackgroundColour: #FBF7FF;

        --testimonialBackgroundColour: #fff;

        --color-background: var(--buttonHoverColour);  

    }


@media all { /* Main controls*/

 

   

    :root {

        --base: 16px;

        --lh-body: 1.6;

        --lh-head: 1.25;

        --measure: 68ch;


        --brandGreen: #548357;

        --header: var(--brandGreen);

        --titleColour:  var(--brandGreen);

		--h3Colour: var(--subTitleColour);

        --subtitleColour: var(--brandGreen);

        --sloganColour: #1b5e1fa7;



        --boldColour: #1b5e1fa7;

        --subTitleColour: #500596fe;
        --accentPurple: #500596fe;
        
        --backgroundColour: #fbf2e6c8;


        --leafTextColour:#fff   ;

        --formInputColour: rgb(103, 110, 210);

        --formInputsColour: #fff;

        --buttonTextColour: white;

        --buttonHoverColour: linear-gradient(to right,  #2bcd76, var(--brandGreen));

        --section2Colour:rgba(251, 242, 230, 0.783);
        
        --figuresBackgroundColour: #fbf7ff;

        --visionBackgroundColour: #FBF7FF;

        --testimonialBackgroundColour: #fff;

        --color-background: var(--buttonHoverColour);  
        color: var(--textColour)

        

        

 

 

 

 

 

 

 

    }

        .fade-in {
    opacity: 1;
    transition: opacity 0.5s ease-in;
    }

    .fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    }

 

    html { font-size: 100%;}

        body {

        display: grid;
        justify-content: center;

        margin: 0%;

        width:100%;

        /* font-family: 'Playfair Display' , serif; */
        /* font-family: 'Raleway' , sans-serif; */
        font-family: 'Inter' , sans-serif;
        /* font-weight: 100; */


        font-size: 1rem;      /*  currently 18px*/

        line-height: var(--lh-body);

        letter-spacing: 0   ;

        background-color: var(--backgroundColour);

            background-size: 30px;

 

    }

    h1, h2, h3 {

        line-height: var(--lh-head);

        margin: 0;

        font-weight: 700;

    }

   

    div > input {

        text-align: center;

        justify-content: center;

        margin: auto;

        display: flex;

        align-content: center;

        margin: 0%;

        width: 400px;

        color: #235115;

        padding: 0px;

    }

        h1{

        font-family: 'Playfair Display' , serif;
        text-align: center;

        font-size: var(--h1Height);

        color:var(--titleColour);

        padding: 30px;

    }


    h2{font-size: clamp(1.8rem, 1.6vw + 1.3rem, 2.5rem) ;
        

        font-family: 'Playfair Display' , serif; color:var(--titleColour);
    text-align: center;}

    h3{font-size: clamp(1.15rem, 1vw + 0.9rem, 1.65rem); color: var(--h3Colour)}

    h4, .h4{font-size: clamp(0.9375rem, 0.8vw + 0.8rem, 1rem);}

 
    
        .small{font-size: 0.9375rem; line-height: 1.5;}

    p {

        text-align: center;
        justify-self: center;
        /* max-width: var(--measure); */
        max-width: 65%;
        /* font-family: 'Raleway' sans-serif; */
        font-size: var(--pFontSize);
        justify-self: center;
        z-index: 5;
        font-size: var(--pFontSize);
        align-self: center;
        justify-self: center;
        z-index: 5;
        color: var(--paragraphTextColour); 

    }

    loader {
        z-index: 1000000000000;
        display: grid;
        /* height: 100vh; */
        top: 300px;
        /* background-image: url("../images/5fd9c3d5-cdea-4e2a-952e-6f625138cb0e.svg"); */

    }

    .loader-img{
        z-index: 100000000000000;
        position: absolute;
        justify-self: center;
        align-self: center;
        top: 300px;
        

    }

    .loader-bg {
        /* height:300vh;
        width: 100vh;
        top: 0;
        position: absolute;
        left: 0;
        z-index: 100; */
    }


    section {

        box-shadow: 0 20px 10px  rgba(0, 0, 0, 0.3);

    }

    hr{

        margin: 0px;

        padding: 0px;

    }


    .divider {

        height: 5px;


        background: linear-gradient(to right, #6A0DAD, #B39DDB);

        margin: 0;

    }

    strong {

        color: var(--boldColour);

    }

 
 

    }


@media all{

 

:root {

        /* --header: #C2F8CB; */
        --headerHeight: 70px;

   

}

    h1, h2, h3, h4 {

        line-height: var(--lh-head);

        margin: 0;

        font-weight: 500;

    }
    h4{font-size: clamp(1.15rem, 1vw + 1rem, 1.25rem); color: var(--h4Colour); height: max-content; align-self: end;}

   div > li > a > h4 {
        width: 100%;
        font-size: 0.9rem;
        color: black;
    }

@media (max-width:560px) {

    header {
        height: 45px;
    }
    
}
 
#Hlinks {

    height: inherit;

        list-style-type: none;

        /* width: 100vw; */
        width: max-content;
        justify-self: center;

        display: grid;

        grid-template-columns: repeat(8, max-content);

        padding: 0;

        margin: 0px;


        font-size: 100%;

        overflow: hidden;

        align-self: center;

}

 

#Hlinks > div, .more {

 

    align-content: center;

    height: inherit;

}

 

#Hlinks > div > li, .more {

    height: inherit;

    align-content: center;

    padding: 0px 15px ;

    width: max-content;

 

}

 

#Hlinks > div > li > a {

    padding:  0px ;

    height: inherit;

    text-align: center;

    flex-wrap: wrap;

    align-content: center;

    justify-content: center;

    display: grid;

    gap: 4px;

    grid-template-columns: 1fr max-content;

}

 

li > a > h4 {

    margin: 0;
    color: #fff;

}

 

 

 

 

li > a.active{

    font-weight: bold;

    color: #FFD700;

    border-bottom: 2px solid #FFD700;

}

 

li:hover {         

    /* background-color: rgb(217, 157, 243); */
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;

}



 

footer {

    display: flex;

    height: 50px;

    margin: 0px;

    padding: 0px;

    background-color: var(--brandGreen);

    justify-content: center;

    margin-top: 0vh;

}

footer {

    margin: 0px;

}

footer > div > #images {
    padding: 0px;
    padding-left: 0px;
}

a{
    height: max-content;
    align-self: center;
}


        #footer-links {

            justify-content: space-between;
            align-self: center;
            display: flex;

            gap: 3vw;


        }

    #footer-links > a {
            text-decoration: none;
        color: var(--textColour);
    }

}

 

nav {

        height: inherit;
 

}

 

.more {

    grid-column: 7;

    display: grid;
    display: none;


    grid-template-rows: max-content max-content max-content  ;
    /* grid-template-rows: 1fr; */

    height: inherit;

    align-content: center;

    flex-wrap: wrap;

    align-self: center;

    /* justify-content: end    ; */

 

}

 

 

.more > div{

display: none;
height: inherit;
 

}

 
.more > div > li {
    height: inherit;
}
 
.more > li > a {
    height: inherit;
    padding: 0px;
}

.more > h3 {

    /* height: inherit; */

    margin: 0%;

    align-self: center;

    color: white;

    height: 25px;

   

}

 

 

 

   #menu {

        display: block;

        grid-template-rows: max-content max-content max-content max-content;

        align-items: center;
        align-self: center;


        margin: 0px;

        height: 39px;
        height: max-content;
        margin-top: 20px;
        padding: 10px 0px;


        overflow: hidden;

        /* background-color: var(--header); */

        position: sticky;

        /* top: var(--headerHeight); */

        z-index: 1000000;

        /* width: 100vw; */
        /* max-width: max-content; */

        /* box-shadow: 0px 10px 5px rgba(0, 8, 4, 0.2); */
        box-shadow: none;

 

   

        

    }

 

 


@media only screen and (min-width:901px) {

   

    body {

        margin: 0px;


        overflow-x: hidden;

        /* opacity: 0;

        transition: opacity 0.5s ease-in-out; */

    }

 

 

    header {


        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: max-content 1fr max-content;

        padding: 0px 2.5vw;

        margin: 0;

        height: var(--headerHeight);




        width:95vw;

        background-color: #fff;

        top: 0;

        position: sticky;

        z-index: 10000;

        /* width: 100vw; */
        overflow-y: hidden;

    }

 

    #logo {

        grid-column: 1;
        grid-row: 1;


        display: flex;

        width: max-content;

        padding: 0px;
        padding-left: 40px;
        justify-self: center;
        /* justify-self: start; */

        align-self: center;

        margin: 0;

        align-content: center;
        justify-content: center;

    }

 

    #logo > img {
        height: 49px;
        grid-row: 1;

        justify-content: center;
    }
 

    #signup {

        grid-column: 3;
        grid-row: 1;
        display: flex;
        border: none;
        height: 100%;
        flex-direction: row;

        justify-content: flex-end;

    transform: translateY(7px);

        margin-left: auto;

        gap: 2vw;

        margin-right: 4%;

        align-items: center;
    }

 

 

    .buttons:hover {

        color: green;
        border: none;
        transform: scale(1.05);

        transform: translateY(-2px);

        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
}

 

 

    .buttons{
        text-decoration: none;
        border: none;
        font-size: 21px; 
        padding: 2px 7px;


        color: rgb(152, 134, 19);  

    

    }

         .buttons > h4 {
        height: max-content;
     }
 

    #images {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: repeat(4,max-content);
        grid-row: 1;
        margin: 0;
        align-self: center;
        width: max-content;
        height: max-content;
        justify-self: center ;
        align-items: center;
        padding: 10px 0 0 20px;
        gap: 2px;


    }

    #images > a  {
        height: 35px;
        grid-row: 1;
    }


    #images > a > img {
        align-self: center;
        grid-row: 1;
        height: 15px;

    }

 

    .social-media-icons{

        height: 20px;
        align-self: center;
        justify-self: center;

 

    }

 

    .icons {

        height: 15px;

        padding-right: 5%;

        /* width: 1px; */

    }

 

 

 

 

    #menu button {

        height: 10px;;

    }

 

 

 

 

    #menu a.active {

        font-weight: bold;

        border-bottom: 2px solid #fff;

    }

 

    nav {

        align-content: center;

    }

   

 

 

 

    li {

        align-self: center;

        padding-left: 2vw;

    }

 

    li>a {

        /* color: white; */

        text-align: center;

        height: 100%;

        width: 100%;

        text-decoration: none;

        overflow: hidden;

        margin: 0px;

        display: flex;


 

       

    

        

    }

 

 

 

 

 

 

       

    .openbtn {

        display: none

    }

 

 

 

 

 

 

}


   

 

/* updated phone responsive layout */

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

 

 

    header{

        position: sticky;
        top: 0px;

        z-index: 100000000;

        height: var(--headerHeight);


        display: grid;

        grid-template-columns: 1fr max-content 1fr;

        grid-template-rows: 1fr;

        position: sticky;

        background-color: #fff;

    }



    #menu {
        height: 100vh;
    }

    #Hlinks {
        /* height: 70vh;
        display: grid;
        grid-template-columns: 150px 10px; */
    }

    ul > div {
        /* grid-row: 1; */
    }

 

    .img{

    align-items: left;

    justify-content: left;

    height: 40px;

    }

   #logo{
        margin: 0%;
        grid-column:2 ;
        grid-row: 1 / span 2;

   }

    #signup {

    justify-content: flex-end;

    margin-right: 4%;

    align-items: center;  

    grid-column: 3;
    transform: translateY(7px);






    }

}

 

 

 

 

 

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

   

    *{
        overflow-x: hidden;
    }

    header {
        overflow: auto;
        overflow-y: hidden;
        justify-self: center;
        width: 100vw
    };

    body{
        display: grid;
        width: 100vw;
    }

    section {
        justify-self: center;
        margin:10px
    }
    p {
          width: 85%;
    max-width: 38ch;
    }

 

 

 

   #logo{

        margin: 0%;

        display: flex;

        align-self: center;

        justify-self: center;

 

   }
 

    .social-media-icons{

        /* background-color: black; */

        max-height: 5vh;   

        align-items: center;

    }

   

    #signup {

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        margin-left: auto;

        align-items: center;

        justify-self: center;

        align-self: center;
        width: 100%;  
        
        grid-row: 1 / span 2;

    

    }

 

    .buttons:hover {

        color: green;

        transform: scale(1.05);

        transform: translateY(-2px);

        transform: scale(1.1);

        transition: all 0.3s ease-in-out;

       

}

 

 

    .buttons{

        text-decoration: none;

        font-size: 21px; 

        padding: 2px 7px;

        border-radius: 10px;

        color: rgb(152, 134, 19);  

    

    }

   

    #images {

        /* display: none   ; */

        /* background-color: aquamarine; */

        margin: auto 0 auto ;  

        height: 100%;

        display: flex;

        flex-direction: row;

        justify-items: center;

        align-items: center;

        margin-left: 0;

       

        }

   

    #images img {

            display: none;

            justify-content: center;

            align-items: center;

            height: 100%;

            /* padding-bottom: 2vh; */

   

            

    }

 

    .openbtn {

        display: flex;

        transform: translateY(7px);
        position: relative;

        margin-left: auto;

        justify-content: center;

        align-items: center ;

        background-color: transparent;

        align-self: center;

        border: none;

        cursor: pointer;

        font-size: 2em;

        height: 100%;

        color: blueviolet; 

        padding: 0;

        text-align: center;

        margin: 0%;

        grid-column: 1;
        grid-row: 1/span 2;

        z-index: 1000000000000000000;

   

    }

 

    .openbtn:hover {

        color: blue;

        transform: translateY(-5px);

        transition: all 0.3s ease-in-out;

    }

 

 

 


    #menu {

        left: 0;

        top: 0vh;

        height: 100vh;

        /* background-color: #fff  ; */

        width: 0;

        position: fixed;

        z-index: 1;

        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

        transition: 0.7s;

        opacity:100%;

        z-index: 10000000;

        overflow-y: hidden;

        }


 

    nav {
        margin-top: var(--headerHeight);
 

    }

 

    ul {
        height: max-content;
        display: grid;
        gap: 40px;
        z-index: 1;
        left: 0;

    }
    ul > div {
        height: max-content;
    }

    #Hlinks> div , .more {
        height: max-content;
        width: max-content;

    }

    .more {
        grid-row: 7;
    }

    #Hlinks > div:nth-of-type(7n){
        grid-row: 7;
        grid-column: 1;
    }
    #Hlinks > div:nth-of-type(7n+1){
        grid-row: 1;
        grid-column: 1;
    }
    #Hlinks > div:nth-of-type(7n+2){
        grid-row: 2;
        grid-column: 1;
    }
    #Hlinks > div:nth-of-type(8n+3){
        grid-row: 3;
        grid-column: 1;
        
    }
    #Hlinks > div:nth-of-type(7n+4){
        grid-row: 4;
        grid-column: 1;

    }
    #Hlinks > div:nth-of-type(7n+5){
        grid-row: 5;
        grid-column: 1;

    }
    #Hlinks > div:nth-of-type(7n+6){
        grid-row: 6;
        grid-column: 1;

    }
 

    li  {

        display: flex;
        align-items: center;

    }

 

    li >a {      

        color: blueviolet;
        transition: 0.7s;
        display: flex;
        width: 100%;
        text-decoration: none;
        /* font-weight: 1000; */

        /* font-size: 1.1em; */

    }

 

    a {

        align-self: center;
    }

 

    #Hlinks {      
        visibility: hidden;
        transition: 0.1s;
        height: max-content;
        padding: 50px 10px;

    }

        

    li >a:hover {      

        color: rgb(69, 161, 210);
        text-decoration: underline;
        transition: 0.7s;
        cursor: pointer;
    }

 

 

    #menu > button {

        display:flex;

        height: 30px;

        width: 40px;

        align-self: flex-start;

        right:0;

        background-color:blueviolet;

    }

 

 

 

   

    .icons {

        width:35px;

        padding-right: 20px;

        /* width: 1px; */

    }

   

    

}

 

 

 

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

    *{

        overflow-x: hidden;

    }


    .social-media-icons{

        visibility: hidden;

        display: none;

        width: 0px;

        max-height: 5vh;   

        align-items: center;

    }

 

 

 

    

     .buttons:hover {

        color: green;

        transform: scale(1.05);

        transform: translateY(-2px);

        transition: all 0.3s ease-in-out;

}

 

    .buttons{

        text-decoration: none;
        height: max-content;


        margin-bottom: auto;

        margin-top: auto;

        padding: 0 4px;

        border-radius: 5px;

        color: rgb(152, 134, 19);  

       

     }
     .buttons > h4 {
        height: max-content;
     }

   

    #images {

        display: flex;

        grid-row: 1;

        padding: 0px ;

       

        margin: auto 0 auto ;  

        height: 100%;

        display: flex;

        flex-direction: row;

        justify-self: left;

        align-self: center;

        margin-left: 15px;

       

        }

   

    #images img {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100%;

 

   

            

    }

 

    .openbtn {

        grid-column: 1;

        grid-row: 1;

        display: flex;

        position: relative;

        margin-left: auto;

        flex-direction: column;

        justify-content: center;

        align-items: center ;

        background-color: transparent;

        border: none;

        cursor: pointer;

        font-size: 2em;

        height: 100%;

        width: 10vw;

        color: blueviolet; 

        padding: 0;

        border-radius: 4px;

        text-align: center;

        margin: 0%;

   

    }

 

 

 

    #menu {

        left: 0;

        top: 0vh;

        height: 100vh;

        width: 0;

        position: fixed;

        z-index: 1;

        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

        transition: 0.7s;

        opacity:100%;

        z-index: 10000000;

        }

 

    nav {

    }

 

    ul {

        display: grid;

        z-index: 1;

        overflow-x: hidden;

        left: 0;


    }

 

    li  {
        align-items: center;

    }

 

    li >a {      

        color: blueviolet;
        transition: 0.7s;
        display: flex;
        text-decoration: none;
        /* font-weight: 1000; */

    }

 

    a {
        align-self: center;
        align-items: center;   
        font-size: 9px;

    }

    nav > div {
        height: max-content;
        width: max-content;
        padding: 15px 0px;
    }

 

    #Hlinks {      
        visibility: hidden;
        transition: 0.1s;
    }

        

    li >a:hover {      
        color: rgb(69, 161, 210);
        text-decoration: underline;
        transition: 0.7s;
        cursor: pointer;
    }

 

    #menu > button {

        display:flex;
        height: 30px;
        width: 40px;
        align-self: flex-start;
        right:0;
        background-color:blueviolet;

    }


 

 

 

   

    .icons {

        width: 35px;

        height: auto;

        padding-right: 5%;

    }

 

    #slogan > .cta-btn > .btn-content {

        margin-left: 0;

    }

 

 

   

    

 

}