/* ---- Colors ------
#0F792D - dark green
#5FB144 - middle green
#E6F0EF - light green



*/



/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;

}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #000000;

}

/* global settings */


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');



/* css starts */

.container {
    display: grid;
    height: 100vh;
    margin: 0px auto;
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-rows: 1fr 4fr 1.2fr 1.2fr 1.2fr;
    grid-template-areas: "logo logo nav"
        "main main img-Box"
        "quotes quotes img-Box"
        "btn1 btn2 img-Box"
        "footer1 footer2 footer3";

}

.aboutcontainer {
    height: 100vh;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-rows: 1fr 4fr 1.2fr 1.2fr;
    grid-template-areas: "logo logo nav"
        "about about aside"
        "wedo wedo aside"
        "footer1 footer2 footer3";

}


.contactcontainer {
    height: 100vh;
    margin: 0px auto;
    display: grid;
    grid-template-columns: .8fr 2fr 1.2fr;
    grid-template-rows: .8fr 6fr 1.2fr;
    grid-template-areas: "logo logo nav"
        "sidebarl contact sidebarright"
        " footer1 footer2 footer3";


}

.gallerycontainer {
    height: 100vh;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-rows: 1fr 4fr 1.2fr;
    grid-template-areas: "logo logo nav"
        "gallery gallery widget"
        "footer1 footer2 footer3";


}


.faqpagecontainer {
    height: 100vh;
    margin: 0px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-rows: 1fr 4fr 1.2fr;
    grid-template-areas: "logo logo nav"
        "faq faq imgbox3"
        "footer1 footer2 footer3";

}





/* Homepage CSS Layout */




.logo {
    grid-area: logo;
    /* grid-row: 1 / 2;
    grid-column: 1 / 3;*/
    background-color: white;
    display: flex;
    align-items: center;
    padding-left: 125px;

}





.main {
    grid-area: main;
    /*  grid-row: 2/4;
    grid-column: 1/3; */
    background-color: #E6F0EF;
    padding: 0 125px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}



.btn1 {
    grid-area: btn1;
    /*  grid-row: 5/6;
    grid-column: 1/2; */
    background-color: #0F792D;
}

.btn2 {
    grid-area: btn2;
    /*  grid-row: 5/6;
    grid-column: 2/3; */
    background-color: #5FB144;
}

.quotes {
    grid-area: quotes;
    /*  grid-row: 4/5;
    grid-column: 1/3; */
    background-color: white;
    vertical-align: middle;

}



.footer1 {
    grid-area: footer1;
}

.footer2 {
    grid-area: footer2;
}

.footer3 {
    grid-area: footer3;
}



/* Styling of Homepage elements */



.logo a {
    color: #0A7B34;
    font-size: 24px;
    font-weight: 700;
}


.logo2 {
    width: 20%;
    padding-right: 20px;
    padding-bottom: 10px;

}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li a {
    font-size: 18px;
    padding: 30px 15px;
    font-weight: 700;
    color: black;
    text-transform: uppercase;
    transition: color .2s ease-in;
}

/* Header hover effect */

nav ul li:hover a {
    color: #5FB144;

}

.main h1 {
    font-size: 36px;
    line-height: 49px;
    font-weight: 700;
    margin-bottom: 30px;
    max-width: 600px;

}

.quotes h2 {
    font-size: 24px;
    line-height: 33px;
    font-weight: 700;
    text-align: center;



}

.footer3 {

    width: 25%;
    float: right;
    height: 100%;
    display: block;

}

.logo_container {
    width: 40%;
    float: left;
    height: 100%;
    display: block;

}

.logo_container img {
    width: 200px;
    height: auto;
    margin-top: 10px;
    margin-left: 15%;

}

.footer3 h1 {
    font-size: 22px;
    display: block;
    margin-bottom: 20px;
}

.footer3 a {
    font-size: 18px;
    font-weight: 200;
    padding-bottom: 5px;
    color: black;
}




}

.footer1,
.footer2,
.footer3 {
    margin-top: 20px;
}

.footer3 li {
    display: inline-block;
    padding: 0 5px;
    font-size: 20px;
}



/* Homepage elements animation */

.main h1 {
    animation-delay: .1s;

}

.main p {
    animation-delay: .2s;
}



.pop-in {
    animation: popIn 2s ease-in forwards;
    opacity: 0;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateX(-100px) scale(0.8);

    }

    to {
        opacity: 1;
        transform: none;
    }
}



/* About page CSS Layout */

about {
    grid-area: about;
    background-color: #E6F0EF;


}

wedo {

    grid-area: wedo;
    background-color: #E6F0EF;

}

