@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);

		--h4Colour: #fff;

        --subtitleColour: var(--brandGreen);

        --sloganColour: #1b5e1fa7;


        --subTitleColour: #500596fe;

        --backgroundColour: #f4f8f4;


        --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:var(--brandGreen);

        --visionBackgroundColour: #FBF7FF;

        --testimonialBackgroundColour: #fff;

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

    html { font-size: 100%;}

        body {
        display: grid;
        justify-content: center;
        width:  100vw;
        overflow: hidden;

        margin: 0%; 

        /* width:100%; */


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

        letter-spacing: 0;

        background-color: var(--backgroundColour);
            background-size: 30px;
    }

    h1, h2, h3, h4 {

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

        margin: 0;

        font-weight: 700;

    }

    h4 {
        font-weight: 500;
    }

     div > input {

        text-align: center;

        justify-content: center;

        margin: auto;

        display: flex;

        align-content: center;

        margin: 0%;

        width: 400px;

        color: #235115;

        padding: 0px;

    }

        h1, h2{
        color:var(--titleColour);
        padding: 30px;

    }    
     h3{ 
        font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2rem); 

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

     }

    h4{font-size: clamp(1.15rem, 1vw + 1rem, 1.25rem); color: var(--h4Colour)}

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

    p {

        margin: 0 0 1em;
    }    
        
    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 { /* hero and cta */


    #slogan {

        display: grid;

        grid-template-columns: 1fr;
        --row1Height: calc(var(--h1Height) + 50px);
        grid-template-rows: max-content max-content max-content;
        margin: 0;
        padding: 30px 10px;
        overflow: hidden;
        align-items: center;

        justify-content: space-between;
        width: 100%;
        height: max-content;
        gap: 10px;
        row-gap: 0px;

        background-color: var(--backgroundColour);

    }


        #slogan::before {

            content: "";


            position: absolute;

            top: 0;

            left: 0;             right: 0;

            bottom: 0;

            background-position: center;

            background-size: 60px 40px;

                width: 100%;

            z-index: 1;

            opacity: 0.025;
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;

                 }

            #slogan > h1 {

                grid-row: 1;
                display: inline-block;
                padding: 0%;
                margin: 0px;
                margin-top: 5vh;
                padding: 20px;

                overflow: hidden;

                border-right: 2px solid #fff;

                z-index: 5;

                justify-self:center;

                align-self: center;

                text-align: center;

                white-space: nowrap;

                height: max-content;

                width: max-content;

                color: var(--titleColour);
                animation: blink-caret 0.7s step-end infinite;

                 }        


            #changingWord {
                color: #b78948 
            }

            #slogan > p {

            grid-row: 2;


            grid-column: 1;

            padding: 0;

            padding-bottom: 25px;
            margin: 0%;

            margin-left: 30px;

            z-index: 5;

            width: 45%;            
            justify-self: center;

            align-content: center;

            align-self: center;

                     text-align: center;

            line-height: 1.9;

            font-weight: 500;

            color: var(--sloganColour);
                           }


            .slogan-br{
            height: 10000px;
            display: block;

        }


        #slogan > .cta-btn{
            grid-row: 4;
            align-self: flex-start;
            justify-self: center;

        }


        .btn-content:hover {
            background: var(--buttonHoverColour);
        }


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

            margin-bottom: 0px;
            align-self: center;
            margin: 0px;
        }

        br {
            height: 1000px;
            display: block;
        }

        #slogan > .cta-btn > h5, .h4  {
            margin: 0%;
            margin-top: 30px;
            grid-row: 3;
            grid-column: 1;
            align-content: center;
            text-align: left;
            justify-self: left;
            display: flex;
            font-style: italic;
            color: var(--subTitleColour)
        }


        #slogan > .testi-title {

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

        }


        #slogan > #images {
            grid-column: 3;
            grid-row: 1 /  span 3;

            min-width: 300px;

            flex-direction: column;

            position: relative;

            align-self: center;

            justify-self: center;

            margin: 0px;

            align-content: center;

            justify-content: center;

            width: 80%;

            max-width: 350px;
            background-position: center center;

            background-repeat: repeat;            
            /* background-image: url("..//Images/leaf.png"); */
            filter: brightness(1.6) saturate(0.9);

            background-size: 300px ;

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

            z-index: 4;

            animation: blobDrop 14s infinite ease-in-out;

        }


        #testimonials{

            display: flex;

            flex-direction: column;

            margin-bottom: 200px;

            flex-wrap: wrap;
        }


        #testimonials > p {

    text-shadow: none;
                      font-size: 16px;
            margin: 80px;
            justify-self: center
            ;

            height: 69px;
            color: var(--leafTextColour);
            text-align: center;

        }



        @keyframes blobDrop {

                     0% {

                transform: translateY(0px);

            }

             25% {

                transform: translateY(-150px);
            }

            50% {

                transform: translateY(-30px);

            }

                     75% {

                transform: translateY(-270px);

            }

                     100% {

                transform: translateY(-60px);

            }

        }


        #images > .people {

            justify-self: center;

            align-self: center;            height: 200px;

            width: auto;

            z-index: 2;

            border: 4px solid rgba(255, 255, 255, 0.6);

            border-radius: 15px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        }


        @keyframes typing {

            from {

            width: 0;

            }

            to {

            width: 100%;

            }

        }

             @keyframes blink-caret {

            from, to {

            border-color: transparent;

            }

            50% {

            border-color: white;

            }

        }


        .cta-btn {

            grid-column: 1;

            grid-row: 3;            
            justify-self: anchor-center;


        }




}



