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

body{
background-color:#0080c0;


 }

/* Skip Navigation Link */

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
overflow:hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
}


	
 /*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: #0080c0; 
    width: 100%;
	max-width: 1350px;
	margin: 0 auto;
	
	
	}

	/*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: 10px;
	   width: 100%;
 }
 
 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;
}

.video-container {
  text-align: center;
}


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


table {
  width: 100%;
  margin; 5%;
  border-collapse: collapse;
  
}

thead {
  background-color: #0080c0;
  
}

tr, td, th {
  padding: 12px 15px;
  border: 3px solid #0080c0;
  text-align: center;
}

th {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #ffffff;
}





/*Question Form*/
	 
form {
	background-color: #c0c0c0;

	margin: 0 auto;
	padding: 14px;
	border: solid 2px #0080c0;

}

div {
	clear: both;
	padding-top: 10px;
}

div.two label {
	font-weight:bold;
	float: left;
	width: 100px;
	text-align: right;
	padding-right: 10px;
	position: relative;
}

div.two input, div.two select{
	float: left;
	width: 150px;
	text-align: left;
}

div.two select {
	width: 157px;
	
}

div.one {
	text-align: center;
}

#submit{
	clear: both;
	width: 125px;
	height: 30px;
	background:#F29F05;
	text-align:center;
	line-height:20px;
	font-size:12px;
	font-weight:bold;
}

.tooltip {
	display: block; 
	position: absolute; 
	visibility: hidden;
	left: 25em;
	top: 0; 
	width: 10em;
	padding: 0.5em;
	font-weight: normal;
	color: #FFF;
	background-color: #88A61B;
	border:solid 2px #0E3D59;
}

.error {
	color: #D92525;
}
span.error{
	padding-left: 10px;
} 

#subject {
  width: 50%;
  height: 90px;
  box-sizing: border-box;
  padding: 8px;
  resize: vertical;
  color: #000000; /* text color */
  background-color: #ffffff; /* white background */
}

.two {
  display: flex;
  align-items: flex-start; /* keeps label and field aligned at the top */
  margin-bottom: 10px;     /* space between rows */
}

.two label {
  width:20px;
  margin-right: 20px;
  
}

.two input,
.two textarea,
.two select {
  flex: 1;                 /* input fills remaining space */
  max-width: 280px;   /* limit how wide they can grow */
  box-sizing: border-box;
}

			

/* 404 Page Styling */



main h5.error-404 {
  font-size: 40px;
  color: #000000;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  padding: 10px;
}

main p.error.message {
  font-size: 40px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  padding: 10px;
}

main img {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;

}


			
			
			
			
			
			
/*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: 0px;

	
  }

  #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;
	
  }
  
}