*{
    margin: 0;
    padding: 0;
}
/* -------------------------------Front Page Background------------ */
.background{
    background-image: url(./Pageview.jpg);
    background-size: 100;
}
/* -------------------------------Navbar-------------------------- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 10px 20px;
}
/* Style the center section with the logo */
.center {
    flex: 0.5;
}

.center img {
    max-width: 8rem;
    padding-top: 10px;
}

/* Style the right section with the search input and button */
.right {
    flex: 1;
    text-align: right;
    padding-right: 5px;
}

.right input {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.right button {
    background-color: #4fb520;
    color: #fff;
    padding: 11px 15px;
    border: none;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    cursor: pointer;
}

.right button:hover {
    background-color: #287c00;
}
.user{
    background-image: url(./Photos/user.png);    
    align-items: center;
}
.login button{
    background-color: #4fb520;
    color: #fff;
    padding: 11px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}
.login button:hover {
    background-color: #287c00;
}
/* ------------------------------------Banner CSS ----------------------- */
.Banner{
    width: 100%;
    background-size: cover;
    justify-content: center;
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: 35rem;
    padding-bottom: 5rem;
}
div .Image{
    background-image: url(./Pageview.jpg);
    background-size: cover;
}
div .Intro{
    margin: 0;
    font-family: Arial, sans-serif;
    display: flexbox;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center
}
.Intro h1{
    color: #287c00;
    font-family: 'Raleway', sans-serif;
    padding-top: 10rem;
    font-size: 3rem;
    padding-bottom: 1rem;
}
.Intro h2{
    text-align: center;
    font-weight: normal;
    font-size: 2rem;
    font-family: 'Raleway', sans-serif;
    padding-bottom: 3rem
    
}
button{
    border: none;
    text-align: center;
    color: white;
    background-color: #256311;
    padding: 1.1rem 2rem;
    border-radius: 4rem;
    
}
button.Learn{
    border: none;
    text-align: center;
    color: white;
    padding: 1.1rem 2rem;
    border-radius: 4rem;
}
/* -------------------------------------------Details--------------------------- */
.About{
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: auto;
    padding-bottom: 4rem;
}
.DetailsImage{
    width: 90%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background-size: cover;
    background-image: url(./Why.jpg);
}
.Details{
    margin: 2rem;
}
.Details h1{
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    padding-bottom: 2rem;
}
.Details h2{
    font-family: 'Raleway', sans-serif;
    padding-bottom: 2rem;
    font-weight: lighter;
    color: Gray;
    line-height: 1.6;
}
.features h3{
    font-family: 'Raleway', sans-serif;
    text-align: center;
    color: #000000;
    padding-bottom: 3rem;
    font-weight: lighter
}
.features h4{
    font-family: 'Raleway', sans-serif;
    text-align: center;
    color: #34a400;
    padding-bottom: 3rem;
}
.features h1{
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 2.5rem;
    padding-bottom: 2.5rem;
}
.features{
    height: 52rem;
    background-color: rgb(233, 233, 233);
    padding-top: 2rem;
}
/* --------------------------------------Features------------------ */
.features1{
    font-family: 'Raleway', sans-serif;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 15rem 15rem 15rem 15rem;
}
div .f1{
    background-color: rgb(255, 255, 255);
    margin: 1.5rem;
    border-radius: 1rem;
}
div .f2{
    background-color: rgb(255, 255, 255);
    margin: 1.5rem;
    border-radius: 1rem;
}
div .f3{
    background-color: rgb(255, 255, 255);
    margin: 1.5rem;
    border-radius: 1.5rem;
}
div .f4{
    background-color: rgb(255, 255, 255);
    margin: 1.5rem;
    border-radius: 1.5rem;
}
.features1 h2{
    text-align: left;
    margin: 2rem;
}
.features1 h3{
    text-align: left;
    margin: 2rem;
    line-height: 1.5;
    font-weight: lighter;
}
/* ------------------------------------------Products------------ */
.products{
    padding-top: 5rem;
}
.products h1{
    text-align: center;
    font-family: 'Raleway', sans-serif;
    padding-bottom: 2.5rem;
}
.products h3{
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: lighter;
}
.allproducts{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;                          
    max-width: 100%;  
    height: 80rem;     
    padding-left: 5.5rem;   
    padding-bottom: 7rem;            
    /* margin: 2rem                     */
  }
  
  .grid-item {
    background-color: #3498db;
    color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  /* ----------Products pics-------------- */
    .grid-item1{
        background-image: url(./Eco-craft/Google-Nest-Thermostat.webp);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item2{
        background-image: url(./Eco-craft/Allbirds-Wool-Runners.jpeg);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item3{
        background-image: url(./Eco-craft/BeeGreen-Reusable-Grocery-Bags.jpg);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item4{
        background-image: url(./Eco-craft/Bees-Wrap-Wax-Wrap.jpeg);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item5{
        background-image: url(./Eco-craft/Compostable-Paper-Plates-Set.jpeg);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item6{
        background-image: url(./Eco-craft/Earth-Breeze-Laundry-Sheets.webp);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item7{
        background-image: url(./Eco-craft/Blueland-Cleaning-Products.webp);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item8{
        background-image: url(./Eco-craft/Smart-Home-Energy-Monitor.webp);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item9{
        background-image: url(./Eco-craft/Leaf-Shave-Safety-Razor.webp);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item10{
        background-image: url(./Eco-craft/To-Go-Ware-Bamboo-Set.webp);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item11{
        background-image: url(./Eco-craft/Tree-Bird-Waxed-Pure-Silk-Eco-Floss.webp);
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .grid-item12{
        background-image: url(./Eco-craft/Swedish-Dishcloths.jpeg);
        background-size: 70%;
        background-repeat: no-repeat;
        
    }


/* ------------------Environmental Harm Calculator-------- */
.environment{
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    background-image: url(./calculator.jpg);
    background-size: cover
}

.centered-container {
  text-align: center;
}

.centered-container h1{
  color: #ffffff;
  font-size: 2.5rem;
  padding-bottom: 1rem;
}

.centered-container h2 {
  color: #d4d4d4;
  font-weight: lighter;
  padding-bottom: 1rem;
}

button.explore{
  background-color: #3498db;
  color: #fff;
  padding: 15px 25px;
  font-size: 16px;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
a{
    text-decoration: none;
    color: white;
}
/* -------------------------------------------------------------------------------footer----------------------------------------------------------------- */

.footer{
    margin-top: 7rem;
    display: grid;
    /* grid-template-columns: 300px 400px 647px; */
    grid-template-columns: auto auto auto ;
    grid-template-rows: auto;
    background-color:black;
    height: 14rem;
    justify-content: space-around;
    align-items: center;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
  }
  
  #footerImage{
    text-align: center;
  }
  
  .footer-text{
    font-family: "Nunito Sans", sans-serif;
    color: white;
    position: relative;
    bottom:1rem;
    /* padding-left: 16px;
    padding-bottom: 10px; */
    font-size: 1rem;
  }
  .quicklink{
    color: rgb(255, 255, 255);
    padding-left: 10rem;
    display: list-item;
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    padding-left: 5rem;
    list-style: none;
    /* padding-top: 0.9rem;
    padding-bottom: 10px; */
  
  }
  .quicklink li a{
    display: list-item;
    padding: 2px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-family: 'Montserrat', sans-serif;
    padding-top: 3px;
  }
  .quicklink li a:hover{
    color: rgb(255, 255, 255);
  }
  .email b{
    color: rgb(255, 255, 255);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem; 
    padding-bottom: 10px;
    padding-left: 0.5rem;
  }
  .email{
    padding-top: 1rem;
    padding-left: 3rem;
  }
  .email input{
    height: 25px;
    width: 400px;
    margin: 7px;
    border-radius: 7px;
    border: white;
    padding: 10px;
    padding-top: 10px;
  
  }
  .logoforfoot{
    height: 7rem;
    width: auto;
    /* padding-top: 1.6rem;
    padding-left: 1.2rem;
    padding-bottom: 0.4rem; */
  }
  button.subscribe1{
    background-color: #287c00;
    color: #fff;
    padding: 11px 15px;
    border: none;
    height: 2.7rem;
    border-radius: 5px;
    cursor: pointer;
}