@media all {    /* What we offer */

    #WhatWeOffer{

        grid-template-columns: 1fr ;

        grid-template-rows: auto auto 1fr;

        display: grid;

        justify-content: space-evenly;

        padding: 30px;

        background-color: #fff
    }


    #WhatWeOffer > h3 {

        grid-row: 1;

        display: flex;

        padding: 0;

        /* margin-top: 15px; */

        align-self: center;

        justify-self: center;

        grid-column: 1 /span 3;

    }


    #WhatWeOffer > section {

        grid-row: 2;

        width: 100%;

        gap: 30px;

        display: grid;

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


    }


    #WhatWeOffer > section > section > h3 {

        padding: 25px;

        /* font-weight: 300px; */

    }



    #WhatWeOffer > section > section > img{

        height: 180px;

    }

    .hook1,.hook2,.hook3 {


        flex-direction: column;

        text-align: center;

        margin-top: 20px;

        padding: 10px;


    }


    #WhatWeOffer > section > section > p {

        margin-top: 30px;
        width: 90%;
        text-align: center;
        align-self: center;
        justify-self: center;


    }




}


@media all {    /* figures */


    #figures {

        align-self: center;

        justify-self: center;

        background-color: var(--brandGreen);
        /* background: url(/Images/leaf.png); */

        height: max-content;

        width: 100vw;

        padding: 20px 0px;
    }


    #figures > .figuresTitle {

        grid-row: 1;
        display: none;

        grid-column: 1 /span 4;


        text-align: center;

        justify-self: center;

         }

    #figures{

        display: grid;

        grid-template-columns: 1fr 1fr 1fr 1fr;
        
        align-items: center;

        justify-items: center;

        background-color: var(--figuresBackgroundColour);


        height: max-content;

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

    }



     #figures > div  {

        display: grid;

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

        gap: 0px;

        flex-direction: column;

        align-items: center;

        /* height: 450px; */

        padding: 5px;

     }


    #figures > div >  p {

        text-align: center;
        grid-row: 3;
        color: #fff;
        align-self: center;
        max-width: max-content;
    }



    #figures > div >  p:hover, .figure:hover {

        transform: scale(1.1);

        transition: all 0.4s ease-in-out;

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

    }

    #figures > div > img {

        height: 80px;

        grid-row: 1;

        justify-self: center;

        margin: 15PX 0;

        margin-bottom: 0;

        /* box-shadow: 4px 10px 8px rgba(80, 79, 79, 0.3); */

    }



        #figures > div:nth-of-type(4n+1) {

            grid-column: 1;

        }


        #figures > div:nth-of-type(4n+2) {

            grid-column: 2;

        }


        #figures > p:nth-of-type(4n+3) {

            grid-column: 3;

        }


        #figures > p:nth-of-type(4n) {

            grid-column: 4;

        }


        #figures > div > h4 {


            justify-self: center;

            /* text-shadow: 0 10px 20px rgba(245, 244, 244, 0.35); */
            display: none;
            font-weight: 100;
            grid-row: 3;

            align-self: center;

        }


        .figure {

            font-size: 3rem;

            font-weight: bold;

            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

            color: #fff;

            justify-self: center;

            grid-row: 2;
            padding-top: 0;
        }


        #figures > div > h4 {
            color: var(--textColour);
            margin: 0;
            padding: 0%;
            width: 100%;


        }



}

@media all {    /* about-us */
    #about-us {
        width: 100vw;
        display: grid;  
        justify-self: center;
        padding: 30px;
        }
    #about-us >p {
        justify-self: center;
        text-align: left;
        padding: 0 30px;
    }
}

