/*Grid with Names*/
 
 *{ 
 font-family: Roboto, "sans-serif";
 font-size: 16px;
 color: black;
 margin:0 ;
 padding:0 ;
 box-sizing: border-box;
}

body{
background-color:#ffffff;
 }


	
 /*Primary Grid*/
 
 #wrapper { 
 display: grid;
 grid-template-areas:
 "header"  
 "nav"
 "main"
 "footer";
	grid-template-columns: 1fr;
	grid-template-rows: 150px 55px minmax(650px, 1fr) minmax(100px, auto);
    gap: 20px;
	padding: 20px;
	background-color: #1232ff; 
    width: 100%;
	}

	/*header*/
	header {
		   grid-area: header;
		   width: 100%;
		   height:auto;
		   background-color:#c0c0c0;
		   padding: 20px;
		   font-size: 17px;

	/*sub grid*/
	 display: grid;
 	 grid-template-areas:"logo company";
	 grid-template-columns: auto 1fr;
	 grid-template-rows: 1fr;
	 gap: 20px;
	 
	 
	}
	 

	  
	  header img {
	  		 grid-area: logo;
    		 width:  100%;
    		 height: auto;
			 background-color:#ff00ff;
			 margin: 0;
    
	 }
	  
	  header h1 {
	  		 grid-area:company;
	  		 color:#000000;
	  		 font-size:2em;
	  		 text-align: center;
	 		 padding-bottom: 10px;
	  		 margin-top: 2px;
	  		 line-height:1.5;
	   }

 
 
 /*nav*/
 	nav {
		 grid-area:nav;
		 width:100%;
		 min-height:55px;
		 background-color:#c0c0c0;
		 padding: 20px;
    	 margin-top: 0;
     
 }
 
 
 nav ul {
     	list-style-type: none;
		display: flex;
		flex-direction:row;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100%;
		max-width: 100%;
	
  }
  
 
 nav a {
 	   text-decoration: none;
 	   display: block;
 	   padding: 20px;
 }
 
 nav a:hover{
 		color:white;
 		background:#1232ff;
  }
 
 
 /*main*/
 
 #home-main {
 		grid-area: main;
		width:100%;
		min-height: 650px;
		background-color:#ffffff ;
		padding: 20px;

     /*sub grid*/
	 display: grid ;
	 grid-template-areas:
     "content2 content1"; 
	 
	 grid-template-columns: 1fr 1fr;
	 grid-template-rows: auto;
	 gap: 20px;
 }
	
	#content1 {
		grid-area: content1;
		background-color:#c0c0c0;
		padding: 20px;
}
  
	
	 
	
	 
	 #content1 li {
  	 	margin-bottom: 10px;
     }
	 

	 
	#content2 {
		grid-area: content2;
		background-color:#c0c0c0;
		padding: 20px;
	
	 }
	 
	 #content2 li {
  	 	margin-bottom: 10px;
     }
	
	
	 #content1, #content2 {
  	 	text-align: center;
}

 	.product-info {
  		text-align: left;
  		margin-top: 20px;
  		list-style-type: square;
  		padding-left: 5%;
}


    #content1 h2 {
  		margin-bottom: 30px; 
}

    #content2 h2 {
  		margin-bottom: 30px; 
}

 
 /*footer*/
 	footer { 
		 grid-area: footer;
		 width:100%;
		 min-height:100px;
		 background-color:#ffffff ;
		 padding: 20px;

/*sub grid*/
	 display: grid;
 	 grid-template-areas:
	 "information contact";
	 grid-template-columns: 1fr 1fr;
	 grid-template-rows: auto;
	 gap: 20px;
	 
 
  }
  
   #information{
	 		grid-area:information;
       		max-height: 100%;
	   		background-color:#c0c0c0;
	   		padding: 20px;
	   
	  }
	  
   .information {
   			padding-left: 20px;
}
	  
	 #information h3 {
  	 		margin-bottom: 15px;
     }
	 
	 #information p {
  	 		text-align: left;
  			text-decoration:underline;
  
}
	  
  	  #contact{
	  		   grid-area:contact;
			   max-height:100% ;
			   background-color:#c0c0c0;
			   padding: 20px;
	
	 }
	 
	#contact li {
  			 margin-bottom: 15px;
     }

  	#contact h3 {
  			 margin-bottom: 15px;
     }

	    .contact {
  			 padding-left: 20px;
}


	 
footer ul {
    list-style-type: square;
	display: flex;
	flex-direction:column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: auto;
	max-width: 100%;
	
  }
  
 
