@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+TAS:wght@100..400&display=swap');
	*{
			box-sizing: border-box;
	}
	body{
		font-family: 'Poppins', sans-serif;
		margin: 0;
	}

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

	hr{
		background-color: rgb(240, 55, 55);
		width: 68px;
		height: 6px;
		border-radius: 15px;
	}

	header{
		position:fixed;
		display: flex;
		width: 100%;
		justify-content: space-around;
		align-items: center;
		background-color:rgb(241, 224, 203);
		height: 13vh;
		z-index: 999;
	}

	header h1{
		font-family: "Playwrite AU TAS", cursive;
	}

	header ul{
			display: flex;
			list-style-type: none;
			gap: 50px;
		font-size: 1.2em;
	}

	/* ----------- Hero ------------ */
	.hero{
		background-image: url("../hero\ section\ photo\ for\ bakery\'s\ landingpage\ named\ _Joo\ Bakery_.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		padding-top: 80px;
		text-align: center;
		font-size: 1.2em;
		color: #fff;
	}
	.hero a{
		color: #fff;
		background-color: rgb(231, 49, 49);
		padding: .6em;
		border-radius: 18px;
	}

	.hero-content{
		padding-top: 100px;
		justify-content: center;
	}

	/* ---------------- */

	section{
		padding: 40px 150px;
		/* height: 100vh; */
	}

	section h2{
		text-align: center;
		color: black;
		margin-bottom: .2em;
	}

	/* -------- About Section-------- */

	.about-contant{
		display: flex;
		justify-content: center;
		gap: 50px;
		margin-top: 30px;

	}

	.about-our{
		background-color: rgb(204, 201, 198);
		padding: 150px;
		font-size: 2em;
		font-weight: 800;
	}

	.about-story{
		text-align: center;
	}

	/* -------------- services ----------- */

	.cards-container{
		margin-top: 90px;
		display: flex;
		text-align: center;
		justify-content: center;
		gap: 50px;
	}

	.card{
		background-color: #ddd9d9;
		width: 27em;
		box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
		border-radius: 10px;
		padding: 25px;
		margin: 15px;
			transition: 0.7s ease;
	}

	.card:hover {
			transform: scale(1.1);
	}

	.card i{
		color: rgb(218, 59, 59);
		font-size: 3em;
		text-align: center;
	}

	/* ------------ contact --------------- */
	.Contact-us-section{
		padding-top: 30px;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.contact-container{
		margin-top: 70px;
		display: flex;
		justify-content: center;
		gap: 50px;
		
	}

	.Contact-us-section h3{
		text-align: center;
	}
	#formDiv{
		background-color: #e0e0e0;
		padding: 30px 50px;
		width: 40%;
	}

	#gitInTouchDiv{
		background-color: #e0e0e0;
		padding: 30px 50px;
		width: 40%;
		gap: 50px;
	}

	input{
		width: 19em;
		height: 1.8em;
		border-radius: 5px;
	}

	textarea{
		width: 19em;
		height: 8em;
		border-radius: 5px;
	}

#sendMessageBtn{
		color: #fff;
		background-color: rgb(231, 49, 49);
		padding: .6em;
		border-radius: 18px;
}


	/* ----------- Footer ------------ */
	footer{
		background-color: rgb(114, 113, 111);
		font-size: .9em;
		text-align: center;
		justify-content: center;
		padding: 20px 0 20px 0;
		color: #fff;
	}

	footer a{
		color: #fff;
	}
	footer .social-icons,.designed-by{
		margin-top: 15px;
	}


@media (max-width: 641px) {

	body {
		font-size: 12px;
	}

	header {
		flex-direction: column;
		height: auto;
		padding: 10px 0;
	}

	header ul {
		flex-direction: column;
		gap: 15px;
		padding: 0;
	}

	.hero {
		height: 70vh;
		padding-top: 40px;
	}

	section {
		padding: 40px 20px;
	}

	.about-contant,
	.cards-container,
	.contact-container {
		flex-direction: column;
		align-items: center;
	}

	.about-our {
		padding: 40px;
		text-align: center;
	}

	.card {
		width: 90%;
	}

	#formDiv,
	#gitInTouchDiv {
		width: 100%;
	}

	input,
	textarea {
		width: 100%;
	}

	iframe {
		width: 100%;
		height: 200px;
	}
	}