@media (min-width: 768px)  {        /* Who we are  Vision */



    .Who {

        position: relative;

        display: grid;

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

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

        row-gap: 40px;

        line-height: 40px;

        margin: 0;

        padding-top: 0px;

        /* padding: 40px; */

        height: max-content;

        justify-self: center;
        width: 100vw;

    }


    .Who::before {

        content: "";

        position: absolute;

        background-size: 40px 40px;

             background-position: center;

        background-image: linear-gradient(to right, rgba(0,0,0,0.15), 1px, transparent 1px),

        linear-gradient(to bottom, rgba(0,0,0,0.15), 1px, transparent 1px);

        background: radial-gradient(circle, pink, rgba(233, 229, 229, 0.326),);

        left: 0;         right: 0;
        top: 0;

        bottom: 0;

        z-index: 0;

        opacity:0.4;
        height: 100%;

        background-color: var(--visionBackgroundColour);


     }


        .Who > p {

            margin: 0;

            line-height: inherit;

            grid-row: 2;

            grid-column: 1 /span 3;

            width: 80%;

            /* height: 20px; */

            text-align: center;
            justify-items: center;
            align-self: center;

            justify-self: center;

            /* padding: 25px; */

            /* margin-bottom: 5px; */



        }


        .Who > h2 {


            text-align: center;


            grid-row: 1;

            line-height: 40px;
            padding: 0px;
            z-index: 1;

            padding-top: 30px;
            display: flex;
            align-self: flex-end;
            flex-direction: column;

            /* margin: 40px 0; */

            grid-column: 1 /span 3;

            opacity: 1 ;

            align-content:end;


        }


        #HowItWorks {

            padding: 50px 10px;
            width: 90%;
            justify-self: center;
            padding-top: 30px;
            /* border-left: rgba(255, 0, 0, 0.742) 4px solid ; */
            grid-row: 3 / span 5;

            justify-content: center;

            display: flex;

            text-align: center  ;

            grid-column: 1 / span 3;

            display: grid;

            /* grid-template-columns: 1fr 1fr 1fr ; */
            grid-template-columns: 1fr 1fr ;

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

            row-gap: 120px;

        }


        #HowItWorks > h2 {

            grid-row: 1;
            grid-column: 1/ span 2;
            justify-self: center;
            z-index: 1;

            text-align: center;

            align-self: center  ;

            display: flex;

            margin: 20px 0;
        }


        hiw-text {
            z-index: 10 ;
            /* border: solid 10px black; */
        }


        hiw-text:nth-of-type(4n+1) {

            grid-column: 2 / span 3;
            justify-self: center;
            grid-row: 1;

        }

        hiw-text:nth-of-type(4n+2) {
            grid-column: 1 ;
            justify-self: center;
            /* padding-right: 130px; */
            grid-row: 3;

        }

        hiw-text:nth-of-type(4n) {

            grid-column: 1 ;
            grid-row: 7;
            justify-self: center;


        }



        /* #HowItWorks > .hiw-text:nth-of-type(4n+3) { */
        hiw-text:nth-of-type(4n+3){

            /* background-color: #2bcd76; */
            height: max-content;
            grid-row: 5;
            grid-column: 2;
            align-self: center;
            justify-self: center;
        }

        hiw-text > p {
            margin: 0px;
        }


             #HowItWorks > h3 {
            justify-self: center;
            z-index: 1;
        }


        .box {
            height: 200px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            align-self: center;
            justify-self: center;
        }


        .box:nth-of-type(4n+1), #HowItWorks > p:nth-of-type(4n+1) {
            grid-row: 1;
             grid-column: 2 / span 3 ;

        }

        .box:nth-of-type(4n+2), #HowItWorks > p:nth-of-type(4n+2)  {
            grid-row: 3;
             grid-column: 1 / span 2 ;
            padding-right: 20px;

        }

             .box:nth-of-type(4n+3),  #HowItWorks > p:nth-of-type(4n+3) {

            grid-row: 5 ;
             grid-column: 2 / span 3 ;
             padding: 0px;
             margin: 0px;
        }

        .box:nth-of-type(4n),  #HowItWorks > p:nth-of-type(4n) {

            grid-row: 7 ;
            grid-column: 1 / span 2 ;
            padding: 0px;
            padding-top: 20px;
            margin: 0px;

        }

        .box:nth-of-type(2n+1) {
            grid-column: 1 ;
        }

        .box:nth-of-type(2n) {
            width:  170px;
            grid-column: 2;
        }



        .box > img {
            /* width: -webkit-fill-available; */
            height: -webkit-fill-available;
            width: max-content;
        }


        .hiw-image-p {

            width: 90%;
            max-width: 550px;
            text-align: left;
            padding: 20px;
            padding-bottom: 0px;
            justify-self: center;
            align-self: center;
            height: max-content;

        }


        .arrow {

            align-self: center;
            justify-self: center;
            flex-wrap: wrap;
            grid-column: 1;
            display: flex;
            flex-direction: column-reverse;
            height: 240px;
            padding-bottom: 20px;
        }


        .arrow:nth-of-type(2n){

            display: flex;
            padding-left: 300px;
            grid-column: 2;
            /* grid-column: 2 / span 3; */

        }

        .arrow:nth-of-type(3n){
            grid-row: 2;
            padding-left: 260px;
            grid-column: 1;
            /* grid-column: 2 /span 3; */

            transform: matrix(1, 0, 0, 1,0,0);

        }

        .arrow:nth-of-type(3n+1){

            grid-row: 4;

            transform: matrix(-1, 0, 0, 1,0,0);
            /* grid-column: 2 /span 3; */
            grid-column: 2 ;
            padding-left: 200PX;
        }

        .arrow:nth-of-type(3n+2){

            grid-row: 6;
            transform: matrix(1, 0, 0, 1,0,0);
            padding-RIGHT: 50PX;
            grid-column: 1;
        }



        #HowItWorks > .cta-btn {

            grid-row: 8;

            align-self: center;

            justify-self: center;

            grid-column: 1 / span 3;

            margin: 20px;

            padding: 0;

            text-align: center;

            gap: 20px   ;

        }


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

            margin: 0;

            align-self: center;



        }




}


