body{
    font-family: 'Manjari', sans-serif;
    background-image: url(/images/Medicinalherbs.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: 10px;
    }
    
    img {
        padding-top: 10px;
    }
    
    .subtitle{
        height: auto;
        width: 39%;
        position: relative;
        left: 3%;
        border-radius: 20px;
        font-size: 1em;
        padding: 15px; 
        padding-bottom: 2%;
        color: white;
        background-color: rgba(255, 255, 255, 0.228); 
    }
    
    p{
        font-size: 1.8vw; 
    }
    
    .Content{
        position: static;
    }

 /*BODY*/

    .grid-container {
        display: grid;
        grid-template-columns: 4% 20% 4% 20% 4% 20% 4% 20% 4%;
        grid-template-rows: 200px 200px 200px;
        row-gap:80px;
        background-color: #151E15;
        padding-top: 50px;
        padding-bottom: 70px;
        margin-top: 180px;
      }

    .Im1{

          grid-column: 2;
          grid-row: 1/2;   
    }
    .Im2{
        grid-column: 4/5;
        grid-row: 1/2;
        height: 100%;
    }
    
    .Im3{
        grid-column: 6/7;
        grid-row: 1/2;

    }
    .Im4{
        grid-column: 8/9;
        grid-row: 1/2;

    }

    .Im5{
        grid-column: 2/3;
        grid-row: 2/3;
        height: 100%;
        width: 100%;
    }
    .Im6{
        grid-column: 4/5;
        grid-row: 2/3;
        height: 100%;
        width: 100%;
    }
    .Im7{
        grid-column: 6/7;
        grid-row: 2/3;
        height: 100%;
        width: 100%;
    }
    .Im8{
        grid-column: 8/9;
        grid-row: 2/3;
        height: 100%;
        width: 100%;
    }

    .Im9{
        grid-column: 2/3;
        grid-row: 3/4;
        height: 100%;
        width: 100%;
    }
    .Im10{
        grid-column: 4/5;
        grid-row: 3/4;
        height: 100%;
        width: 100%;
    }
    .Im11{
        grid-column: 6/7;
        grid-row: 3/4;
        height: 100%;
        width: 100%;
    }

    .Im12{
        grid-column: 8/9;
        grid-row: 3/4;
        height: 100%;
        width: 100%;
    }

    .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{
        height: auto;
        background-color: rgba(0, 0, 255, 0);
        grid-column: 4/8;
        width: 240px;
        height: 65px;
    }
    
    .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: 25% 50% 25%;
        width: 100%;
    }
    
    .header{
       height: auto;
    }
    
    a:hover {
        text-decoration: underline;
    }
      
      a:active {
        text-decoration: underline;
    }
    
    .title{
        padding-top: 40px;
        position: relative;
        padding-left: 3%;
        font-size: 3vw;
        color: white;
        line-height: 0.8;
    }
    
    img {
        padding-top: 10px;
    }
/*BODY*/


   

/*FOOTER*/
.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;
}

}