@media (max-width: 673px){

	/*FINAL UPDATES MADE ON MARCH 20 2022.
	PROJECT SUBMITED ON MARCH-20-2022 TO THE FUTURE READY TALENT. */


	:root{
		--first-color: black;
		--second-color: ;
		--third-color: ;
		--header-icon-color: white;
		--item-icon-color: black;
	}

	body{
		width: 100%;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: rgba(0,0,0,0.101);
	}

	/*

		H E A D E R

	*/

	header{
		width: 100%;
		height: 8.5vh;
		background: rgba(0,0,0,0.3);
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 2;
		transition: 0.1s;/*
		filter: blur(8px);*/
	}

	header:not(header > div > span > ion-icon){
	}

	.sticky{
		width: 100%;
		height: 7vh;
		background: rgba(0,0,0,0.9);
	}

	header > div{ 
		margin: 0 20px;
	}

	header > div > span{
		margin: 0 5px;
	}

	header > div > span > ion-icon{
		font-size: 1em;
		color: var(--header-icon-color);
		cursor: pointer;
		transition: 0.3s;
	}

	/*

		C O V E R P H O T O

	*/

	.coverphoto-container{
		width: 100%;
		height: 50vh;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: relative;
		background: rgba(0,0,0,0.1);
	}

	.coverphoto-container > .coverphoto{
		width: 75%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: url("assets/coverphoto.jpeg") no-repeat;
		background-size: cover;
	}

	.coverphoto-container > .coverphoto > h1{
		font-size: 1.2em;
		font-weight: 800;
		letter-spacing: 0.5em;
		position: relative;
		display: flex;
	}

	.coverphoto-container > .coverphoto > i > h2{
			font-size: 0.5em;
		}

	.coverphoto > *{
		text-transform: uppercase;
		font-family: oswald;
		color: #a2f5a8;
	}

	marquee{
		font-size: 0.65em;
		border-bottom: 3px solid #124578;
		border-top: 2px solid #124578;
		font-family: montserrat;
	}

	/*

		I T E M S L I S T

	*/

	.items-list-container{
		width: 100%;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10vh 0;
	}

	.items-list-container > .items-list{
		width: 100%;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.item{
		width: 155px;
		height: 200px;
		margin: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 10px;
		background: rgb(255,255,255,0.2);
		backdrop-fliter: blur(15px);
	}

	.item span:nth-child(2){
		position: absolute;
		bottom: 15px;
		background: black;
	}

	.item > #item-photo{
		width: 100px;
		aspect-ratio: 1;
		background: cyan;
		position: relative;
		top: 5px;
		border-radius: 10px;
		overflow: hidden;
		transition: 0.3s;
	}

	.item > div{
		width: 100px;
		height: 30px;
		font-size: 0.75em;
		text-align: center;
		margin: 15px 0;
		font-family: poppins;
	}

	.item > *{
		cursor: pointer;
	}

	.item > span > button{
		width: fit-content;
		height: fit-content;
		font-size: 0.65em;
		text-align: center;
	}

	.item > span > ion-icon{
		position: relative;
		margin: 0 5px;
		font-size: 1em;
	}

	/*
		C H A T B O T
	*/

	.chatbot-container{
		width: 90%;
		max-height: 100vh;
		display: flex;
		position: fixed;
		justify-content: center;
		align-items: center;
		right: 20px;
		bottom: -650px;
		overflow: hidden;
	}

	.chatbot{
		width: 100%;
		height: fit-content;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		position: relative;
		cursor: pointer;
		transition: 0.2s;
		font-family: montserrat;
		background: white;
	}

	.chatbot-container.active{
		position: fixed;
		bottom: 0px;
		z-index: 10;
	}

	.chatbot > .input-screen{
		width: fit-content;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.chatbot > .input-screen > iframe{
	 	min-width: 250px !important;
	 	min-height: 500px !important;
	 	width: 87% !important;
	 	height: 100% !important;
 	}
 	/* remove colors */

	.chatbot > *{
		outline: none;
	}

	.chat-head{
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		background: rgba(105,532,114,1);
		color: black;
	}

	.chat-head > h2{
		font-size: 1.3em;
	}

	.chat-head > *{
		margin: 0px 15px;
	}

	.chat-head > div > ion-icon{
		transform: translate(100px,-15px);
		font-size: 2.1em;
		position: absolute;
		color: var(--item-icon-color);
	}

	.chatbot > .chat-head > .headdown, .chatbot.active > .chat-head > .headup{
		visibility: hidden;
	}

	.chatbot-container.active > .chat-head > .headdown{
		visibility: visible;
	}

	.chatbot > input{
		width: 380px;
		height: 50px;
		border: none;
		margin-bottom: 30px;
		font-size: 1em;
	}

	.chatbubble{
		width: 50px;
		height: 50px;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		border: 1.5px solid #000;
		background: white;
		box-shadow: 0 0 3px #012;
		position: fixed;
		bottom: 50px;
		right: 45px;
	}

	.chatbubble > a > ion-icon{
		font-size: 1.5em;
		color: black;
	}


	/*
		F O O T E R
	*/

	footer{
		width: 100%;
		height: fit-content;
		background: #216587;
		margin: 30px 0;
		border-top: 5px solid #000;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 0.75em;
		font-family: roboto condensed;
	}

	footer > .customer-contact-form{
		width: 80%;
		height: 40vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}

	.customer-contact-form > *{
		text-align: center;
		border-radius: 5px;
		width: 300px;
		height: 2.5em;
		border: none;
		margin: 7px 0;
		font-size: 1em;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.customer-contact-form > .customer-name{
	}

	.customer-contact-form > div > input{
		margin: 0 3px;
	}

	.customer-contact-form > textarea{
		resize: vertical;
		width: 300px;
		height: 5em;
	}

	.customer-contact-form > button{
		width: 100px;
		background: pink;
	}

}