@media (min-width:1025px) {

    .post-it-background{

        background-color: #fffbe9;
        box-shadow: 7px 7px 15px rgba(0,0,0,0.2);

        background-size: 400px 400px;
        background-repeat: no-repeat;
        height: 300;
        width: 360px;
        /* transform: rotate(-5deg); */
        
    

       }




}


@media (min-width:768px) { /* #slogan */

    #slogan > p {
        margin: 0;
        padding: 0;
    }
 }

@media all { /* testimonial section */


        #testimonial-section {

        text-align: left;

        margin: 0px;

        /* padding: 60px; */
        width: 100vw;

        background-color: var(--testimonialBackgroundColour);

        /* max-width: 1250px; */

        overflow: hidden;

        align-self: center;

        justify-self: center;


        background-position: 5px 180px;

        height: calc(max-content + 60px);

        /* margin: auto; */


        }
        #testimonial-section > h2{

        display:flex;

        justify-content: center;

        text-align: center  ;

        margin-bottom: 0px;

        margin: 0%;

        padding: 30px 10px;

        align-items: center;

        overflow: hidden;        
        /* text-shadow: 4px     10px 20px rgba(0, 0, 0, 0.1); */

        z-index: 2;

        }




        section#Redirect{
        box-shadow: none;
        display: grid;

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

        gap: 50px;
        row-gap: 10px;

        line-height: 1.6;
        height: max-content;
        /* max-width: 1250px; */
        padding: 0px 60px;
        justify-self: center;

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

    }


        .post-it-background > p {
            line-height: 1.6;
            text-align: center;
            align-content: flex-start;
            padding: 30px;
            /* font-style: italic; */
            /* font-family: 'Playfair disney'; */
            font-weight: 100;
            justify-content: center;
            margin: 0px;
            max-width: max-content;
        }




        .quote {

            text-align: center;

            display: flex;

            justify-content: center;

        }


        #Redirect > .cta-btn {

            grid-row: 2;

            grid-column: 1/ span 3;

            align-self: center;

            padding: 20PX 0;

            align-content: center;

        }


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

            align-self: center;

            margin: 0;

        }
        .cta-btn > h2 {

            padding: 20px 0;

                  }



}





@media all { /* Form section */


    form {

        display: flex;

        flex-direction: column;

        gap: 0vh;

        margin: 0%;

        padding: 0%;

    }


    #forms > h3 {

        justify-content: center;

        display: flex;

        align-self: center;

        text-align: center;

        justify-self: center;

    }


         .inputs{

            width: 400px;

            height: 50px;

            border: none;

            outline: none;

            padding-left: 25px;

            /* font-weight: 500; */

            border-radius: 50px;

            margin-bottom: 20px;

        }


        input:focus, #query:focus {

            border: solid black 2px;

        }


        input::placeholder {

            color: grey;

        }



        textarea{

            height: 140px;

            padding-top: 15px;

            border-radius: 20px;

        }


        .label {

            display: none;

        }


        marquee {

            margin: 0px;

            padding: 0px;


            text-align: center;

            color: #4a4a4a;

            margin-bottom: 15px;

            margin-top: 15px;

        }


        #forms {

            --formBackgroundColour: rgba(255, 255, 255, 0.8);

            padding: 30px;

            /* border-radius: 10px; */

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

        }


        #form {

            max-width: 400px;

            margin: 0 auto;

            padding: 20px;

        }



        input{

            display:flex;

            flex-direction: row;

            border-radius: 4px;

            margin-left: 10px;

            padding-left: 30vw;

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



        input:focus{

            border: 2px solid black;

        }


        input[type="checkbox"] {

            width: 1em;

            height: 1em;

            border-radius: 50%;

            border: 1px solid #ccc;

        }



        .oneline, .checkbox, .submit     {


            display: flex;

            align-items: center;

            width: 100%;

            /* gap: 5px; */

            margin-top: 10px;

            color: #333;

            /* margin-bottom: 15px; */

            margin-left: 21px   ;

        }


        .oneline input {

            margin-right: 10px;

        }


        #Email{

            margin-bottom: 25px;

        }


        .button {

            margin-top: 40px;

            cursor: pointer;

        }



        .button {

            /* margin: auto; */

            transition: background-color 0.3s ease, transform 0.3s ease;

            width: 100%;

            padding: 12px;

            background: var(--buttonColour);

            color: var(--buttonTextColour);

            border-radius: 20px;

            border: none;

            font-size: 1em;

            cursor: pointer;

            }


        #radio, .checkbox {

            background-color: transparent;

        }



        .button:hover {

            transform: translateY(-2px);

            transform: scale(1.1);

            transition: all 0.3s ease;

            background-color: var(--buttonHoverColour);

        }

}






