/* hero */
.hero {
	background-color: #def7ff;
	align-items: center;
	justify-content: center;
}

.image-1 img {
	align-self: flex-end;
	height: 25rem;
}

.hero-content {
	flex-direction: column;
	align-items: center;
	img {
		width: 40%;
	}
	h3 {
		margin: auto;
	}
	p {
		text-align: center;
		letter-spacing: 0.1rem;
		line-height: 2rem;
		font-size: 1.2rem;
		width: 65%;
		margin: 0.5rem;
	}
	.button {
		border-width: 0;
		padding: 0.6rem;
		font-size: 1.2rem;
		margin-bottom: 1rem;
	}
}

.image-2 img {
	height: 15rem;
}

/* problem */
.problem-title {
	p {
		text-align: center;
		letter-spacing: 0.1rem;
		line-height: 2rem;
		font-size: 1.3rem;
	}
}

.problem {
	justify-content: center;
	padding-bottom: 3rem;
}

.problem-item {
	border: 2px solid #439bc1;
	border-radius: 1rem;
	flex-direction: column;
	width: 20rem;
	margin: 1rem;
	padding: 1.5rem;
}

.problem-text {
	border-top: 2px solid #439bc1;
	p {
		word-wrap: break-word;
		letter-spacing: 0.1rem;
		line-height: 1.5rem;
	}
}

.problem-img img {
	width: 100%;
}

.arrow {
	text-align: center;
}

.arrow img {
	width: 3.5rem;
}

/* app */
.app {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #def7ff;
	text-align: center;
	padding: 2.5rem 0 2.5rem 0;
}

.app-text {
	width: 50vw;
	p {
		text-align: center;
		letter-spacing: 0.1rem;
		line-height: 1.8rem;
		font-size: 1.2rem;
	}
}

.app-img {
	justify-content: center;
	align-items: center;
	img {
		width: 45vw;
		border: 2px solid #2fa0f6;
		border-radius: 1.5rem;
	}
}

.main-menu {
	display: flex;
	flex-direction: column;
	padding: 1rem 1rem 0 1rem;
	border-radius: 1rem;
	border: 2px solid #2fa0f6;
	background-color: #fff;
	align-items: flex-start;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 10rem;
	h4 {
		margin: auto;
		padding-bottom: 0.5rem;
	}
	button {
		width: max-content;
		padding: 0.3rem;
		margin-bottom: 1.5rem;
		border: none;
	}
}

.menu-icon {
	img {
		width: 6rem;
	}
}

.menu-icon1 {
	img {
		width: 4.5rem;
		padding-bottom: 0.9rem;
	}
}
/* desc */
.desc {
	justify-content: center;
	align-items: center;
	padding: 2rem;
}

.desc-img {
	padding: 1.5rem;
	img {
		width: 15vw;
	}
}

.desc-text {
	padding: 1.5rem;
	h2 {
		text-align: center;
	}
	p {
		text-align: justify;
		letter-spacing: 0.1rem;
		line-height: 1.8rem;
		font-size: 1.2rem;
	}
}

.desc-text a {
	color: #2fa0f6;
}

.desc-text a:before {
	content: "";
	border-bottom: solid 1px white;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.desc-text a:hover:before {
	border-bottom: solid thin #5caaef;
}

.desc-text a:before {
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

/* points */
.points-title {
	text-align: center;
	color: #439bc1;
	padding: 1rem 0 1rem 0;
	background-color: #def7ff;
}

.points-container {
	justify-content: center;
	background-color: #def7ff;
}

.points-item {
	padding: 1.5rem;
}

.icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.points-item img {
	width: 7.5rem;
}

.points-item {
	h3 {
		text-align: center;
		color: #439bc1;
		font-weight: bolder;
		margin: auto;
		padding: 0.5rem 0 0.5rem 0;
	}
	p {
		margin: auto;
		width: 18rem;
		text-align: center;
	}
}

/* environment */
.env-title {
	padding: 3rem 1rem 1rem 1rem;
	h2 {
		color: #439bc1;
		margin: auto;
		padding-bottom: 0.5rem;
		text-align: center;
	}
	p {
		margin: auto;
		letter-spacing: 0.1rem;
		line-height: 1.5rem;
		font-size: 1.1rem;
		text-align: justify;
	}
}

.table {
	display: flex;
	justify-content: center;
	padding: 0 1rem 3rem 1rem;
}

.env-table {
	width: 100%;
}

.env-table th,
.env-table td {
	height: 2rem;
	padding: 1rem;
}

.env-table th {
	padding: 0.5rem 1rem 0.5rem 1rem;
	text-align: left;
	background-color: #439bc1;
	color: white;
}

.env-table tr:nth-child(even) {
	background-color: #e7e7e7;
}

/* contact */
.contact-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0rem 3rem 3rem 3rem;
}

.contact-item-1 {
	padding-right: 5rem;
}

.contact-item-2 {
	display: flex;
	flex-direction: column;
}

.phone,
.website {
	background-color: #def7ff;
	border-radius: 10px;
	text-align: center;
	margin: 0.5rem;
	padding: 1.3rem;
}

.phone {
	h2 {
		color: #439bc1;
		margin: auto;
	}
	h3 {
		margin: auto;
	}
	p {
		margin: auto;
	}
}

.website button {
	padding: 1rem;
	font-size: 1rem;
	border: none;
}

.main-flex-2 {
	display: flex;
}

@media screen and (max-width: 800px) {
	.main-menu {
		width: 80%;
	}
	.contact-container {
		flex-direction: column;
	}
	.contact-item-1 {
		text-align: center;
		padding-right: 0;
	}
	.main-flex-2 {
		display: flex;
		flex-direction: column-reverse;
	}
}