about h1,
wedo h1 {
    text-align: center;
    padding: 10px 0;
    background-color: #5FB144;

}

about p,
wedo p {
    padding: 10px;

}


aside {
    grid-area: aside;

}



/* Contact Page CSS Layout */




.sidebarleft {
    grid-area: sidebarl;
    background-color: #E6F0EF;


}

.contact {
    grid-area: contact;
    background-color: #E6F0EF;



}





/* Contact Page Elements */


.sidebarleft {

    background-color: #5FB144;
}

.sidebarleft p,
h2 {
    text-align: center;
    padding: 20px;
    color: white;

}

.sidebarright ul li,
h2 {
    text-align: center;
    padding: 20px;
    color: white;
}


.contactheader {
    text-align: center;
    padding: 20px;

}

input[type=text],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

input[type=submit]:hover {
    background-color: #0F792D;
}

.formcontainer {
    background-color: #E6F0EF;
    padding: 20px 20px 43px 20px;

}

/* Gallery Page Layout */

.img-box {
    grid-area: img-Box;
    /*  grid-row: 2/6;
    grid-column: 3/4; */
    background-color: lightgray;
    overflow: hidden;
    /* -- need background image that would work --*/
    background: url(images/porc1.jpg)no-repeat top center;
    background-size: cover;
}



.btn a {
    color: white;
    font-size: 24px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}


.btn {
    transition: background-color .2s ease-in;
}

.btn:hover {
    background-color: #7f8e8c;

}


.img-box2 {
    grid-area: aside;
    background-color: lightgray;
    overflow: hidden;
    /* -- need background image that would work --*/
    background: url(images/flyer1.jpg)no-repeat center;
    background-size: contain;
}

.img-box3 {
    grid-area: imgbox3;
    background-color: lightgray;
    overflow: hidden;
    /* -- need background image that would work --*/
    background: url(images/dustless1.jpg)no-repeat center;
    background-size: cover;
}

.img-box img {
    width: 100%;

}

/* Img animation */

.slide-in {
    animation: slideIn 2s ease .5s forwards;

}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(150px) skewY(20deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}








/* MOBILE SCREEN MODE --------------- 1 ROW -------Media queries need to adjust for my website still ---------------- */

@media only screen and (max-width: 450px) {
    .img-box {
        display: none;
    }

    .footer1 {
        display: none;
        margin: 0;
    }



    .empty {
        display: none;
    }

    .normalnav {
        display: none;
    }

    .mobilenav {
        grid-area: nav;
        background-color: #E6F0EF;
        display: flex;
        align-content: flex-end;
        align-items: center;
        padding-right: 30px;
    }

    .container {
        grid-template-columns: 1fr;
        grid-template-rows: .2fr .4fr 2.2fr .6fr .4fr .4fr 1fr .4fr;
        grid-template-areas: "logo"
            "nav"
            "main"
            "quotes"
            "btn1"
            "btn2"
            "footer2"
            "footer3";

    }

    .faqpagecontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .2fr .4fr 2.2fr 1fr .4fr;
        grid-template-areas: "logo"
            "nav"
            "faq"
            "footer2"
            "footer3";

    }

    .contactcontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .2fr 1fr .8fr .8fr 1.8fr 1fr .4fr;
        grid-template-areas: "logo"
            "nav"
            "sidebarl"
            "contact"
            "sidebarright"
            "footer2"
            "footer3";
    }

    .aboutcontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .2fr 1fr 1.2fr 1.2fr .8fr 1fr;
        grid-template-areas: "logo"
            "nav"
            "about"
            "wedo"
            "footer2"
            "footer3";

    }

    .gallerycontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: .2fr 1fr 4fr 1.2fr .8fr 1fr;
        grid-template-areas: "logo"
            "nav"
            "gallery"
            "widget"
            "footer2"
            "footer3";


    }


    .sidebarright ul li,
    h2 {
        padding: 20px;
        color: white;
        text-align: center;
    }

    .sidebarright {
        grid-area: sidebarright;
        background-color: #0F792D;
        overflow: visible;
        line-height: 8px;

    }

    .logo {

        padding: 10px 20px;
        text-align: center;
    }

    .logo a {
        font-size: 22px;
        font-weight: 700;

    }


    .logo2 {
        padding-right: 10px;
        padding-bottom: 10px;

    }

    .mobilenav {

        background-color: #0F792D;
        position: relative;

    }

    .mobilenav {
        /* overflow: hidden; */
        background-color: #0F792D;
        position: relative;
        padding: 0px;
    }



    .mobilenav #myLinks {
        display: none;
    }

    .mobilenav a {
        color: black;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 18px;
        display: block;
        font-weight: 700;

    }

    .mobilenav a.icon {
        background: #5FB144;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .mobilenav a:hover {
        background-color: #5FB144;
        color: black;
    }

    .active {
        background-color: #5FB144;
        color: #5FB144;
        margin-right: 20px;


    }



    .main {

        padding: 20px;
        text-align: center;
        background-color: #E6F0EF;

    }

    .quotes {

        text-align: center;
        padding: 20px;
    }

    .btn1 {
        width: 100%;
    }


    .footer2 {
        width: 100%;
        padding: 20px;
        margin: 0;
        text-align: center;

    }

    .footer3 {
        width: 100%;
        margin: 0;
        padding: 20px;
        text-align: center;
        background-color: #E6F0EF;

    }

}