@media (min-width:769px) and (max-width:1024px) {

   body > #slogan > h1 {
    --h1Height:clamp(2rem, 2vw + 1.5rem, 3rem);

    }

#slogan > p {
    font-size: clamp(1.6rem, 1.4vw + 0.8rem, 1.8rem)
}

#slogan {

    grid-template-columns: 1fr;
    --row1Height: calc(var(--h1Height) + 80px);
    padding-bottom: 30px;


}
   #slogan > #images {
    display: none;
}


#testimonials {
    display: none;
}




#figures {

    display: grid;

    width: 95vw;
    align-self: center;

    grid-template-columns: 1fr 1fr;

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

    padding: 15px 10px;

    gap: 20px;
justify-content: center;
align-content: center;



}


#figures > .figuresTitle {

    grid-column: 1 / span 2;
    grid-row: 1;
    color: #fff;
    padding: 20px 0;

    margin: 0%;

      text-align: center;

    justify-self: center;

    align-content: center;


}



#figures > div {

    height: 300px;

    padding: 10px 5px;

    gap: 10px;

    text-align: center;

    align-content: center;

}


#figures > div:nth-of-type(2) {

    grid-column: 1;

    grid-row: 2;

}


#figures > div:nth-of-type(3) {

    grid-column: 2;

    grid-row: 2;

}


#figures > div:nth-of-type(4) {

    grid-column: 1;

    grid-row: 3;

}


#figures > div:nth-of-type(1) {

    grid-column: 2;

    grid-row: 3;

text-align: center;

align-content: center;

}


#figures > div > img {

    height: 90px;
    overflow: hidden;

}


.figure {

    font-size: 3.3rem;

    padding: 10px 0;
    padding-bottom: 0%   ;

}





#figures > div > h4 {

     text-align: center;

}


/* Who/Vision section */

.Who {

    grid-template-columns: 1fr;

    grid-template-rows: auto auto auto;

    padding: 20px 15px;

    row-gap: 25px;

       justify-self: center;
    width: 93vw;

}


.Who > h2 {

    grid-column: 1;

    margin: 0;
align-self: center;
text-align: center;

  }


.Who > p {

    grid-column: 1;

    width: 95%;

   text-align: center;
align-self: center;
margin: 0px;

}

#HowItWorks {
    width: 90%;
    overflow: hidden;
    grid-template-columns: 1fr 1fr;
}

.box > img{
    width: max-content;
    align-self: center;
}

.hiw-image-p {
    padding: 0px;
    width: 100%;
}

hiw-text:nth-of-type(4n+1),  #HowItWorks > p:nth-of-type(4n+1) {
    grid-column: 2;
    grid-row: 1;
}

    .box:nth-of-type(2n+1) {
        grid-column: 1;
        justify-self: center;
    }

    #HowItWorks > p:nth-of-type(4n),  #HowItWorks > h3:nth-of-type(4n) {
        grid-column: 1;
    }


#HowItWorks > h3:nth-of-type(4n+2),  #HowItWorks > p:nth-of-type(4n+2) {

    grid-column: 1;
}

 div > p.hiw-image-p {
    padding: 60px;
}

.hiw-image-h3 > {
    margin-bottom: 20px;
}








/* What We Offer - Stack vertically on mobile */

#WhatWeOffer {

    padding: 15px 10px;

   width: 95vw;
align-self: center;
justify-self: center;

}



/* Ensure nested sections use grid */

#WhatWeOffer > section {

    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;

    padding: 0;

text-align: center;

}


.hook1, .hook2, .hook3 {

    margin-top: 15px;

text-align: center;

    padding: 10px;

}


#WhatWeOffer > section > section > h3 {

justify-content: center;

justify-self: center;

align-self: center;

text-align: center;

    padding: 10px;

  }


#WhatWeOffer > section > section > img {

    height: auto;

    max-height: 100px;

    width: auto;

    /* max-width: 80px; scale down for mobile */

    justify-self: center;

}


#WhatWeOffer > section > section > p {

      width: 100%;

    margin-top: 15px;

}


/* Testimonials - single column */

#testimonial-section {

    padding: 0 15px 60px;

    background-size: 300px;

    background-position: center 120px;

position: relative;

}


