body{
    font-family: 'Manjari', sans-serif;
    background-image: url(/images/Homeremedies.jpg);
    background-color: #323E33;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

@media only screen and (min-width: 601px) { /*DESKTOP*/

    .logo{
        height: auto;   
    }
           
    .IMG{
        height: 65px;
        width: 60%;
    }
    
    .IMGEVERGREEN{ 
        height: 100%;
        width: 100%;
    }
    
    a {
        color: white;
        text-decoration: none;
    }
    
    .navigation{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        column-gap: 20px;
    }
    
    .pic{
        height: auto;
        background-color: rgba(0, 0, 255, 0);
        grid-column: 1/5;
        width: 240px;
        height: 65px;
    }
    
    .Nav1{
        grid-column: 8/9;
    }
    
    .Nav2{
        grid-column: 9/10;
    }
    
    .Nav3{
        grid-column: 10/11;
    }
    
    .Nav4{
        grid-column: 11/13;
    }
            
    .content{
        height: auto;
        font-size: 1.2vw;
    }
    
    .header{
        height: auto;
    }
    
    a:hover {
        text-decoration: underline;
    }
      
    a:active {
        text-decoration: underline;
    }
    
    .title{
        padding-top: 70px;
        position: relative;
        padding-left: 3%;
        font-size: 3vw;
        color: white;
        line-height: 0.8;
        margin-bottom: 250px;
    }    

.texthomeremedies{
    padding-left: 3%;
    padding-right: 3%;
    color: white;
    font-size: 0.8vw;
    align-content: center;
    padding-top: 3%;
    padding-bottom: 3%;
}
.greenpannel{
    background-color: #323E33;
    width: 96%;
    margin-left: 2%;
    height: auto; 
}

.three{
    width: 100%;
    height: auto;
}

.threeicons{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    position: relative; /**/
    padding-top: 50px;
    color: white;
    text-align: center;
}

 .whitelinks{
    color: white;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    font-size: 2vw;
    margin-bottom: 50%;
} 

.blackbackground{
    background-color: #0F1911;
    width: 100%;
    height: auto;
}


.logofooter{
    text-align: center;
    width: 100%; 
}

.evergreenfooter{
    text-align: center;
    padding-bottom: 1%;
    font-size: 2vw;
}

.whiteline{
    display: flex;
    width: 100%;
    justify-content: center;
}

.line{
    background-color: white;
    height: 1px;
    width: 88%;
}

footer{
    position: relative;
    width: 100%;
    height: auto;
    padding: 50px 100px;
    background: #323E33;
    font-size: 1.8vw;
}

.container{
    color: white;
    font-family: 'Manjari';
    font-size: 2vw;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1r 2fr;
    padding-top: 2%;
}

.footer{
    background-color: #323E33;
    padding-bottom: 2%; /*end of page*/
    padding-top: 1%;
}

.logofooter{
    text-align: center;
    width: 100%;
}

.evergreenfooter{
    text-align: center;
    padding-bottom: 1%;
}

.whiteline{
    display: flex;
    width: 100%;
    justify-content: center;
}

.line{
    background-color: white;
    height: 1px;
    width: 88%;
}

.container{
    color: white;
    font-family: 'Manjari';
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-top: 2%;
    width: 100%;
}

.navigationfooter{
    width: 20%;
    grid-column: 2/4;
}

.navigationfooter2{
    width: 20%;
    grid-column: 4 / 6;
    grid-row: 1/2;
}

.legalfooter{
    width: 20%;
    grid-column: 6/8;
}

.disclaimerfooter{
    width: 100%;
    grid-column: 8/12;
}

ul{
    list-style: none;
    padding: 0px;
}

.copyright{
    color: white;
    padding-top: 5%;
    padding-left: 5%;
    grid-row: 3/4;
    grid-column: 2/7;
    order: 5;
}
}

/*TABLET & SMARTPHONE*/
@media only screen and (max-width: 600px) {

    .logo{
        height: auto;   
    }
    
    .IMG{
        height: 65px;
        width: 60%;
    }
    
    .IMGEVERGREEN{
        width: 100%;
        height: 100%;
    }
                  
    a{
        color: white;
        text-decoration: none;
    }
           
    .navigation{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    
    .pic{
        background-color: rgba(0, 0, 255, 0);
        height: auto;
        grid-column: 4/8;
    }
    
    .Nav1{
        grid-column: 5/9;
        height: 30px;
    }
    
    .Nav2{
        grid-column: 5/9;
        height: 30px;
    }
        
    .Nav3{
        grid-column: 5/9;
        height: 30px;
    }
    
    .Nav4{
        grid-column: 5/9;
        height: 30px;
    }
                     
    .Content{
        height: auto;
        font-size: 1.2vw;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
    }
    
    .header{
       height: auto;
    }
    
    a:hover {
        text-decoration: underline;
    }
      
      a:active {
        text-decoration: underline;
    }

    
.title{
    padding-top: 70px;
    position: relative;
    padding-left: 3%;
    font-size: 3vw;
    color: white;
    line-height: 0.8;
    margin-bottom: 10px;
    grid-column: 2/3;
}

.texthomeremedies{
    padding-left: 3%;
    padding-right: 3%;
    color: white;
    font-size: 0.8vw;
    align-content: center;
    padding-top: 3%;
    padding-bottom: 3%;
}
.greenpannel{
    background-color: #323E33;
    width: 96%;
    margin-left: 2%;
    height: auto;
}

.three{
    width: 100%;
    height: auto;
}

.threeicons{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    position: relative; /**/
    padding-top: 50px;
    color: white;
    text-align: center;
    flex-direction: column;
}

 .whitelinks{
    color: white;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    font-size: 2vw;
} 

.blackbackground{
    background-color: #0F1911;
    width: 100%;
    height: 700px;
}
      
.footer{
    background-color: #323E33;
    height: auto;
}

.logofooter{
    text-align: center;
    width: 100%;
}

.evergreenfooter{
    text-align: center;
    padding-bottom: 1%;
}

.whiteline{
    display: flex;
    width: 100%;
    justify-content: center;
}

.line{
    background-color: white;
    height: 1px;
    width: 88%;
}

.container{
    color: white;
    font-family: 'Manjari';
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-top: 2%;
    width: 100%;
}

.navigationfooter{
    width: 20%;
    grid-column: 3/5;
}

.navigationfooter2{
    width: 20%;
    grid-column: 6/8;
}

.legalfooter{
    width: 20%;
    grid-column: 9/11;
}

.disclaimerfooter{
    width: 100%;
    grid-row: 2/3;
    grid-column: 3/11;
}

ul{
    list-style: none;
    padding: 0px;
}

.copyright{
    color: white;
    padding-top: 5%;
    padding-left: 5%;
    grid-row: 3/4;
    grid-column: 2/7;
}
}