footer a {
 	   text-decoration: none;
 	   display: block;
 	   padding: 10px 10px;
 	   width: 100%; 
 
 }
 
footer a:hover{
 	   color:white;
 	   background:#1232ff;
  }
	 
	 

	 
 /*Freight Page*/
	 
 /*main*/
 
#freight-main {
			  grid-area: main;
			  width:100%;
			  min-height: 650px;
			  background-color:#ffffff ;
			  padding: 20px;

     /*sub grid*/
	 display: grid ;
	 grid-template-areas:
     "content4 content3"; 
	 
	 grid-template-columns: 1fr 1fr;
	 grid-template-rows: auto;
	 gap: 20px;
 }
	
	#content3 {
			  grid-area: content3;
			  background-color:#c0c0c0;
			  padding: 20px;
}
  
	
	 
	 #content3 ul li {
	 		   padding: 30px 0;
     		   margin-bottom: 10px;
     }
	 

	 
	#content4 {
			  grid-area: content4;
			  background-color:#c0c0c0;
			  padding: 20px;
	
	 }
	 

	
	 #content3, #content4 {
  	 			text-align: center;
}


     #content4 img {
  	 		   margin: 10px;
  			   width: 45%;
  			   height: auto;
}



      #content4 h2 {
  	  			margin-bottom: 30px; 
}

      #content4 p {
  	  			font-weight: bold;
  				margin: 10px 0 5px 0;
  				text-align: left;
}



/*Allign List to the Left*/
#content4 ul {
  
  		  text-align: left;     
  		  padding-left: 20px;   
  		  margin-bottom: 20px;
  		  list-style: square;     
}

#content4 ul li {
  		  margin-bottom: 5px;
}







/*Customs Page*/
	 
 /*main*/
 
#customs {
		 grid-area: main;
		 width:100%;
		 min-height: 650px;
		 background-color:#ffffff ;
		 padding: 20px;

     /*sub grid*/
	 display: grid ;
	 grid-template-areas:
     "content6 content5"; 
	 
	 grid-template-columns: 1fr 1fr;
	 grid-template-rows: auto;
	 gap: 20px;
 }
	
	#content5 {
			  grid-area: content5;
			  background-color:#c0c0c0;
			  padding: 20px;
}
  
	
	 
	 #content5 ul li {
	 		   padding: 10px 0;
  			   margin-bottom: 10px;
     }
	 
	 #content5 img {
  	 		   margin: 10px;
  	 		   width: auto;
  	 		   height: auto;
}


    #content5 h2 {
  			  margin-bottom: 30px; 
}
	 
	#content6 {
			  grid-area: content6;
			  background-color:#c0c0c0;
			  padding: 20px;
	
	 }
	 

	
	 #content5, #content6 {
  	 		text-align: center;
}


     #content6 img {
  	 		   margin: 10px;
  			   width: auto;
  			   height: auto;
}

	 #content6 ul li {
	 		   padding: 10px 0;
  			   margin-bottom: 10px;
     }

#content6 h2 {
  		  	  margin-bottom: 30px; 
}




/*Process Page*/
	 
 /*main*/
 
#process {
		 grid-area: main;
		 width:100%;
		 min-height: 650px;
		 background-color:#ffffff ;
		 padding: 20px;

     /*sub grid*/
	 display: grid ;
	 grid-template-areas:
     "content8 content7"; 
	 
	 grid-template-columns: 1fr 1fr;
	 grid-template-rows: auto;
	 gap: 20px;
 }
	
	#content7 {
			  grid-area: content7;
			  background-color:#c0c0c0;
			  padding: 20px;
}
  
	
	 
	 #content7 ul li {
	 		   padding: 10px 0;
  			   margin-bottom: 10px;
     }
	 
	 #content8 img {
  	 		   margin: 10px;
  	 		   width: auto;
  	 		   height: auto;
	 
}


    #content7 h2 {
  			  margin-bottom: 30px; 
}
	 
	#content8 {
			  grid-area: content8;
			  background-color:#c0c0c0;
			  padding: 20px;
	
	 }
	 

	
	 #content7, #content8 {
  	 			text-align: center;
}



	 #content8 ul li {
	 		   padding: 10px 0;
  			   margin-bottom: 10px;
     }

	 #content8 h2 {
  		 	    margin-bottom: 30px; 
}

 
	 #content7 img {
	 		   display: block;
  	 		   margin: 40px auto 20px auto;
  	 		   width: auto;
  	 		   height: auto;
	 
}


 	 .process {
  	 		  text-align: left;
  			  margin-top: 20px;
  			  list-style-type: square;
  			  padding-left: 5%;
}






