body
{
    color: black;
    font-family: "Montserrat";
    margin: 0;
    padding: 0;
}
ul
{
    padding: 0;
    margin: 0;
}
button
{
    font-family: "Montserrat";
    padding: 5px;
}
h1
{
    padding: 20px;
    margin: 0
}
h3
{
    padding: none;
    margin: 5px;
}
h4
{
    margin: 5px;
}
input
{
    display: inline;
    white-space: nowrap;
    max-width: 50px;
}
table
{
    border: 1px solid black;
    justify-content: center;
    border-collapse: collapse;
}
td 
{
    border: 1px solid black;
    padding: 5px;
    justify-content: center;
    text-align: center;
}
#map 
{
    height:35vh;
    width: 70vw;
}
#map2
{
    height:35vh;
    width: 70vw;
}
/*********************************************************/
/*Header*/
/*********************************************************/
header
{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    box-shadow: 0 5px 15px rgba(95, 95, 95, 0.418);
    position: sticky;
    top: 0px;
    left: 0px;
    letter-spacing: 2px;

    z-index: 1000;
}
#navBar
{
    display: flex;
    padding: 20px;
}
#navBar li
{
    list-style: none;
    padding: 0 15px;
    position: relative;
}
#navBar li a
{
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    color: black;
    transition: 0.1s ease;
}
#navBar li a:hover,#navBar li a.active
{
    color: rgb(2, 124, 2);
}
#navBar li a.active::after,#navBar li a:hover::after
{
    content: "";
    width: 50%;
    height: 2px;
    background: rgb(2, 124, 2);
    position: absolute;
    left: 25%;
    bottom: -4px;
}
/*********************************************************/
/*Shopping Cart*/
/*********************************************************/

.ShoppingCart
{
    display: grid;
    grid-template-rows: 60px 1fr 60px;
    background-color: rgb(120, 228, 120);
    width: 400px;
    position: fixed;
    inset: 0 -400px 0 100%;
    z-index: 1001;
}
.ShoppingCart .bttn
{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10px;
    padding: 0 15px 15px 15px;
}
.listCart
{
    padding: 10px;
}
.cartProduct
{
    display: flex;
    grid-template-columns: repeat(2,1fr);
    padding: 10px;

}
.cartImage
{
    max-width: 90px;
}
.totalCart
{
    text-align: center;
    letter-spacing: 0.1em;
}

body.showCart .ShoppingCart
{
    inset: 0 0 0 auto;
}
.ShoppingCart h4
{
    margin: 10px;
}
.ShoppingCart p
{
    margin: 10px;
}
/*********************************************************/
/*Cart Icon*/
/*********************************************************/

.icon-cart 
{
    margin: 20px;
    padding: 10px;
    position: fixed;
    inset: auto 30px 30px auto;
    background-color: rgb(137, 255, 137);
    border-radius: 30%;
}
.icon-cart img
{
    max-width: 50px;
}
.icon-cart span
{
    position: absolute;
    top: 45%;
    left: 43%;
}

/*********************************************************/
/*----------------------HOME-----------------------------*/
/*********************************************************/
/*SectionOne*/
/*********************************************************/
#SectionOne
{
    background-image: url(images/planting-a-tree.jpg);
    background-position: center;
    background-size: 180%;
    height: 65vh;
    background-repeat: no-repeat;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: end;
}
#intro
{
    font-size: 14px;
    text-align: right;
    padding-right: 20px;
    padding-top: 20px;
}
#introButton
{
    padding-right: 20px;
    font-size: 14px;
}
/*********************************************************/
/*SectionTwo*/
/*********************************************************/
#SectionTwo
{
    background: white;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}
