.grid-container1 {
	display: grid;
	grid-template-columns: 0% 36% 32% 32% 0%;
}

.grid-container1>div {
   margin: 4px;
   display: flex;
   justify-content: center;
	    flex-direction: column;
}

.item1 {
	grid-column: 2/5;
	grid-row: 1/3;
	background-color: #FFF;
	padding: 15px;
}

.item1 ul {
	list-style: none;
}

.item1 ul li:before {
	display:inline;
	content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
	color: #fab31e; /* Change the color */
  	font-weight: bold; /* If you want it to be bold */
  	display: inline-block; /* Needed to add space between the bullet and the text */
  	width: 1em; /* Also needed for space (tweak if needed) */
  	margin-left: -1em; /* Also needed for space (tweak if needed) */
	font-size: 2.2vh;
}

.item2 {
   grid-column: 2/5;
   grid-row: 3/3;
	background-color: #a6ca56;
}

.item3 {
   grid-column: 2/5;
   grid-row: 3/3;
	background-color: #6fc7da;
}

.item4 {
   grid-column: 3/3;
   grid-row: 2/4;
	background-color: #fab31e;
}

.item5 {
   grid-column: 4/4;
   grid-row: 3/3;
	background-color: #9d9d9c;
}

.item2, .item3, .item4, .item5 {
overflow: hidden;
}

.item2 img, .item3 img, .item4 img, .item5 img {
height: 100%;
width: 100%;
object-fit: cover;
}

.item3, .item4, .item5 {
	visibility: hidden;
	}

.grid-container2 {
	display: grid;
	grid-template-columns: 0% 22% 26% 52% 0%;
	background: #fab31e;
}

.grid-container2>div {
	margin: 4px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.item6 {
	grid-column: 2/5;
	grid-row: 1/1;
	color: #FFFFFF;
	padding: 15px;
}

.item6 h1 {color: #FFFFFF;}

.grid-container3 {
	display: grid;
	grid-template-columns: 0% 41% 53% 6% 0%;
	background: #fab31e;
}

.grid-container3>div {
	margin: 4px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.item7 h1 {color: #FFFFFF;}

.item7 {
	grid-column: 2/5;
	grid-row: 1/1;	
	color: #FFFFFF;
	padding: 15px;
}

.item8 {
	grid-column: 2/5;
	grid-row: 2/2;	
	padding: 15px;
}

.item8 img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.DemoVideo {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.DemoVideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.grid-container4 {
	display: grid;
	grid-template-columns: 0% 44% 51% 5% 0%;
}

.grid-container4>div {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.item9 {
	visibility: hidden;
}

.item10 {
	grid-column: 2/5;
	grid-row: 1/1;
	padding: 15px;
}

.item11 {
	grid-column: 1/6;
	grid-row: 2/2;
	padding: 15px;
}

.item12 {
	grid-column: 2/5;
	grid-row: 3/4;
}





/* Medium devices such as tablets (768px and up) */
@media only screen and (min-width: 48em) and (orientation: landscape) {


.item1 {
	grid-column: 2/4;
	grid-row: 1/4;
	background-color: #FFF;
	padding: 15px;
}

.item2 {
	grid-column: 4/5;
	grid-row: 1/2;
	background-color: #a6ca56;
}

.item3 {
	visibility: visible;
	grid-column: 4/5;
	grid-row: 2/3;
	background-color: #a6ca56;
}

.item5 {
	visibility: visible;
	grid-column: 4/5;
	grid-row: 3/4;
	background-color: #a6ca56;
}

}







/* Large devices such as laptops (1024px and up) */
@media only screen and (min-width: 64em) {

.grid-container1 {
	display: grid;
}

.grid-container1>div {
   margin: 4px;
   display: flex;
   justify-content: center;
	    flex-direction: column;
}

.item1 {
   grid-column: 2/2;
   grid-row: 1/4;
	background-color: #FFF;
	padding: 15px;
}

.item1 ul {
	list-style: none;
}

.item1 ul li:before {
	display:inline;
	content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
	color: #fab31e; /* Change the color */
  	font-weight: bold; /* If you want it to be bold */
  	display: inline-block; /* Needed to add space between the bullet and the text */
  	width: 1em; /* Also needed for space (tweak if needed) */
  	margin-left: -1em; /* Also needed for space (tweak if needed) */
	font-size: 2.2vh;
}

.item2, .item3, .item4, .item5 {
	visibility: visible;
	}

.item2 {
   grid-column: 3/3;
   grid-row: 1/1;
	background-color: #a6ca56;
}

.item3 {
   grid-column: 4/4;
   grid-row: 1/3;
	background-color: #6fc7da;
}

.item4 {
   grid-column: 3/3;
   grid-row: 2/4;
	background-color: #fab31e;
}

.item5 {
   grid-column: 4/4;
   grid-row: 3/3;
	background-color: #9d9d9c;
}

.item2, .item3, .item4, .item5 {
overflow: hidden;
}

.item2 img, .item3 img, .item4 img, .item5 img {
height: 100%;
width: 100%;
object-fit: cover;
}

.grid-container2 {
	display: grid;
	background: #fab31e;
 	background-image: url("images/phone-bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: right;
}

.grid-container2>div {
	margin: 4px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.item6 {
	grid-column: 2/4;
	grid-row: 1/1;
	color: #FFFFFF;
	padding: 15px;
}

.item6 h1 {color: #FFFFFF;}

.grid-container3 {
	display: grid;
	background: #fab31e;
}

.grid-container3>div {
	margin: 4px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.item7 h1 {color: #FFFFFF;}

.item7 {
	grid-column: 2/2;
	grid-row: 1/1;
	color: #FFFFFF;
	padding: 15px;
}

.item8 {
	grid-column: 3/5;
	grid-row: 1/1;
	padding: 15px;
}

.item8 img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.grid-container4 {
	display: grid;
}

.grid-container4>div {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.item9 {
	visibility: visible;
	grid-column: 1/3;
	grid-row: 1/1;
	background-image: url("images/about-us.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: left;
}

.item10 {
	grid-column: 3/5;
	grid-row: 1/1;
	padding: 15px;
}

.item11 {
	grid-column: 1/6;
	grid-row: 2/2;
	padding: 15px;
}

.item12 {
	grid-column: 2/5;
	grid-row: 3/4;
}


}




/* Small devices such as large phones (640px and up) */
/* @media only screen and (min-width: 40em) {...} */

/* Medium devices such as tablets (768px and up) */
/* @media only screen and (min-width: 48em) {...} */

/* Large devices such as laptops (1024px and up) */
/* @media only screen and (min-width: 64em) {...} */

/* Largest devices such as desktops (1280px and up) */
/* @media only screen and (min-width: 80em) {...} */