/* ------------------------------ Mobile / Tablet View 2 ROWS -----------*/
@media only screen and (max-width: 768px) and (min-width: 451px) {
    .img-box {
        display: none;
    }

    .footer1 {
        display: none;
        margin: 0;
    }

    .normalnav {
        display: none;
    }

    .mobilenav {
        grid-area: nav;
        background-color: #E6F0EF;
        display: flex;
        align-content: flex-end;
        align-items: center;
        padding-right: 30px;
    }




    .aboutcontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .2fr .2fr 1.2fr 1.2fr .8fr;
        grid-template-areas: "logo logo"
            "nav nav"
            "about about"
            "wedo wedo"
            "footer2 footer3";


    }

    .contactcontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .2fr .2fr 1.2fr .8fr 8fr .8fr;
        grid-template-areas: "logo logo"
            "nav nav"
            "sidebarl sidebarl"
            "contact contact"
            "sidebarright sidebarright"
            "footer2 footer3";
    }

    .faqpagecontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .2fr .2fr 2.2fr .8fr;
        grid-template-areas: "logo logo"
            "nav nav"
            "faq faq"
            "footer2 footer3";

    }

    .gallerycontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .2fr .2fr 4fr .8fr;
        grid-template-areas: "logo logo"
            "nav nav"
            "gallery widget"
            "footer2 footer3";


    }

    .gallery {
        background-color: #5FB144;
    }


    .sidebarright {
        grid-area: sidebarright;
        background-color: #0F792D;
        overflow: visible;
        line-height: 8px;

    }

    .faqcontainer {
        grid-area: faq;
        margin: 0 auto;
        padding: 0 1.5rem;
        background-color: #E6F0EF;

    }

    .faqheader {
        text-align: center;
        color: black;


    }

    .accordion {

        background-color: #5FB144;
        color: black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 26px;
        transition: 0.4s;
        margin: 8px 0 8px 0;

    }

    .accordion:after {
        content: "\002B";
        float: right;
        margin-right: 40px;
        font-weight: bold;

    }

    .active:after {
        content: "\2212";
        color: white;
    }

    .active,
    .accordion:hover {
        background-color: #0F792D;
        color: white;


    }

    .panel {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        font-size: 18px;


    }

    .panel p {
        padding: 10px;



    }

    .faqcontainer {
        padding-bottom: 10px;

    }


    .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: .2fr .2fr 2.2fr .2fr .4fr;
        grid-template-areas: "logo logo"
            "nav nav"
            "main quotes"
            "btn1 btn2"
            "footer2 footer3";

    }

    .logo {

        padding: 0 20px 0 20px;
        text-align: center;
    }

    .logo a {
        font-size: 22px;
        font-weight: 700;

    }


    .logo2 {
        padding-right: 10px;
        padding-bottom: 10px;

    }

    .quotes {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E6F0EF;
    }

    .mobilenav {
        background-color: #0F792D;
        position: relative;

    }

    .mobilenav #myLinks {
        display: none;
    }

    .mobilenav a {
        color: black;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 18px;
        display: block;
        font-weight: 700;

    }

    .mobilenav a.icon {
        background: #5FB144;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .mobilenav a:hover {
        background-color: #5FB144;
        color: black;
    }

    .active {
        background-color: #5FB144;
        color: #5FB144;
        margin-right: 20px;


    }

    .main {

        padding: 20px;
        text-align: center;

    }

    .quotes {

        text-align: center;
        padding: 20px;
    }



    .footer2 {

        padding-top: 20px;
        margin: 0;
        text-align: center;

    }

    .footer3 {
        padding-top: 20px;
        margin: 0;
        width: 100%;
        text-align: center;
    }

}