#headingSectionTwo
{
    font-size: 24px;
    letter-spacing:1px;
    padding-left: 20px;
    padding-right:20px;
}
#paragraphSectionTwo
{
    margin:0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 30px;
}
#buttonSectionTwo
{
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 15px;
}
/*********************************************************/
/*SectionThree*/
/*********************************************************/
#SectionThree
{
    background-color: orange;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#imageSectionThree
{
    
    background-image: url(images/Advert\ \(2\ of\ 9\).jpg);
    height: 20vh;
    width: 100%;
    background-position: bottom;
    background-size: 100%;
}
#paragraphSectionThree
{
    margin:0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 30px;
}
#buttonSectionThree
{
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 30px;
}
/*********************************************************/
/*SectionFour*/
/*********************************************************/
#SectionFour
{
    background: gray;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-around;
}
#textSectionFour
{
    margin-bottom: 30px
}
#SectionFour #products
{
    color: black;
    display: flex;
    flex-direction: column;
    background-color: white;
}
#imageCompost
{
    background-image: url(images/bigstock-Carrot-Vegetable-Grows-In-The--272842444.jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 25vh;

}
#imageLawndressing
{
    background-image: url(images/green-lawn\ \(2\).jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 25vh;
    
}
#paragraphSectionFour
{
    margin:0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 30px;
}
#buttonSectionFour
{
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 30px;
}
/*********************************************************/
/*SectionFive*/
/*********************************************************/
#SectionFive
{
    color: white;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#paragraphSectionFive
{
    margin:0px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 30px;
}
#buttonSectionFive
{
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 30px;
}
/*********************************************************/
/*SectionSix*/
/*********************************************************/
#SectionSix
{
    background-color:rgba(60, 204, 41, 0.61);
    color:black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/*********************************************************/
/*----------------------ABOUT----------------------------*/
/*********************************************************/
/*SectionOne*/
/*********************************************************/
#AboutSectionOne
{
    background-image: url(images/bakkiesoffloading.jpg);
    background-position: center;
    height: 45vh;
    background-size: 200%;
    display: flex;
    flex-direction: column-reverse;
    align-items:flex-end;
    margin: 0px;
    padding: 10px
}
#AboutSectionOne a
{
    padding: 15px;
}
/*********************************************************/
/*SectionTwo*/
/*********************************************************/
#AboutSectionTwo
{
    background-color: gray;
    color: white;
    text-align: center;
    letter-spacing: 1px;
}
/*********************************************************/
/*SectionThree*/
/*********************************************************/
#AboutSectionThree
{
    background-color: white;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px 10px 30px;
}
/*********************************************************/
/*----------------------CONTACT--------------------------*/
/*********************************************************/
/*SectionOne*/
/*********************************************************/
#ContactSectionOne
{
    background-image: url(images/Nothing-Beets-Fall-Gardening1.jpeg);
    background-position: bottom;
    background-size: 140%;
    color: white;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    height: 35vh;
}
/*********************************************************/
/*SectionTwo*/
/*********************************************************/
#ContactSectionTwo
{
    text-align: center;
    padding: 25px;
}
/*********************************************************/
/*SectionThree*/
/*********************************************************/

#ContactSectionThree
{
    display: flex;
    flex-direction: column;
    padding: 10px 30px 50px 30px;
}
#ContactSectionThree iframe
{
    width: 100%;
    height: 50vh
}


/*********************************************************/
/*----------------------Store--------------------------*/
/*********************************************************/
/*SectionOne*/
/*********************************************************/
.StoreSectionOne
{
    z-index: 0;
    padding: 30px;
}
/*********************************************************/
/*----------------------CALCULATOR---------------------------*/
/*********************************************************/
#CalculatorSectionOne
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;
    column-width: 30px;
    text-align: center
}
#CalculatorSectionOne div
{
    padding: 10px;
}
/*********************************************************/
/*----------------------Terms & Condtions------------------------*/
/*********************************************************/
#TermsSectionOne
{
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 300px;
    overflow: auto;
    padding: 30px 0px 30px 0px;
}
#TermsSectionTwo
{
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 300px;
    overflow: auto;
    padding: 30px 0px 30px 0px;
}
#TermsSectionOne p
{
    padding: 0px 30px 0px 30px;
}
#TermsSectionTwo p
{
    padding: 0px 30px 0px 30px;
}

/*********************************************************/
/*----------------------Products--------------------------*/
/*********************************************************/
.ProductsSection
{
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    grid-gap: 25px;
    grid-auto-rows: max-content;
}
.ProductsSectiondiv
{
    padding: 10px;
}
.ProductsSection img
{
    max-width: 100%;
}
.ProductsSection a
{
    text-decoration: none;
    color: black;
}
.ProductsSection a:hover
{
    color: rgb(2, 124, 2);
}
.ProductsSection .price
{
    padding: 7px;
}
.ProductsSection .quantity
{
    padding: 7px;
}
.ProductsSection .addCart
{
    margin: 7px;
}
.ProductsSection section
{
    max-width: 165px;
    box-shadow: 0 5px 5px rgba(95, 95, 95, 0.418);
}


/*********************************************************/
/*----------------------Products Large--------------------*/
/*********************************************************/
.ProductsSectionLarge
{
    display: flex;
    align-items: center;
    flex-direction: column;padding: 10px;
}
.ProductsSectionLarge img
{
    width: 50%;
    padding: 20px;
}
.ProductsSectionLarge input
{
    width: 50px;
    margin: 20px;
}
.ProductsSectionLarge div
{
    display: flex;
    align-items: center;
}

/*********************************************************/
/*----------------------Check Out--------------------*/
/*********************************************************/
.checkOutSectionOne
{
    padding: 30px 30px 0px 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.checkOutSectionTwo
{
    padding: 0px 30px 30px 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.checkOutSectionThree
{
    padding: 0px 30px 30px 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.tableTotal
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.productRow td
{
    text-align: center;
}
.tableTotal
{
    padding-top: 20px;
}
.tableTotal a
{
    padding: 20px;
}
.customerDetails label
{
    padding-right: 10px;
}
.customerDetails input
{
    min-width: 200px;
}
.customerDetails form
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fulfilmentDisplay
{
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fulfilmentDisplay button
{
    margin: 15px;
}
.fulfilmentDisplay h3
{
    padding: 5px;
}
.deliveryHead
{
    padding: 5px;
}
#msg
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
}
.cartSummary
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.paymentTable
{
    max-width: 80vw;
}
.paymentTable img
{
    width: 20vw;
}
.cartItems
{
    width: 100%;
}
.paymentDisplay
{
    padding: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

/*********************************************************/
/*----------------------FOOTER---------------------------*/
/*********************************************************/
footer
{
    background: black;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    letter-spacing: 2px;
}
footer div a
{
    text-decoration: underline;
    color: white;
    padding: 5px
}
#imagesBank
{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 5px;
    row-gap: 5px;
    width:300px;
    justify-items: center;
    align-items: center;
}
#imagesBank img
{
    width: 150px;
}
#links
{
    padding: 30px;
    display: flex;
    flex-direction: column;
}
#socials
{
    display: flex;
    padding-bottom: 50px;
}
#socials img
{
    height: 30px
}
/*********************************************************/

@media (max-width: 320px)
{   
    header
    {
        position: sticky;
        top: -85px
    }
    #navBar ul
    {
        padding: 10px;
    }
    #navBar div
    {
        padding: 0px
    }
    #navBar li a
    {
        font-size: 12px;
        padding: 0px;
    }
    #SectionOne
    {
        background-size: 200%;
    }
    #imagesBank
    {
        width: 260px;
    }
    #imagesBank img
    {
        width: 130px;
    }
    .productRow td
    {
        font-size: x-small;
    }
    .paymentTable
    {
        font-size: x-small;
    }
}
@media (min-width: 321px) and (max-width:380px)
{
    header
    {
        position: sticky;
        top: -115px
    }
}
@media (min-width: 381px) and (max-width:430px)
{
    header
    {
        position: sticky;
        top: -155px
    }
    .productRow td
    {
        font-size: smaller;
    }
    .paymentTable
    {
        font-size: x-small;
    }
}
@media (min-width: 650px)
{
    header .logo
    {
        height: 10vh
    }
    header
    {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        position: sticky;
        top: 0px
    }

    #SectionFour #products
    {
        color: black;
        display: flex;
        flex-direction: row;
        background-color: white;
    }
    #imageCompost
    {
        background-size: 150%;
    }
    #imageLawndressing
    {
        background-image: url(images/green-lawn\ \(2\).jpg);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 25vh;
    }
    footer
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
    }
}