/* *
colors

- hero and footer dark background :
 hero #1f2937;

-white-color: #f9faf8;
-secondry-white-color: #e5e7eb
-logo-text: #f9faf8;

- button color: #3882f6;;

- primary-color: #1f2937;
- dark--grey: #e5e7eb;
- very-dark grey: #1f2937;

fonts:
h1:48 extra-bold;
h2:36 extra-bold;
p: 28
qoute: 36 light itlaic
header logo: 24px

* */
@font-face {
	font-family: 'roboto-bold';
	src: url(../../Fonts/Roboto-Bold.ttf) format('truetype');
}
@font-face {
	font-family: 'roboto';
	src: url(../../Fonts/Roboto-Regular.ttf) format('truetype');
}
@font-face {
	font-family: 'roboto-italic';
	src: url(../../Fonts/Roboto-LightItalic.ttf) format('truetype');
}
:root {
	--hero: #1f2937;
	--white-color: #f9faf8;
	--secondry-white-color: #e5e7eb;
	--logo-text: #f9faf8;

	--button-color: #3882f6;
	--primary-color: #1f2937;
	--dark-grey: #e5e7eb;
	--very-dark-grey: #1f2937;
}
* {
	margin: 0;
	padding: 0;
}
*,
*::after,
*::before {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
}

.about-nav > ul > li {
	color: #e5e7eb;
	padding: 8px;
	border-radius: 5px;
	background-color: #3882f6;
	display: inline-block;
	margin-right: 20px; /* Optional: space out the list items horizontally */
}

/*About us hero styles*/
.heroo {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px 70px;
	background-color: var(--hero);
}
.heroo .hero__heading {
	font-size: 48px;
	color: var(--white-color);
	margin-bottom: 20px;
	font-family: 'roboto-bold', sans-serif;
}
.heroo .hero__paragraph {
	font-size: 18px;
	color: var(--secondry-white-color);
	font-family: 'roboto', sans-serif;
}
/*About company styles*/
.about,
.mission {
	padding: 100px 70px 50px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.about__content {
	flex: 0 0 45%;
}
.about__heading {
	font-size: 36px;
	font-family: 'roboto-bold', sans-serif;
	color: var(--primary-color);
	margin-bottom: 20px;
}
.about_subheading {
	font-size: 19px;
	font-family: 'roboto-bold', sans-serif;
	color: var(--primary-color);
	margin-bottom: 2opx;
}
.about__paragraph {
	font-size: 16px;
	width: 75%;
	line-height: 1.6;
	color: var(--very-dark-grey);
	font-family: 'roboto', sans-serif;
}
.about__image,
.mission__image {
	flex: 0 0 30%;
	width: 600px;
}
/* who-we-are styles*/
.who-we-are,
.join-us {
	padding: 100px 70px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--hero);
}
.who-we-are__heading {
	color: var(--white-color);
}
.who-we-are__paragraph {
	color: var(--dark-grey);
	text-align: center;
}
/*apart*/
.apart {
	padding: 100px 70px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.apart__content {
	display: flex;
	align-items: stretch;
	justify-content: space-around;
}
.apart__square {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--button-color);
	border-radius: 8px;
	margin: 20px;
	padding: 30px;
}
.apart__paragraph {
	font-size: 16px;
	line-height: 1.6;
	color: var(--very-dark-grey);
	font-family: 'roboto', sans-serif;
	text-align: center;
}
.apart__icon {
	margin-bottom: 20px;
}
/*team styles*/
.team {
	padding: 70px 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--dark-grey);
}
.team__members {
	display: flex;
	justify-content: space-around;
}
.team__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px;
	margin: 30px;
}
.team-image {
	height: 200px;
	width: 200px;
	border-radius: 50%;
	margin-bottom: 20px;
	border: 3px solid var(--button-color);
}
.jon-us__paragraph {
	font-size: 20px;
	line-height: 1.6;
	color: var(--dark-grey);
	font-family: 'roboto-italic', sans-serif;
	text-align: center;
}
.about-btn {
	text-decoration: none;
	padding: 15px 20px;
	border-radius: 25px;
	background-color: var(--button-color);
	color: var(--white-color);
	font-size: 18px;
	margin-top: 20px;
	transition: all 0.1s;
}
.about-btn:hover {
	transform: scale(1.1);
}
.about-btn:active {
	transform: scale(1);
}

@media only screen and (max-width: 1000px) {
	.heroo {
		padding: 50px 30px;
	}
	.about,
	.mission,
	.apart__content {
		flex-direction: column;
		justify-content: center;
	}
	.about,
	.mission {
		align-items: flex-start;
		padding: 30px 20px;
	}
	.mission .about__heading {
		margin-top: 20px;
	}
	.about__paragraph {
		margin: 10px 0;
		width: 100%;
	}
	.about__image,
	.mission__image {
		max-width: 100%;
	}
	.apart__content {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.apart__square {
		width: 40%;
		min-width: 250px;
	}
	.team__members {
		flex-wrap: wrap;
	}
}