/* big tablet to 1200  from 1023 to 1300 px*/

@media only screen and (min-width:1023px),(max-width:1500px){

    header{
        margin-right: -10em;
    }
    
                                                /*Start about section*/

  
    
    .about-grid{
      
        grid-template-columns:repeat(10,6rem);
        grid-template-rows:repeat(15,4rem);
    }

    .icon-asase-ye-duru{
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start:7;
        grid-row-end:9;
        background-color: transparent;
        margin:auto;
        font-size: 12em;
        color:#3e813e;
    }



  

                                                       /*Plastic*/
 
    .plastic-1{
        background-color: #778957;
        grid-column-start: 2;
        grid-column-end: 5;
        grid-row-start:2;
        grid-row-end:2;
        margin: -.5em;
        padding-top:.5em;
        z-index:1;
        shape-outside:ellipse(50% 50%);
        border:2px;
        border-color: #778957;
  

}


.plastic-2{
        background-color: #778957;
         grid-column-start:2;
         margin-left:1em;
         grid-column-end:5;
         grid-row-start:2;
         grid-row-end:8;
         background-image: url(imgs/plastic-pellets.jpg);
        background-size: cover;
        background-attachment: fixed;
        overflow: hidden;
        margin-top: 10px;
    border-radius: 5% 97% 0% 100% / 0% 100% 15% 100% ;
 


}


.plastic-3{
    grid-column-start:2;
    grid-column-end:5;
    grid-row-start:7;
    grid-row-end:7;
    background-color: #778957;
    margin-left:0;
   

}

    .plastic-1 img{
    max-height: 100px;
    max-width: 100px;
    float:left;
    border-radius: 50%;
    shape-outside: circle(50%);
    shape-margin: 3rem; 
}

                                                          /*Energy*/

.energy-1{
    grid-column-start:7;
    grid-column-end:10;
    grid-row-start:2;
    grid-row-end:2;
    margin: -.5rem;
    background-color:  #778957;
    z-index:1;
  ;

}




.energy-2{
    
    grid-row-start:2;
    grid-row-end:8;
    grid-column-start: 7;
    grid-column-end:10;
    margin-right:1em;
     background-image: url(imgs/green-energy-2.jpg);
    background-size: cover;
    background-attachment: fixed; 
    overflow: hidden;
    border-radius:100% 0% 100% 0% / 100% 4% 94% 0%  ;

}

.energy-3{
        grid-column-start:7;
        grid-column-end:10;
        grid-row-start:7;
        grid-row-end:7;
        background-color:  #778957;
        margin-right: 10px;
      
}


 .energy-1 img{
      max-height: 90px;
      max-width: 90px;
      float:right;
      border-radius: 50%;
      shape-outside: circle(50%);
      
      z-index:1;
    
      }

                                                                /*Food*/

      .food-1{
        grid-column-start:2;
        grid-column-end:5;
        grid-row-start:9;
        grid-row-end:9;
        background-color:#778957;
     
        z-index:1; 
        
    }
    
        .food-3 img {
         max-height: 90px;
         max-width: 90px;
         float:left;
         border-radius: 50%;
         shape-outside: circle(50%);
        }
    
    
    .food-2{
        grid-column-start: 2;
        grid-column-end:5;
        margin-left:1em;
        grid-row-start:9;
        grid-row-end:15;
        background-image: url(imgs/tower-garden.jpg);
        background-size:cover;
        background-attachment: fixed;
        overflow: hidden;
        border-radius:100% 0% 100% 16% / 99% 0% 100% 0%  ;
        
    }
    
    .food-3{
           grid-column-start:2;
           grid-column-end:5;
           grid-row-start:14;
           grid-row-end:14;
           
           background-color: #778957;
           z-index:1;
          
        
    }



                                                                        /*Transport*/
    .transport-1{
        grid-column-start:7;
        grid-column-end:10;
        grid-row-start:9;
        grid-row-end:9;
        background-color: #778957;
        z-index:1;}

.transport-2{
grid-column-start:7;
grid-column-end:10;
grid-row-start:9;
grid-row-end:15;
margin-right:1em;
background-image:url(imgs/eco-vs-nogo.jpg);
background-size: cover;
background-attachment: fixed;
overflow: hidden;
 border-radius:0% 100% 0% 99% / 0% 100% 0% 98%   ; 

}

.transport-3{
grid-column-start:7;
grid-column-end:10;
grid-row-start:14;
grid-row-end:14;
background-color: #778957;

z-index:1;

}

.transport-3 img{

 max-height: 90px;
 max-width: 90px;
 float:right;
 border-radius: 50%;
 shape-outside: circle(50%);
shape-margin: 1em;
}
  





/* small phones and tablets from 768 to 1023 px*/


@media only screen and (max-width:769px){

    header{
        margin-right: -12em;
    }
    
    .about-grid{
        display:grid;
        grid-template-columns: repeat(10,103px);
        grid-template-rows:repeat(18, 80px);
       object-position: center;
        
    }
    

    .text-image{
        display:inline-block;
    }
    
    
    
      .plastic-1{
         background-color: #778957;
         grid-column-start:1;
         grid-column-end:6;
         grid-row-start:1;
         grid-row-end:1; 
       
         z-index: 1;

               }
    
    .plastic-2{
        background-color: #778957;
         grid-column-start:2;
         grid-column-end:6;
         grid-row-start:2;
         grid-row-end:7;
         background-image: url(imgs/plastic-pellets.jpg);
        background-size: cover;
        background-attachment: fixed;
        overflow: hidden;
        margin-top: 10px;
        border-radius: 5% 97% 0% 100% / 0% 100% 15% 100%  ;
       
    }
    
   
    
    
    
   .plastic-3 {
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start:6;
        grid-row-end:6;
        background-color: #778957;
     
    }


    
        .plastic-1 img{
        max-height: 90px;
        max-width: 90px;
        float:right;
        border-radius: 50%;
        shape-outside: circle();
      
    }
    
    
    
    
    .energy-1{
        grid-column-start:8;
        grid-column-end:11;
        grid-row-start:5;
        grid-row-end:5;
        background-color:  #778957;
        z-index:1;
        margin-right: 10px;
        margin-top: 10px;
    }
    
    
    
    
    .energy-2{
        grid-column-start:5;
        grid-column-end:9;
        grid-row-start:5;
        grid-row-end:11;
         background-image: url(imgs/green-energy-2.jpg);
        background-size: cover;
        background-attachment: fixed; 
        overflow: hidden;
        border-radius:100% 0% 100% 0% / 100% 4% 94% 0% ;
   
    }
    
    .energy-3{
            grid-column-start:8;
            grid-column-end:11;
            grid-row-start:6;
            grid-row-end:6;
            background-color:  #778957;
            margin-right: 10px;
          
    }
    
    
     .energy-1 img{
          max-height: 90px;
          max-width: 90px;
          float:right;
          border-radius: 50%;
          shape-outside: circle(50%);
          shape-margin: 1em;
          z-index:1;
        
          }
    
    
    .food-1{
        grid-column-start:1;
        grid-column-end:4;
        grid-row-start:9;
        grid-row-end:9;
        background-color:#778957;
        margin-left: 10px;
        z-index:1; 
        margin-top: 10px;
    }

    .food-1 img{
        max-height: 90px;
        max-width: 90px;
        float:right;
        border-radius: 50%;
        shape-outside: circle(50%);
        shape-margin: 1em;
     
    }
    
        .food-3 img {
         max-height: 90px;
         max-width: 90px;
         float:right;
         border-radius: 50%;
         shape-outside: circle(50%);
         shape-margin: 1em;
        }
    
    
    .food-2{
        grid-column-start: 3;
        grid-column-end:7;
        grid-row-start:9;
        grid-row-end:15;
        background-image: url(imgs/tower-garden.jpg);
        background-size:cover;
        background-attachment: fixed;
        overflow: hidden;
        border-radius:0% 100% 0% 99% / 0% 100% 0% 98%  ;
        
    }
    
    .food-3{
           grid-column-start:1;
           grid-column-end:4;
           grid-row-start:10;
           grid-row-end:10;
           background-color: #778957;
           margin:-.5em;
           z-index:1;
           margin-left: 10px;
        
    }
    
    .transport-1{grid-column-start:8;
                grid-column-end:11;
                grid-row-start:13;
                grid-row-end:13;
                background-color: #778957;
        margin-top: 10px;
        margin-right: 10px;
                z-index:1;}
    
    .transport-2{
        grid-column-start:5;
        grid-column-end:9;
        grid-row-start:13;
        grid-row-end:19;
        background-image:url(imgs/eco-vs-nogo.jpg);
        background-size: cover;
        background-attachment: fixed;
        overflow: hidden;
        border-radius:0% 100% 0% 99% / 0% 100% 0% 98%  ;
    }
    
    .transport-3{
        grid-column-start:8;
        grid-column-end:11;
        grid-row-start:14;
        grid-row-end:14;
        background-color: #778957;
    
        z-index:1;
    
    }
    
    .transport-3 img{
        
         max-height: 90px;
         max-width: 90px;
         float:right;
         border-radius: 50%;
         shape-outside: circle(50%);
         shape-margin: 1em;
    
    }

                                               /*End About Section*/
    
    
    
    .main-article{
        column-count: 2;
    
    }


  
   



/* small phones and tablets from 480 to 767 px*/

/*   @media only screen and (min-width:768px),(max-width:1023px){     */
    
    @media only screen and (max-width:768px){
  

 
   .top-box{ max-width: 300px;}


   .main-nav{
       margin-left:auto ;
       margin-right:auto;
   }
    


    
    .main-nav li{
    font: size: 80%;
    font-weight: 300;
    display:block;
    list-style: none;
    margin-top: -1em;
    
   
                }
    
    .text-box{max-width: 350px;}
     
    
    
    
    
    .about-grid{
        display:grid;
         grid-template-columns:1fr repeat(12,90px)1fr;
        grid-template-rows:repeat(24,80px);
    }
    
    .plastic-1{
         background-color: #778957;
        
         grid-column-start:3;
         grid-column-end:8;
         grid-row-start:1;
         grid-row-end:1;
        z-index:1;  
       
    }
  
    
    
    .plastic-2{
        background-image: url(imgs/plastic-pellets.jpg);
        background-size: cover;
        background-attachment: fixed;
        overflow: hidden;
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start:1;
        grid-row-end:7;
        border-radius: 5% 97% 0% 100% / 0% 100% 15% 100% ;
        
    }
    
    .plastic-3{
         grid-column-start:3;
         grid-column-end:8;
         grid-row-start:6;
         grid-row-end:6;
         z-index:1;
         background-color: #778957; 
      }

    
      .plastic-1 img{
        max-height: 90px;
        max-width: 90px;
        float:right;
        border-radius: 50%;
        shape-outside: circle();
    }
    
    
    
    
    
    
    
    
    .energy-1{
        grid-column-start:3;
        grid-column-end: 8;
        grid-row-start:7;
        grid-row-end:7;
        background-color:  #778957;
        z-index:1;
        margin: 0;
     
      
      
   
    }
    

    
    
    
    
    
    
    .energy-2{

        
        margin-right:0;
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start:7;
        grid-row-end:12;
        background-image: url(imgs/green-energy-2.jpg);
        background-size: cover;
        background-attachment: fixed; 
        overflow: hidden;
        border-radius: 100% 0% 100% 0% / 100% 4% 94% 0% ;
        
    }
    
    .energy-3{
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start: 11;
        grid-row-end:11;
        background-color:  #778957;
        
        margin-right: 0em;
       
    }
    
    .energy-1 img{
          max-height: 90px;
          max-width: 90px;
          float:right;
          border-radius: 50%;
          shape-outside: circle();
        
          }
    
    
    .food-1{
        margin:0;
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start:12;
        grid-row-end:12;
        background-color:#778957;
        z-index:1;
        margin-left: 0;
        
        
    }

    .food-1 img{
        max-height: 90px;
        max-width: 90px;
        float:right;
        border-radius: 50%;
        shape-outside: circle();
     
    }
    
    .food-2{
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start:12;
        grid-row-end:18;
        background-image: url(imgs/tower-garden.jpg);
        background-size:cover;
        background-attachment: fixed;
        overflow: hidden;
        border-radius:0% 100% 0% 99% / 0% 100% 0% 98%  ;;
        
        
    }
    
    
    .food-3{
        
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start:17;
        grid-row-end:17;
        background-color: #778957;
    z-index:1;
        margin-left:0;
    }
    
    
    
    
    .transport-1{
        grid-column-start:3;
        grid-column-end:8;
        margin: 0;
        grid-row-start:18;
        grid-row-end:18;
        background-color: #778957;
        z-index:1;
    }
    
    
    
    .transport-2{
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start:18;
        grid-row-end:23;
        background-image:url(imgs/eco-vs-nogo.jpg);
        background-size: cover;
        background-attachment: fixed;
        overflow: hidden;
        border-radius: 100% 0% 100% 0% / 71% 0% 100% 28% ;
        margin-right:0;
    }
    
    .transport-3{
        margin:0;
        grid-column-start:3;
        grid-column-end:8;
        grid-row-start:22;
        grid-row-end:22;
        background-color: #778957;
        z-index:1;
    
    }

    .transport-3 img{
    
        max-height: 90px;
        max-width: 90px;
        float:right;
        border-radius: 50%;
        shape-outside: circle(50%);
        shape-margin: 1em;
        
    }
   





    .blog {
        column-count: 2 ;
        padding-right: 3em;
        line-height: 1em; 
        column-rule-style:outset;
        column-rule-color: rgba(136, 136, 136, 0.692);
        column-rule-width:3px;
    }
    
     
    

}
    
    
    
      


    
    




/* small phones: from 0 to 480px*/


@media only screen and (max-width:480px){


 

    h1{margin:0;
        color:#fff;
        font-size:100%;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 1px;
        word-spacing: .5em;    
    }


header{
  
}
    
   
 ul li{
    display:flex;
    flex-direction:column;
  margin-left: auto;
  margin-right: auto;
  
}


    
    .text-box{
        max-width:320px;
        align-items: center;
        align-content: center;  
      
    }
    
    
    /* about-grid*/
    
    .about-grid{
        display:grid;
        grid-template-columns:repeat(3,145px);
        grid-template-rows:repeat(25,100px); 
        background-color:#74b774;
    }
    
        /* plastics*/
    
    .plastic-1{
        background-color: #778957;
        grid-column-start:1;
        grid-column-end:4;

        grid-row-start:1;
        grid-row-end:1;
       
            
    }
    
 h5{
    font-size: 80%;
     padding:5px;
     
    }
    
    .plastic-2{
        background-image: url(imgs/plastic-pellets.jpg);
        background-size: cover;
        background-attachment: fixed;
        overflow: hidden;
        grid-column-start:1;
        grid-column-end:4;
        grid-row-start:1;
        grid-row-end:7;   
    }
    
    .plastic-3{
        background-color: #778957;
        grid-column-start:1;
        grid-column-end:5;
       
        grid-row-start:6;
        grid-row-end:6;
        margin-left: 0;
        z-index:1;
        
    }
    
    .plastic-1 img{
        max-height: 90px;
        max-width: 90px;
        float:right;
        border-radius: 50%;
        shape-outside: circle(50%);
        shape-margin: .5em
        ;
    }
    
    
        /* end pastics*/
    
        /* start energy*/
    
    
    .energy-1{
          background-color:  #778957;
          grid-column-start:1;
          grid-column-end:4;
          margin-right:0em;
          grid-row-start:7;
          grid-row-end:7;  
          margin-top:0;
    }

    
    
    .energy-2{
        
        grid-column-start:1;
        grid-column-end:4;
        grid-row-start:7;
        grid-row-end:14;
        background-image: url(imgs/green-energy-2.jpg);
        background-size: cover;
        background-attachment: fixed;
        overflow: hidden;
        border-radius: 100% 0% 100% 0% / 100% 4% 94% 0%;
       
    }
    
    .energy-3{
           grid-column-start:1;
           grid-column-end:4;
           margin-right: 0em;
           grid-row-start: 13;
           grid-row-end:14;
           background-color: #778957;
        
    }
    
         /* end energy*/
    
    
    .food-1{
          grid-column-start:1;
          grid-column-end:4;
         
          grid-row-start:14;
          grid-row-end:14;
          background-color:#778957;
        margin-top:0;
         }
    
    .food-2{
          grid-column-start:1;
          grid-column-end:4; 
          grid-row-start:14;
          grid-row-end:20;
          background-image: url(imgs/tower-garden.jpg);
          background-size:cover;
          background-attachment: fixed;
          overflow: hidden;
        
          }
    
    .food-3{
          grid-column-start:1;
          grid-column-end:4;
          
          grid-row-start:19;
          grid-row-end:19;
          background-color: #778957;
          z-index: 1;
       
    }
    
    .transport-1{
        
           grid-column-start:1;
           grid-column-end:4;
         
         
           grid-row-start:20;
           grid-row-end:20;
           background-color: #778957;
           margin-top: 0;
    }
    
    
    .transport-2{
           grid-column-start:1;
           grid-column-end:4;
           grid-row-start:20;
           grid-row-end:26;
           background-image:url(imgs/sustainable-transport.jpg);
           background-size: cover;
           background-attachment: fixed;
           overflow: hidden;
    }
    
    .transport-3{
           grid-column-start:1;
           grid-column-end:4;
          

          
           grid-row-start:25;
           grid-row-end:25;
           background-color: #778957;
           z-index: 1;
       
    }




    .transport-3 img{
    
        max-height: 90px;
        max-width: 90px;
        float:right;
        border-radius: 50%;
        shape-outside: circle(50%);
      
        
    }
     
    
    
    .text-box h1{font-size: 100%;
    text-align: center;}
    
    .text-box li{
        font-size: 100%;
     
   
    }
    
 
.main-nav{
    display: flex;
    justify-content: center;
    margin-left:.5em;
    margin-top:1em;  
}
   
    

    
    .about-row{
        min-height:50px;
        min-width: 100%;
        background-color: aliceblue;
    }
    
    .market-container{
        
        display:grid;
        grid-template-columns:repeat(12,40px);
        grid-template-rows:repeat(24,40px); 
    }
    
 
    .product-1{
      grid-column-start: 1;
      grid-column-end: 17; 
      grid-row-start:1;
      grid-row-end:10;
    }
    
   
    .main-article{
        column-count: 1;
        
    }

    
    .blog {
        column-count: 1 ;
        padding:1em;
        line-height: 1em; 
        column-rule-style:outset;
        column-rule-color: rgba(224, 132, 73, 0.42);
        column-rule-width:3px;
    }
    

    
    
}

/* End of media quiery small phones: from 0 to 480px*/