* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

	#wrapper 			{
       max-width: 1024px;
	   margin: 10px auto;
	   padding: 5px;
	}

    body {
	font-family: "Roboto", san-serif;
	background-color: rgba(0, 0, 0, 0.5);
    color: #ffff;
	height: 100vh;
    padding: 0;
	margin: 1rem;	
    }

	.grid_one {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-template-rows: 300px;
      grid-auto-flow: dense;
	  position: relative;
    }

	.g1_module_01 {
	   box-shadow: 1px 1px 10px grey;
       background-size: 1010px;
       border-radius: .5em;
	   margin: 0.2rem;
	   padding: 1.5rem;
       background-image: url(..//images/Artboard_WP001.30.webp);
       background-repeat: no-repeat; 
	   background-position: center;
	   align-items: center;
	   overflow: hidden;
	   text-align: left;
    }

	.banner-text {
		max-width: 450px;
}

	.g1_module_02 {
	   box-shadow: 1px 1px 10px grey;
       background-size: cover;
       border-radius: .5em;
	   margin: 0.2rem;
	   padding: 1.5rem;
	   background-image: url(..//images/Artboard 1.11.png);
	   background: #134583;
	   align-items: center;
       overflow: hidden;
       text-align: left;
    }

    .grid_two {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
      grid-auto-rows: 140px;
      grid-auto-flow: dense;
	  position: relative;
    }

	.grid_two>* {
     border-radius: .5em;
	 padding: 0px;
     margin: 0.2rem;
	 align-items: center;
     overflow: hidden;
    }

    .grid_four {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(169px, 1fr));
      grid-auto-rows: 450px;
      grid-auto-flow: dense;
	  position: relative;
    }

	.grid_four>* {
      border-radius: .5em;
	  padding: 0px;
      margin: 0.2rem;
	  align-items: center;
      overflow: hidden;
    }

	img {
     width: 100%;
  	 height: 100%;
  	 object-fit: cover;
  	 cursor: pointer;
}

   .grid:hover .module_text {
   	  opacity: 1;
    }
		
/*h1
{
	position:relative;
	color: #252839;
	-webkit-text-stroke: 0.1vw #383d52;
}

h1::before
{
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	color: #EFCD59;
	-webkit-text-stroke: 0vw #383d52;
	border-right: 2px solid #EFCD59;
	overflow: hidden;
	animation: animate 6s steps(28);
	 animation-delay: 3s;
}

@keyframes animate
{
	from
	{
		width: 0;
	}
	to
	{
		width: 100%;
	}
}*/

	.grid_one_pp {
       display: grid;
       grid-template-columns: auto;
	   grid-template-rows: 150px 150p;
       background-size: cover;
	   background-repeat: no-repeat;
       background-position: center;
       border-radius: .5em;
	   margin: 0.2rem;  
       text-align: left;
	   background: #185180;
		overflow: hidden;
		padding: 1.5rem;
    }

	.div {
		display: block;
}

ul {
	list-style-position: inside;
}

	.eight_module {
	   display: grid;
	   grid-row: span 2;
       grid-column: span 4;
       background-size: cover;      
       background-image: url(..//images/Artboard_WP001.16.png);
       background-repeat: no-repeat;
       background-position: center;   
       text-align: left;
	   vertical-align: middle;
}

    .one_module_1 {
      grid-row: span 1;
      grid-column: span 1;
      background-image: url(..//images/Artboard_WP001.12.png);
	  background-size: cover;
    }

    .one_module2 {
      grid-row: span 1;
      grid-column: span 1;
	  background-size: cover;
    }

    .one_module3 {
      grid-row: span 1;
      grid-column: span 1;
      /*background: url(..//images/Artboard_WP001.11.png);*/
	  background-size: cover;
	  text-align: center;
      vertical-align: middle;
	  line-height: 146.81px;
    }

     .one_module4 {
      grid-row: span 1;
      grid-column: span 1;
      background: url(..//images/Artboard_WP001.10.png);
	  background-size: cover;
    }

    .one_module5 {
      grid-row: span 1;
      grid-column: span 1;
      background: url(..//images/Artboard_WP001.11.png);
	  background-size: cover;
	}

    .two_module_l {
      grid-row: span 1;
      grid-column: span 2;
	  background: #185180;
    }

     .two_module_p {
       grid-row: span 2;
       grid-column: span 1;
    }

     .four_module {
       grid-row: span 2;
       grid-column: span 2; 
    }

     .six_module {
       grid-row: span 2;
       grid-column: span 3; 
    }

     .twelve_module {
       grid-row: span 3;
       grid-column: span 4; 
    }

     .eighteen_module {
       grid-row: span 1;
       grid-column: span 4; 
		 background-color: #185180;
    }

/* style - grid - finish */

/*Contact Form Styles*/

     .nine_module {
	  display:block;
		 /*flex-wrap: wrap;
		 /*align-items: flex-start;
		 justify-content: flex-start;*/
      grid-row: span 3;
      grid-column: span 3; 
      background: #134583;
	  background-size: cover;
	  background-repeat: no-repeat;
      background-position: center;
	  margin: 0.2rem;
	  padding: 1.5rem; 
	  position: relative;
	  overflow: visible;
}

.nine_module_2 {
      grid-row: span 3;
      grid-column: span 3;  
      background: url(..//images/Artboard_WP001.18.svg);
	  color: greenyellow;
	  background-size: cover;
	  text-align: center;
      vertical-align: middle
}

.nine_module_3 {
	  display: block;
      grid-row: span 3;
      grid-column: span 3;
	  background: url("..//images/Artboard_WP001.20.png");
	  background-size: cover;
	  background-repeat: no-repeat;
      background-position: center;
	  margin: 0.2rem;
      padding: 1.5rem;
}

	.grid-item .project__img {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	object-fit: cover;
}

	.grid-item {
	 position: relative;
	 overflow: hidden;
}

.module_item {
	display: flex;
	margin: 1rem;
	flex-direction: row;
  	justify-content: flex-start; /* horizontal position */
  	align-items: flex-end; /* vertical position */
}

/*.grid-item .project__img img {
    display: block;
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: 50% 50%;
  	cursor: pointer;
  	transition: 1s ease-in-out
}

.grid-item:hover .project__img img {
	transform: scale(1.1);
}*/

.overlay {
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	height: 100%;
  	width: 100%;
  	opacity: 0;
  	transition: .5s ease;
  	background: rgb(24, 81, 128);
  	background: rgba(24, 81, 128, 1); /* Black see-through */
  	color: #185180;
	overflow: hidden;
}

.grid-item:hover .overlay {
  	opacity: 0.8;
}

.grid-item:hover .module_text_overlay {
   	opacity: 1;
}

.module_text {
	display: flex;
	height: 375px;
	justify-content: flex-end;
	align-items: flex-end;
}

.module_text_overlay {
  opacity: 0;
   	position: relative; 
   	top:50%;
   	left:50%;
   	transform: translate(-50%,-50%);
   	color: #fff;
   	pointer-events: none;
   	z-index: 4;
   	transition: .3s ease-in-out;
   	text-align: left;
	padding: 0.5rem;
}

	.download_text {
	display: flex;
  	align-items: center;
	justify-content: center;
	font-size: 1rem;
	margin-top: 2rem;
    color: #fff;
  
}
	.download {
	display: flex;
	align-content: space-around;
  	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 10px;
	font-size: 1rem;
	margin: 0.5rem 0.5rem;
}

	.download_btn {
	font-size: 1rem;
	margin: 0.2rem;
    background-color: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
	font-size: 22px;
}

	.download_btn:hover {
  	background-color: transparent;
    scale: 1.05;
    color: orange;
	border: none;
	/*border-color: #fff;
	border-radius: 20px;*/
    
}

input, textarea 		{
	display: block; 
	width: 100%; 
	padding: 5px;
	line-height: 10px;	
}

.textarea {
	display: block;
	width: 100%;
	height: 75px;
	padding: 3px 5px;
	background-color: #e6f5ff;
	text-transform: uppercase;
 	box-sizing: border-box;
	line-height: 125%;
	border-radius: .5em;
	border: 2px solid transparent;
	outline: none;
    resize: vertical;
}

label 		{
    display: block;
    margin: 0.2rem auto;
    width: auto;
	font-size: 0.75rem;
}

ol li{
  list-style-type: none;
}

.input[type="text"] {
	display: block;
	cursor: pointer;
	background-color: #e6f5ff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	border-radius: .5em;
	transition: all 0.5s;
	border: 2px solid transparent;
	outline: none;
	padding: 3px 10px;	
}

input[class="submit"]:hover {
  	background-color: fuchsia;
	color: aliceblue;
}

.success{
	color: greenyellow;
	text-align: center;
	padding: 25px;
}

.submit {
  	display: flex;
	letter-spacing: 3px;
    background-color: transparent;
    color: #fff;
	margin-top: 0.5rem;
    padding: 0.2rem;
    border: 1.5px solid;
	border-color: #fff;
    border-radius: 0px;
    cursor: pointer;
    transition: scale 0.2 ease ;
}
.submit:hover{
	color: orange;
}
/*End of Contact Form Styles*/

/* style - footer - start */

footer

.grid_three {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(169px, 1fr));
	padding: 0px;
	font-size: 0.5rem;
	/* background-color: #fff */
	grid-auto-flow: dense;
	/*background-color: #959595;*/
	border-radius: .5em;
}

.footer_left {
	margin: 0.2rem;
	padding: 0.75rem 1.5rem;
}

.footer_right {
	margin: 0.2rem;
	padding: 0.75rem 1.5rem;
}

.footer_text_left {
	display: flex;
	justify-content: flex-start;
}

.footer_text_right {
	display: flex;
	justify-content: flex-start;
}

a {
    color: white;
	text-decoration: none;
}

	h1 {
     letter-spacing: 7px;

	}

	h2 {
     letter-spacing: 4px;


  	}

	h3 {
     letter-spacing: 4px;
word-wrap: break-word;

  	}

	h4 {
     letter-spacing: 4px;


  	}

	h5 {
     letter-spacing: 3px;
  	}

	h6 {
     letter-spacing: 0.5px;
  	}

	p {
  	 font-size: 13px;
	 letter-spacing: 0.5px;

	}

/* style - footer - finish */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	
	.grid_three div {
	grid-column: 1/2;
}
	/*.download_btn {
		display: none;
	}*/
	
			.nine_module {
			overflow: scroll;	
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	
	.footer_text_left {
	display: flex;
  	justify-content: flex-start;
}

	.footer_text_right {
	display: flex;
	justify-content: flex-end;
}

}