#testimonial-section::before {

    content: "";

        background-image: url("..//Images/post-it.png");        position: absolute;

        top: 0;

        right: 0;

        left: 0;

        bottom: 0;

               background-size: 200px 200px;

        background-position: center;

        z-index: 0;

        opacity:0.1;
        height: 100%;

        z-index: 100;

}



#testimonial-section > h2 {

    padding: 40px 10px;



}


#Redirect {

    grid-template-columns: 1fr;

    gap: 40px;


text-align: center;



  background-size: 30px 30px;background-repeat: repeat;

}


.post-it-background > p {

     padding: 25px 15px;
    transform: rotate(0deg);
    width: 90%;

    justify-self: center;

    transform: none;


}


#Redirect > .cta-btn {

    grid-column: 1;

    margin: 30px 0 20px;

    grid-row: 4;

}


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

    padding: 15px 40px;

 }

.cta-intro, h3{
    margin: 20px;

}




}




/* responsive */

@media (max-width: 768px) {

a, footer, #slogan > h1, h2,h3,img, div,#slogan > p {
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
}

body { margin: 0px;}




#slogan {

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content max-content;
    --row1Height: calc(var(--h1Height) + 10px);
    gap: 20px;

    text-align: center;



}


#slogan > h1 {

    padding: 20px 5px 15px;
    grid-row: 1;
    text-align: center;
    margin-top: 0px;
    color: var(--titleColour);

    border-right: none; /* removed for mobile */

}



#slogan > p {

    width: 80%;

    justify-self: center;

   grid-row:2;

    text-align: center;

    color: var(--sloganColour);

    text-shadow: 2px 3px 4px rgba(244, 202, 240, 0.2);


}

.cta-btn {margin:30px;
grid-row:3}

  #slogan > .cta-btn {

            margin-bottom: 0px;
margin-top: 0px;
                 }


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

    font-size: 16px;

    padding: 10px 15px;

    background: var(--buttonColour);

    color: var(--buttonTextColour);

}


/* #slogan > .cta-btn > .btn-content:hover {

    background-color: var(--buttonHoverColour);

} */


#slogan > .cta-btn > h5 {

      text-align: center;

    margin-top: 15px;

    color: var(--subTitleColour);

    font-style: italic;

}


#slogan > #images {

    width: 70%;

    max-width: 180px;

    justify-self: center;

    margin-bottom: 15px;

display: none;

}






#testimonials {

    margin-bottom: 100px;

background-color: var(--testimonialsColour);

display: none;

}


#testimonials > p {

    font-size: 12px;

    height: 150px;

    margin-top: 0;

display: none;

}








/* What We Offer - Stack vertically on mobile */

#WhatWeOffer {

    padding: 15px 10px;
    grid-template-rows: 1fr;

   width: 95%;
align-self: center;
justify-self: center;

}



/* Ensure nested sections use grid */

#WhatWeOffer > section {

    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;

    padding: 0;

text-align: center;

}


.hook1, .hook2, .hook3 {

    margin-top: 15px;

text-align: center;

    padding: 10px;

}


#WhatWeOffer > section > section > h3 {

justify-content: center;

justify-self: center;

align-self: center;

text-align: center;

    padding: 10px;

  }


#WhatWeOffer > section > section > img {

    height: auto;

    max-height: 100px;

    width: auto;

    /* max-width: 80px; scale down for mobile */

    justify-self: center;

}


#WhatWeOffer > section > section > p {

      width: 100%;

    margin-top: 15px;

}







/* Figures - 2x2 grid on mobile */

#figures {

    display: grid;

    grid-template-columns: 1fr 1fr;

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

    padding: 15px 10px;

    gap: 20px;
justify-content: center;
align-content: center;

}


#figures > .figuresTitle {

    grid-column: 1 / span 2;

    grid-row: 1;

    padding: 20px 0;

    margin: 0%;

      text-align: center;

    justify-self: center;

    align-content: center;


}



#figures > div {

    height: 300px;

    padding: 10px 5px;

    gap: 15px;

    text-align: center;

    align-content: center;

}


#figures > div:nth-of-type(2) {

    grid-column: 1;

    grid-row: 2;

}


#figures > div:nth-of-type(3) {

    grid-column: 2;

    grid-row: 2;

}


#figures > div:nth-of-type(4) {

    grid-column: 1;

    grid-row: 3;

}


#figures > div:nth-of-type(1) {

    grid-column: 2;

    grid-row: 3;

text-align: center;

align-content: center;

}


#figures > div > img {

    height: 50px;

}


.figure {

    font-size: 2.2rem;

    padding: 10px 0;

}




#figures > div > h4 {

     text-align: center;

}


/* Who/Vision section */

.Who {

    grid-template-columns: 1fr;

    grid-template-rows: auto auto auto;

    padding: 20px 15px;

    row-gap: 25px;

}


