.title-parent {
	position: absolute;
	width: 100vw;
	height: min-content;
	flex-direction: row;
	justify-content:center;
	margin-top: 1em;
	gap: 20vw;
}

.action-parent {
	display: none;
}



#catalog {
	width: 50vw;
}
.action-group{
	display: none;
	flex: 0;
	margin-top: 2em;
	padding-left: 5vw;
}

.text{
	position: absolute;
	width: 100vw;
	top: 1em;
	left: 1em;
}

.ai-and-automation{
	top: 80vh;
}


.game-development{
	left: 65vw;
}
.web-development{
	left: 35vw;
	top: 90vh;
}

.v-100{
	top: 1em;
	right: 15vw;
}

#products{
	z-index: 50;
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: stretch;
	width: 100%;
	max-height: 60vh;
	overflow-y: scroll;
	overflow-x: hidden;
	gap: .2em;
	padding-top: .2em;
}

#products > .contact-frame{
	min-height: 10vw;
	width: 100%;
	margin: .1em;
}
.action{
	min-height: 5em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: .25em;
	width: 100%;
}

.item-img{
	width: 15vw;
	margin: 0%;
}
.details{
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	color: var(--screen);
}
.item-desc{
	font-size: medium;
	font-weight: bold;
	text-decoration: none;
	padding: .5em;
}
.item-title{
	font-size: large;
	font-weight: bolder;
	width: 20em;
}
a{
	text-decoration: none;
}
#contactContainer, .popup-overlay{
	display: none;
	position: absolute;
	top: 0%;
	bottom: 0%;
	height: 100vh;
	width: 100vw;
	background-color: transparent;
	left: 100%; /* hide when not in use */
	transition: left 3s ease-in-out;
	transition: background-color 3s ease-in-out;
	transition: opacity 3s ease-in-out;
}

#contactContainer.closeable, .popup-overlay.closeable{
	display: flex;
	z-index: 100;
	left: 0%;
	background-color: #000000AA;
}

.contact8{
	width: 100vw;
	justify-items: center;
}
.chat-with-us-group{
	min-width: 20em;
}
.contact{
	position: absolute;
	width: 80%;
	height: 100%;
	bottom: 0%;
	top: 0%;
	left: 20%;
	overflow-y: scroll;
}

@media screen and (max-width: 900px) {
	#products{
		width: 100%;
		height: 100vh;
	}
	.our-products{
		font-size: large;
	}
	.frame-parent{
		width: 100vw;
	}
	.action-parent {
		display: flex;
		align-items: flex-start;
		min-height: 1.5em;
	}
	.text{
		display: none;
	}
	#catalog{
		position: absolute;
		width: 90vw;
		height: 100vh;
		margin: 0%;
		left: 5%;
		top: 0%;
		padding: 0%;
	}
	body{
		height: 100vw;
		overflow-y: hidden;
	}
	.contact8{
		display: none;
	}
	.contact1{
		display: flex;
	}
	.title1{
		display: none;
	}
	.innova-title-1 {
		position: relative;
		width: 100%;
		height: 100%;
		object-fit:contain;
	}
	  
	.title-parent{
		margin-left: 0%;
		padding: 0%;
		left: 0%;
		transform: none;
	}
	.action{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.item-img {
		width: 40vw;
	}
	.details{
		width: 40vw;
	}
	.item-title{
		font-size: small;
	}
	.item-desc{
		font-size: .25em;
	}
	
}