:root{
    --main-color:#FC1931;
    --bg-color-1:#ffffff;
    --bg-color-2:#f1f1f1;
    --text-color-1:rgb(0, 0, 0);
    --text-color-2:rgb(0, 0, 0);
    --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
}

.team-content{
	width: 50%;
	max-width: 1350px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, auto));
	align-items: center;
	gap: 2rem;
	text-align: center;
	margin-top: 4rem;
}
.team-content img{
	background-color: #FB1930;
	border: 5px solid rgb(255, 255, 255);
	width: 100%;
	height: auto;
	border-radius: 50px;
	margin-bottom: 50px;
}

.team-content1{
	width: 85%;
	max-width: 1350px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, auto));
	align-items: center;
	gap: 2rem;
	text-align: center;
	margin-top: 4rem;
}
.team-content1 img{
	background-color: #FB1930;
	border: 5px solid rgb(255, 255, 255);
	width: 100%;
	height: auto;
	border-radius: 50px;
	margin-bottom: 50px;
}

.team-content2{
	width: 100%;
	max-width: 1350px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, auto));
	align-items: center;
	gap: 2rem;
	text-align: center;
	margin-top: 4rem;
}

.team-content-mjrm{
	width: 70%;
	max-width: 1350px;
	margin: 0 auto;
	display: grid;
	align-items: center;
	gap: 2rem;
	text-align: center;
	margin-top: 4rem;
}

.team-content2 img{
	width: 65%;
	height: auto;
	margin-bottom: 50px;
}

.team-content4{
	direction: ltr;
	width: 100%;
	max-width: 1350px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, auto));
	align-items: center;
	gap: 2rem;
	text-align: center;
	margin-top: 4rem;
}
.team-content4 img{
	width: 65%;
	height: auto;
	margin-bottom: 50px;
}

.box-vat1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 15px;
	background-color: var(--bg-color-1);
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 50%;
	max-width: 600px; /* يمكنك تعديل العرض الأقصى حسب رغبتك */
  }
  
  .box-image-vat1 {
	width: 27%;
	height: auto;
	object-fit: cover;
  }
  
  .box-text-vat1 {
	width: 100%;
	padding: 5px;
	background-color: var(--bg-color-1)
  }

  .vat-text{
	  font-size: small;
	  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	  font-weight: lighter;
	  color: var(--text-color-2);
  }

.box-p {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 15px;
	overflow: hidden;
	background-color: var(--bg-color-2);
	box-shadow: 0 4px 8px var(--box-shadow);
	width: 100%;
	max-width: 220px; /* يمكنك تعديل العرض الأقصى حسب رغبتك */
  }

  .box-vat {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 15px;
	overflow: hidden;
	background-color: var(--bg-color-2);
	box-shadow: 0 4px 8px var(--box-shadow);
	width: 25%;
	max-width: 220px; /* يمكنك تعديل العرض الأقصى حسب رغبتك */
  }

.box1{
	padding: 16px;
	background: var(--bg-color-2);
	border-radius: 15px;
	transition: all .38s ease;
}
.box1 h3{
	font-size: 23px;
	font-weight: 600;
	color: var(--text-color-2);
	margin-bottom: 8px;
}
.box1 h5{
	font-size: 15px;
	font-weight: 600;
	color: #b7b4bb;
	margin-bottom: 15px;
	letter-spacing: 2px;
}

.box1 h2{
	font-size: 20px;
	font-weight: 600;
	color: #b7b4bb;
	margin-bottom: 15px;
	letter-spacing: 2px;
}
.icons i{
	display: inline-block;
	color: #fff;
	font-size: 20px;
	margin: 0 8px;
	transition: all .38s ease;
}
.icons i:hover{
	transform: scale(1.2);
}
.box1:hover{
	transform: translateY(-10px);
	cursor: pointer;
}

@media(max-width: 1240px){
	.team{
		width: 100%;
		height: auto;
		padding: 90px 2%;
	}
	.center h1{
		font-size: 3.2rem;
	}

	.box-vat1 {
		border-radius: 10px;
		width: 70%;
	  }
}

@media (max-width:991px){

	.team-content2{
		width: 82%;
	}

	.team-content2 img{
		margin-right: 55px;
	}

	.box-vat1 {
		width: 60%;
	  }

}

@media (max-width:768px){

	.box-vat1 {
		width: 60%;
	}

}

@media (max-width:450px){

	.box-vat1 {
		width: 60%;
	  }

	.team-content2{
		width: 75%;
	}

	.team-content2 img{
		margin-right: 55px;
	}

	.team-content4{
		direction: rtl;
		width: 75%;
	}
	.team-content4 img{
		margin-right: 55px;
	}

}