.Who > h2 {

    grid-column: 1;

    margin: 0;
align-self: center;
text-align: center;

  }


.Who > p {

    grid-column: 1;

    width: 95%;

   text-align: center;
align-self: center;
margin: 0px;

}


/* How It Works - single column */

#HowItWorks {

    grid-template-columns: 1fr;

    grid-template-rows: repeat(9, max-content);

    padding: 20px 15px;

    row-gap: 30px;

text-align: center;
align-content: center;
display: grid;

}


.box {

    height: 180px;

    width: 90vw;

    justify-self: center;

align-self: center;
}

        .box > img {

            height: 150px;
            width: auto;

        }


.box:nth-of-type(n) {

    grid-column: 1 !important;

}


#HowItWorks > p:nth-of-type(n) {

    grid-column: 1 !important;

    padding-right: 0 !important;

}


.hiw-image-h3 {

     text-align: center;
align-self: center;

}


.hiw-image-p {


    text-align: center;

    width: 95%;

    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-self: center;

}


.arrow {

    display: none;

}


#HowItWorks > .cta-btn {

    grid-column: 1;
margin: 0px;
    margin-top: 20px;

grid-row: 9;

}

#HowItWorks > .cta-btn > .btn-content, #Redirect > .cta-btn > .btn-content {

    font-size: 16px;

    padding: 8px 35px;

    background: var(--buttonColour);

    color: var(--buttonTextColour);

}


/* Testimonials - single column */

#testimonial-section {

    padding: 0 15px 60px;

    background-size: 300px;

    background-position: center 120px;

position: relative;

}


#testimonial-section::before {

    content: "";

        background-image: url("..//Images/post-it.png");        position: absolute;

        top: 0;

        right: 0;

        left: 0;

        bottom: 0;

               background-size: 200px 200px;

        background-position: center;

        z-index: 0;

        opacity:0.1;
        height: 100%;

        z-index: 100;

}



#testimonial-section > h2 {

    padding: 40px 10px;



}


#Redirect {

    grid-template-columns: 1fr;

    gap: 40px;

    padding: 0 20px;

text-align: center;



  background-size: 30px 30px;background-repeat: repeat;

}


.post-it-background > p {

    rotate: 0deg;

    padding: 25px 15px;

    width: 90%;

    justify-self: center;

    transform: none;


}


#Redirect > .cta-btn {

    grid-column: 1;

    margin: 30px 0 20px;

    grid-row: 4;

}


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

    padding: 15px 40px;

 }

.cta-btn > h3 {
    margin: 0px;

}


/* Forms */

#forms {

    padding: 20px 15px;


}


#forms > h3 {

      padding: 0 10px;


}


.inputs {

    width: 90%;

    max-width: 320px;

    height: 45px;

      background-color: var(--formInputsColour);

    color: var(--formInputColour);

    border: 1px solid #ddd;

}


.inputs:focus {

    border: 2px solid black;

}


.inputs::placeholder {

    color: grey;

}


.button {

    font-size: 16px;

    padding: 12px;

    margin-top: 25px;

    background: var(--buttonColour);

    color: var(--buttonTextColour);

    border: none;

    border-radius: 20px;

    cursor: pointer;

}


.button:hover {


    transform: translateY(-2px) scale(1.1);

}


marquee {

    font-size: 14px;

    margin: 10px 0;

    color: #4a4a4a;

}


.oneline {

    color: #333;

}


/* Menu mobile adjustments handled in separate file */


}


/* ========================================

SMALL MOBILE BREAKPOINT (320px - 480px)

======================================== */

@media (max-width: 480px) {


p { text-shadow: 0px}

/* Extra small adjustments */

body {

   /* max-width: 100dvw; */
   /* justify-self: center; */
overflow-x: hidden;
width: 100vw;


}


/* Small device adjustments */


/* Hero section */

#slogan {

    padding: 15px 0px;

    max-width: inherit;
    gap: 0px;


}


#slogan > h1 {

  max-width: 95vw;
  
  }


#slogan > p {

      /* width: 98%; */

        line-height: 1.6;

        text-align: center;
    justify-self: center;
    align-self: center;
    padding:30px 0px;
    margin: 0px;
    margin-left: 0px;

    /* font-size: clamp(1.25rem, 1.4vw + 0.8rem, 1.4rem) */



}


.cta-btn > .btn-content {

      padding: 15px 18px;
margin: 30px 0px;


}


#slogan > .cta-btn > h5 {

     margin-top: 15px;

}


#slogan > #images {

    width: 90%;

    max-width: 200px;


}


#testimonials > p {

      height: 120px;
display:none;

}


/* What We Offer */

#WhatWeOffer {

    padding: 15px 10px;

}


#WhatWeOffer > h2 {

    padding: 15px;

  }


#WhatWeOffer > section > section > h3 {

    padding: 10px;

 }


#WhatWeOffer > section > section > img {

    height: 100px;

}


