html {height: 100%;
      font-size: 16px;
}

@viewport {
  width: device-width ;
  zoom: 1.0 ;
} 
	*, *:before, *:after{
		margin: 0;
		padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing:border-box;
         box-sizing: border-box;
}



body {
    background-color: white;
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    color: rgba(0, 0, 0, 1);
    height: auto;
}



/* regular view */

.grid-container {
    display: grid;
    width: 100%;
    grid-template-columns:15rem 1fr 20rem;
    grid-template-rows:1.5rem 1fr;
    grid-template-areas: 
        "header header menu"
        "content content content"
}

a {
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
}

.header {
    grid-area: header;
    color: rgba(255, 255, 255, 1);
    padding: 2rem 2rem 0rem 2rem;
    font-family: 'Archivo Black', sans-serif;
    margin-left: 3rem;
    font-weight: 300;
    width: 15rem;
}
.header h2{
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    font-family: 'Archivo Black', sans-serif;
}

.menu {
    grid-area: menu;
    position: relative;
    padding:2rem 2rem 0rem 2rem;
}

.menu ul {
  /*  display: block;
    list-style-type: none;  */
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    width: auto;
    list-style-type: none;  
    padding-right: 5rem;
    padding-top: 0.0rem;
    margin-bottom: 0rem;
}
.menu li{
    padding:0rem 1rem;
    font-size: 1.1rem;
   
}



.content{
    grid-area: content;
    padding-top: 0rem;
    width: 100%;
    display: block;
 
}






/*big screen*/
@media screen and (min-width: 768px){
    
    .workgrid{
        display: flex;
        flex-wrap: wrap;
        margin: 3rem 3rem;;
        justify-content: center;
    }
    
    .content {
        
        direction: rtl;
        width: 80%;
        margin: auto;
        margin-top: 2rem;
        text-align: center;
    }
    
    .content h2 {
  
            margin-top: 0rem;
           font-family: 'Secular One', sans-serif;
            font-size: 2rem;
        text-align: center;
    }
    
    .content h3 {
        font-family: 'Assistant', sans-serif; 
        text-align: center;
            margin: auto;
            margin-top: 0.5rem;
            font-size: 1.2rem;
    }
    
    .path img {
        margin-top: 2rem;
        width: 250px;
        height: auto;
    }
    .hpath img {
        margin-top: 2rem;
        height: 250px;
        width: auto;
    }
    
    .story {
        max-width: 600px;
        width: 80%;
        margin: auto;
        text-align: right;
        margin: 3rem auto;
    }
    .story p {
       font-family: 'Assistant', sans-serif;
        font-size: 1rem;
    }
    
   .infor {
            text-align: center;
            width: 100%;
            direction: rtl;
            
        }
        .infor h4 {
            font-size: 0.7rem;
            font-family: 'Assistant', sans-serif;
        }
        
        .infor h2 {
            margin-top: 1rem;
           font-family: 'Secular One', sans-serif;
            font-size: 2rem;
            
        }
        
        .infor h5{
           font-family: 'Assistant', sans-serif; 
            font-size: 1.3rem;
    }
        
        .infor h3{
            
          font-family: 'Assistant', sans-serif; 
            width: 40%;
            margin: auto;
            margin-top: 2rem;
            font-size: 1.2rem;
        }
        .infor img {
            width: 130px;
        }
        .intext {
            max-width: 600px;
        width: 80%;
        text-align: right;
            margin: auto;
        }
        
        .intext h3{
            text-align: right;
           font-family: 'Assistant', sans-serif; 
            margin: 0rem;
            margin-top: 3rem;
            width: 100%;
        }
        
        .intext p{
           font-family: 'Assistant', sans-serif;
            font-size: 1rem;
        }
        
        .intext h4 {
            margin: 2rem 0rem 4rem 0rem;
            font-size: 1rem;
        }
    
    
}
/*small view */

	@media screen and (max-width: 768px) {
        
        .grid-container {
            grid-template-columns: 1fr;
            grid-template-rows: 0rem 2rem 1fr ;
            grid-template-areas: 
               
                "menu"
                 "header"
                "content"
             
        }
        
        
        .content {
        
        direction: rtl;
        width: 80%;
        margin: auto;
        margin-top: 1rem;
        text-align: center;
    }
    
    .content h2 {
  
            margin-top: 0rem;
           font-family: 'Secular One', sans-serif;
            font-size: 2rem;
        text-align: center;
    }
    
    .content h3 {
        font-family: 'Assistant', sans-serif; 
        text-align: center;
            margin: auto;
            margin-top: 0.4rem;
            font-size: 1.2rem;
    }
    
    .path img {
        margin-top: 2rem;
        width: 200px;
        height: auto;
    }
    .hpath img {
        margin-top: 2rem;
        height: 200px;
        width: auto;
    }
    
        .story {
        width: 100%;
        margin: auto;
        text-align: right;
        margin: 2rem auto 4rem auto;
    }
    .story p {
       font-family: 'Assistant', sans-serif;
        font-size: 1rem;
    }
        
        .infor {
            text-align: center;
            width: 100%;
            direction: rtl;
            
        }
        .infor h4 {
            font-size: 0.7rem;
            font-family: 'Assistant', sans-serif;
        }
        
        .infor h2 {
            margin-top: 1rem;
           font-family: 'Secular One', sans-serif;
        }
        
        .infor h5{
           font-family: 'Assistant', sans-serif; 
        }
        
        .infor h3{
            
          font-family: 'Assistant', sans-serif; 
            width: 80%;
            margin: auto;
            margin-top: 2rem;
        }
        .infor img {
            width: 100px;
        }
        .intext {
            text-align: right;
            width: 100%;
            margin: auto;
        }
        
        .intext h3{
           font-family: 'Assistant', sans-serif; 
            margin: 0rem;
            margin-top: 2rem;
            width: 100%;
            text-align: right;
        }
        
        .intext p{
           font-family: 'Assistant', sans-serif;  
        }
        
        .intext h4 {
            margin: 2rem 0rem 4rem 0rem;
            font-size: 0.8rem;
        }
        
}