/*  mobile phone view */
@media only screen and (max-width: 600px) {
	#profile {
		background-color: rgb(255, 255, 255);
		background-position: center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 2rem;
		align-items: center;
		padding-top: 5rem;
		padding-bottom: 5rem;
	}

	.profile {
		width: 10rem;
		margin-bottom: rem;
	}

	.text-container {
		text-align: center;
	}

	.section-text_p1 {
		font-weight: 500px;
		font-size: 1.5rem;
	}

	.section-text_h1 {
		font-size: 2.5rem;
		color: #e84613;
		font-family: alata;
	}

	.section-text_p2 {
		font-weight: 500px;
		font-size: 1rem;
		margin-bottom: 0.7rem;
		width: 100%;
	}

	.btn_color1,
	.btn_color2 {
		background-color: #000;
		color: #e84613;
		padding: 0.6rem 0.7rem;
		border-radius: 15px;
		border: rgb(53, 53, 53) 0.1rem solid;
		font-size: 0.7rem;
		font-weight: 600;
		transition: all 300ms ease;
	}
	.services {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		width: 100%;
		margin: 0 auto;
	}
	.service-card {
		border: 2px solid black;
		border-radius: 2rem;
		text-align: center;
		padding: 20px 25px;
		background-color: whitesmoke;
		box-shadow: 0 3px 7px rgb(165, 161, 161);
	}
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.sub-container {
	}
	.sub-container {
		display: flex;
		flex-direction: column;
		width: auto;
	}
	.details {
		inline-size: 400px;
		text-align: justify;
		margin: 0 auto;
		margin-bottom: 2rem;
	}

	.copyright {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	footer nav {
		display: none;
	}
}

@media (max-width: 800px) {
	.hideOnMobile {
		display: none;
	}
	.menu-button {
		display: block;
	}
	/* profile section */
	#profile {
		display: flex;
		justify-content: center;
		gap: 1rem;
	}
	.profile {
		width: 15rem;
	}

	.section-text_p1 {
		font-weight: 500px;
		font-size: 1rem;
	}

	.section-text_h1 {
		font-size: 1.8rem;
		color: #e84613;
		font-family: alata;
	}

	.section-text_p2 {
		font-weight: 500px;
		font-size: 1.5rem;
		margin-bottom: 0.7rem;
		inline-size: 23rem;
		line-height: 1.5rem;
	}

	.btn_color1,
	.btn_color2 {
		background-color: #000;
		color: #e84613;
		padding: 0.6rem 0.7rem;
		border-radius: 15px;
		border: rgb(53, 53, 53) 0.1rem solid;
		font-size: 0.7rem;
		font-weight: 600;
		transition: all 300ms ease;
	}
	/* about section */

	.sub-container {
		display: flex;
	}

	/* services section */

	.services {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		width: 80%;
		margin: 0 auto;
	}

	.service-card {
		border: 2px solid black;
		border-radius: 2rem;
		text-align: center;
		padding: 20px 20px;
		margin-top: 3rem;
		background-color: whitesmoke;
		box-shadow: 0 3px 7px rgb(165, 161, 161);
	}
	footer ul {
		display: none;
	}
}

@media (max-width: 400px) {
	.sidebar {
		width: 100%;
	}
}