/* -------------------------------- DESKTOP VIEW -------- 3 ROWS -----------------*/
@media only screen and (min-width: 769px) {


    .mobilenav {
        display: none;
    }

    .normalnav {
        grid-area: nav;
        background-color: #E6F0EF;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 30px;
    }

    .faqpagecontainer {
        height: 100vh;
        margin: 0px auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr;
        grid-template-rows: 1fr 4fr 1.2fr;
        grid-template-areas: "logo logo nav"
            "faq faq imgbox3"
            "footer1 footer2 footer3";

    }

    .faqcontainer {
        grid-area: faq;
        margin: 0 auto;
        padding: 0 1.5rem;
        background-color: #E6F0EF;

    }

    .faqheader {
        text-align: center;
        color: black;


    }

    .sidebarright {
        grid-area: sidebarright;
        background-color: white;
        overflow: hidden;
        text-align: center;
        line-height: 48px;
        background-color: #0F792D;
        color: white;


    }


    .accordion {

        background-color: #5FB144;
        color: black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 26px;
        transition: 0.4s;
        margin: 8px 0 8px 0;

    }

    .accordion:after {
        content: "\002B";
        float: right;
        margin-right: 40px;
        font-weight: bold;

    }

    .active:after {
        content: "\2212";
        color: white;
    }

    .active,
    .accordion:hover {
        background-color: #0F792D;
        color: white;


    }

    .panel {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        font-size: 18px;


    }

    .panel p {
        padding: 10px;



    }

    .faqcontainer {
        padding-bottom: 10px;

    }


    .container {
        display: grid;
        height: 100vh;
        margin: 0px auto;
        grid-template-columns: 1fr 1fr 1.2fr;
        grid-template-rows: 1fr 4fr 1.2fr 1.2fr 1.2fr;
        grid-template-areas: "logo logo nav"
            "main main img-Box"
            "quotes quotes img-Box"
            "btn1 btn2 img-Box"
            "footer1 footer2 footer3";

    }


    .logo {

        padding: 0 20px 0 20px;
        text-align: center;
    }

    .logo a {
        font-size: 22px;
        font-weight: 700;

    }


    .logo2 {
        padding-right: 10px;
        padding-bottom: 10px;

    }



    .normalnav ul li {

        align-content: center;
        text-align: center;
    }

    .normalnav ul li:hover a {
        color: white;
    }

    .main {

        padding: 20px;
        text-align: center;

    }

    .quotes {

        text-align: center;
        padding: 20px;
    }



    .footer2 {
        
        padding-top: 20px;
        margin: 0;
        text-align: center;

    }

.footer2 h2{
    color:black;
}
    .footer3 {
        padding-top: 60px;
        margin: 0;
        width: 100%;
        text-align: center;
    }

}





/* About CSS Info */




.fade-in {
    animation: fadeIn 1.5s ease-in forwards;

}

@keyframes fadeIn {
    0% {
        opacity: 0;

    }

    100% {
        opacity: 1;
    }
}




/* Contact Page CSS */






/* FAQ Page CSS */



.faqcontainer {
    grid-area: faq;
    margin: 0 auto;
    padding: 0 1.5rem;
    background-color: #E6F0EF;

}

.faqheader {
    text-align: center;
    color: black;


}

.empty {
    grid-area: empty;
}



/* start new accordian */

.accordion {

    background-color: #5FB144;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 26px;
    transition: 0.4s;
    margin: 8px 0 8px 0;

}

.accordion:after {
    content: "\002B";
    float: right;
    margin-right: 40px;
    font-weight: bold;

}

.active:after {
    content: "\2212";
    color: white;
}

.active,
.accordion:hover {
    background-color: #0F792D;
    color: white;


}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
    font-size: 18px;


}

.panel p {
    padding: 10px;



}

.faqcontainer {
    padding-bottom: 10px;

}


/* Mobile Nav Bar */

/*.mobilenav {
    overflow: hidden;
    background-color: #0F792D;
    position: relative;
    padding: 0px;
}
*/
.mobilenav #myLinks {
    display: none;
}

.mobilenav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    display: block;
    font-weight: 700;

}

.mobilenav a.icon {
    background: #5FB144;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    color: white;
}

.mobilenav a:hover {
    background-color: #5FB144;
    color: black;
}

.active {
    background-color: #5FB144;
    color: white;


}


/* Gallery Page Layout */

.image-gallery {
    grid-area: gallery;
    margin: auto;
    width: 85%;
}

.widget {
    grid-area: widget;
    background-color: #E6F0EF;
}









/* Gallery  Page CSS */


div.gallery {
    margin: 10px;
    border: 1px solid #5FB144;
    float: left;
    width: 300px;


}

div.gallery:hover {
    border: 2px solid #0F792D;
}

div.gallery img {
    width: 300px;
    height: auto;
    padding: 5px;

}

div.desc {
    padding: 10px;
    text-align: center;
}