#WhatWeOffer > section > section > p {

      margin-top: 15px;

}


/* Figures - single column on very small screens */

#figures {

    grid-template-columns: 1fr;
grid-template-rows: repeat(8,auto);

    padding: 10px;

    gap: 15px;

}


 #figures > div:nth-of-type(1),
#figures > div:nth-of-type(2), #figures > div:nth-of-type(3),
#figures > div:nth-of-type(4){

grid-column: 1;

}


#figures > div:nth-of-type(1){
grid-row:2;}


#figures > div:nth-of-type(2){
grid-row:3;}


#figures > div:nth-of-type(3){
grid-row:4;}

#figures > div:nth-of-type(4){
grid-row:5;}





#figures > .figuresTitle {

    grid-column: 1 ;

   }


#figures > div {

    /* height: 250px; */

    padding: 15px 10px;

    gap: 12px;

}


#figures > div > p {

   grid-column: 1

}


#figures > div > img {

    height: 160px;
grid-column: 1;

}


.figure {

    font-size: 3.5rem;
    padding: 5px 0;
grid-column: 1;

}


#figures > div > h4 {

    grid-column: 1;


}


/* Who section */

.Who {

    padding: 0px 10px;

    row-gap: 20px;

    display: grid;
    justify-content: center;
    justify-items: center;

}


.Who > h2 {

     margin: 15px 0;

    text-align: center;


}


.Who > p {



    /* width: 98%; */

    text-align: center;
margin: 0px;
padding: 0px;
    width: 90%;
    justify-self: center;


}


/* How It Works */

#HowItWorks {

    padding: 0px 10px;

    row-gap: 70px;


}


.box {

    height: 170px;
    width: auto;

}


.box > img {

    height: 150px;

}





.hiw-image-p {

      padding: 8px;

    width: 90%;


}


        #HowItWorks > .cta-btn > .btn-content {
            margin-left: 0px;
        }



/* Testimonials */

#testimonial-section {

    position: relative;

    padding: 0 10px 40px;

    background-size: 200px  200px ;

    background-position: center 100px;

    background-position-y: 600px;

    /* opacity: 1; */

    max-width: 95vw;
    justify-self: center;

         /* height: 600px; */



}


#testimonial-section::before {

    content: "";

        background-image: url("/Images/post-it.png");        position: absolute;

        top: 0;

        right: 0;

        left: 0;

        bottom: 0;

               background-size: 200px 200px;

        background-position: center;

        z-index: 0;

        opacity:0.08;
        height: 100%;

        z-index: 100;

}


#testimonial-section > h2 {

    padding: 30px 5px;

     text-align: center;

}


#testimonial-section > #Redirect {

    grid-template-columns: 1fr;

    gap: 25px;

    padding: 0 15px;




}


.post-it-background > p {


    padding: 20px 10px;

    width: 95%;

    justify-self: center;

    transform: none;

}


#Redirect > .cta-btn {

    margin: 20px 0px 15px;

}


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

    padding: 5px 30px;


}


.cta-intro {

      margin-bottom: 20px;

    text-align: center;

}


/* Forms */

#forms {

    padding: 15px 10px;

}


#forms > h3 {

      padding: 0 5px;

}


#form {

    max-width: 320px;

    padding: 15px;

}


.inputs {

    width: 95%;

    max-width: 280px;

    height: 42px;

      padding-left: 15px;

}


.oneline {

    margin-left: 10px;


}


.button {

      padding: 10px;
    margin-top: 20px;

}


marquee {

    font-size: 12px;

}


/* Menu and button styles handled in separate files */


}


/* ========================================

LANDSCAPE MOBILE (orientation specific)

======================================== */

@media (max-width: 768px) and (orientation: landscape) {


#slogan {

    grid-template-columns: 1fr 0.8fr;

    grid-template-rows: auto auto auto;


}


#slogan > h1 {

    grid-column: 1;

    grid-row: 1;

    text-align: left;

    padding: 30px 0px;

}


#slogan > p {

    grid-column: 1;

    grid-row: 2;

    text-align: center;
justify-self: center;
align-self: center;
padding:0px;


    margin: 20px 0px;

}


#slogan > .cta-btn {

    grid-column: 1;

    grid-row: 3;

    justify-self: start;

    margin-left: 20px 0px;

}


#slogan > #images {

    grid-column: 2;

    grid-row: 1 / span 3;

    width: 70%;

}


#testimonials > p {

    height: 100px;

    font-size: 10px;

}


}


/* ========================================

UTILITY CLASSES FOR RESPONSIVE BEHAVIOR

======================================== */


/* Hide elements on specific screen sizes */

.hide-mobile {

display: block;

}


.hide-tablet {

display: block;

}


.hide-desktop {

display: none;

}


@media (max-width: 768px) {

.hide-mobile {

display: none;

}


.hide-desktop {

    display: block;

}


}