/*About Page*/
	 
 /*main*/
 
#about {
	   	 grid-area: main;
		 width:100%;
		 min-height: 650px;
		 background-color:#ffffff ;
		 padding: 20px;


     /*sub grid*/
	 display: grid ;
	 grid-template-areas:
     "content9 content10"; 
	 
	 grid-template-columns: 1fr 1fr;
	 grid-template-rows: auto;
	 gap: 20px;
 }
	
	#content9 {
			  grid-area: content9;
			  background-color:#c0c0c0;
			  padding: 20px;
	
}
  

	 
	 #content9 ul li {
	 		   padding: 10px 0;
  	 		   margin-bottom: 10px;
  	 		   text-align: left;
     }
	 
	 #content9 img {
  	 		   margin: 10px;
  	 		   width: auto;
  	 		   height: auto;
}


 
	 
	 #content9 {
  	 		   text-align: center;
}



 		h2 {
   			   text-align: center;
  
}

  		#content9 h2 {
  			  margin-bottom: 10px;
  			  margin-top: 20px;
}


		#content9 h4 {
   			   text-align: center;
			   margin-bottom: 10px;
  			   margin-top: 50px;
			   
}

 	#content10 {
			   grid-area: content10;
			   background-color:#c0c0c0;
			   padding: 20px;
	
	 }
  
	#content10 {
  			   text-align: center;
}
	 
	 #content10 ul li {
	 			 padding: 10px 0;
  				 margin-bottom: 10px;
  				 text-align: left;
     }
	 
	 #content10 img {
  	 			margin: 10px;
  	 			width: auto;
  	 			height: auto;
}


    #content10 h3 {
   
   			   margin-bottom: 10px;
  			   margin-top: 20px;
}
	 
	#content9 ul, #content10 ul {
  			  padding-left: 20px;
  			  padding-right: 20px;

}

h4 {
   			   text-align: center;
  			   text-decoration:underline;
			   
}


	 iframe {
  	 		   
  	 		   width: 500px;
  	 		   height:500px;
}



/*Contact Form*/
	 
	 form{
	 	  	  width:30em;
			  margin: 0 auto;
			  background: #c0c0c0;
			  border: 10px solid #0000ff;
}


 	input {
		   	  padding: 0.15em;
			  width: 15em;
			  border: 1px solid #000;
			  background: #fafafa;
			  font: bold 1em Roboto, "sans-serif";
			} 
			
	input[type=checkbox] {
			padding: 0.15em;
			width: 1em;
			border: 1px solid #000;
			background: #fafafa;
			font: bold 1em Roboto, "sans-serif";
			}		 
			

/*Media Queries*/

@media screen and (max-width: 768px) {
  #wrapper {
  
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 20px;
    padding: 20px;
	
  }

  #home-main {
  
    grid-template-areas:
    "content2"
    "content1";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
	
  }

  #freight-main {
  
    grid-template-areas:
    "content4"
    "content3";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
	
  }

  #customs{
  
    grid-template-areas:
    "content6"
    "content5";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
	
  }

  #process{
  
    grid-template-areas:
    "content8"
    "content7";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
	
  }
  
    #about{
  
    grid-template-areas:
    "content9"
	"content10";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
	
  }
  
 footer {
 
  grid-template-areas:
  "information"
  "contact";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  
}
 


  /* Header Text Resize */
  header h1 {
  
    font-size: 1.5em;
	
  }

  /* Font size for smaller screens */
  body {
  
    font-size: 14px;
	
  }

  /* Images responsive */
  img {
  
    width: 100%;
    height: auto;
	
  }
  
}