*{
	margin: 0;
	scroll-behavior: smooth;	
}
body{
	background-image: linear-gradient( cyan, whitesmoke,orangered);
}
/*navbar css starts*/
.navbar{
	background-image: linear-gradient( lightblue, whitesmoke,slategrey);
	height:60px;
	position: relative;
	position: sticky;
	top: 0;
}
.logo{
	width: 30%;
	position: absolute;
}
.menu{
	width:70%;
	position: absolute;
	right: 0px;
}
.menu ul li{
	display: inline-block;
	border: 2px solid gold;
	width: 200px;
	height: calc(60px - 4px);
	text-align: center;
	font-size: 1.5em;
	color: yellow;
	line-height: 56px;
	border-radius: 50px;
	text-shadow: 1px 1px 1px red;
	box-shadow: 2px 2px 2px orange;
}
.menu ul li a{
	color: yellow;
}
.menu ul li:hover{
	color: orange;
	text-decoration: underline;
	font-size: 28px;
}
.menu ul li a:hover{
	color: orange;
	text-decoration: underline;
	font-size: 28px;
}
header{
	background-image: url(./images/banner.jpg);
	background-size: 100% 100%;
	height: 70vh;
}
/*navbar css ends*/

/*social media icon css starts*/
.sm{
/*	background-image: linear-gradient( 45deg, ghostwhite, lightgrey);*/
	font-size: 2.5em;
	color: blue;
	position: fixed;
	top: 200px;
	right: 0;
	border-radius: 10px;
}
.fb:hover{
	color: green;
	font-size: 42px;
}
/*social media icon css ends*/


/*product section css start*/

.products{
	margin-top: 30px;
}
.products-img{
	background-image: linear-gradient(45deg, lightpink, yellow, lightsalmon);
	width: calc( 33.33% - 4% );
	float: left;
	margin: 2%;
	padding: 2%;
	box-sizing: border-box;
	text-align: center;
	border-radius: 80px;

}

.products-img>img{
	width: 300px;
	height: 300px;
	border-radius: 50%;
	box-shadow: -4px -4px 3px 3px lawngreen;
}

.products-img>p{
	color: darkcyan;
	text-shadow: 2px 2px 2px white;
	margin: 10px 0;

}
.products-img>a{
	color: darkcyan;
	text-shadow: 2px 2px 2px white;
	text-decoration: none;
	display: inline-block;
	width: 200px;
	height: 40px;
	font-size: 24px;
	border: 3px solid white;
	border-radius: 50px;
	line-height: 40px;
    
}
.products-img:hover{
	box-shadow: -8px -8px 8px darkgrey;
	transition-duration: 3s;
	transform: translateY(-10px);

}

.products-img>img:hover{
	transform: scale(1.1, 1.1);
	transition-duration: 3s;
}
.products-heading{
	color: yellow;
	text-align: center;
	font-size: 50px;
	text-shadow: 4px 4px 4px green;
}

/*product section css ends*/

/*about us section css starts*/

.aboutbody{ 
	margin-top: 30px;
	clear: left;
	display: flex;
	justify-content: space-evenly;

}
.about-us{ 
	margin: 10px;

}
.about-heading{
	font-size: 40px;
	color: cyan;
	text-shadow: 0 0 2px black;
}
.abouttext{
	font-size: 18px;
	height: 300px;
	width: 600px;
	text-align: justify;
	margin: 20px;
	padding: 20px;
	color: darkblue;
	text-shadow: 0 0 2px brown;
}
.about-img{
	margin: 90px 40px 10px 0;
	border-radius: 30px;

}
.about-img:hover{
	box-shadow: -8px -8px 8px lawngreen;
	transition-duration: 3s;
	transform: translateY(-10px);
}

/*about us section css ends*/

/*contact us section css starts*/

.contactbody{
	margin: 30px 0;
	display: flex;
	justify-content: space-around;

}
.contact-heading{
	font-size: 34px;
	color: gold;
	text-shadow: 1px 1px 2px darkred;
}
.address{
	font-size: 20px;
	margin: 10px 0 10px 30px;
	color: darkblue;
	
}
.message{
	background-image: linear-gradient(45deg, skyblue, whitesmoke, grey);
	border: 4px solid brown;
	border-radius: 20px;
	margin-top: 50px;
	padding: 20px 30px;
}
.message>h2{
	font-size: 32px;
	color: gold;
	text-shadow: 0 0 2px red;

}
.message>input, .message>textarea, .message>button{
	font-size: 20px;

}
.message>input, .message>textarea{
	background-color: transparent;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 4px solid darkgreen;

}
.message>input, .message>textarea :focus{
	outline-style: none;

}
.message>label{
	font-size: 20px;
	color: darkgreen;
	text-shadow: 0 0 2px white;
}
.map{
	width: 400px;
	height: 250px;
	border:2px solid red;
}

/*contact us css ends*/

footer{
	background-color: skyblue;
	color: yellow;
	text-align: center;
	padding: 10px 0px;
	clear: left;
	text-shadow: 2px 2px 2px red;
	
}
@media only screen and (max-width: 768px) {
	.aboutbody{
		flex-direction: column;
	}
	.contactbody{
		flex-direction: column;
	}
	.products-img{
		float: none;
	}
}