@charset "utf-8";
/* CSS Document */
@font-face {
  font-family:'mitra';
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/Far_Mitra.ttf") format('truetype');
}
@font-face {
  font-family:'mahsa';
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/BMehrBold.eot") format('eot');
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family:'mitra';
}
a{
	text-decoration: none;
	padding: 5px;
	 
	font-size: 20px;
	font-weight: bolder;
}
 
P{
	direction: rtl;
	font-size: 18px;
 margin: 20px;
	text-align: right;
}
.d-flex-col{
		display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
}
.d-flex-row{
		display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items:center;
}

.main-container{
	max-width: 1300px;
	width: 100%;
margin: 0 auto;
	
}
.header{
	margin: 0 auto;
	width:100%;
	height: 100vh;
	background-image: url("../images/sheep-banner.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
display: flex;
    flex-direction: column;
justify-content: space-between;
 
    


}
.titr2,.titr3{
 
	font-weight: bolder;
	margin: 10px;
color: #01161e;
	
}
.titr1{
	font-size: 2rem;
		font-family: "mahsa";
	color: #01161e;
}
.titr2{
	font-size: 2.3rem;
}
.titr3{
	font-size: 2rem;color: aliceblue;
}
.section1-heder{
 
	padding: 10px;
 
	border-radius: 5px;
 
}
.btn-green{
	color:#e5e5e5;
/*	color:#e5e5e5;*/
	background-color: #344e41;
	border-radius:5px;
	margin: 5px;
	padding: 10px;
	box-shadow:  5px 5px 10px #dad7cd,
             -5px -5px 10px #52796f;
	
}
.btn-green:hover{
	background-color: #52796f;
	
}
.section2-header{
 
	
	border-radius: 5px;
	padding: 10px;
}
.section2-header h3{
	color: #e5e5e5;
		font-size: 2.8rem;

	
}
.section2-header p{
	color: #e5e5e5;
}
.social1 {
	width: 50%;

 
	justify-content:space-between;
    margin: 0 auto;
	
}
.social1 a{
		font-size: 30px!important;
	margin: 5px;
	color: #000;
}
.social1 a:hover{
	color:  #ff7d00;
}

.services{
/*	background-color:#e5e5e5;*/
/*	background-color:#edf6f9;*/
/*	background-color: #d9d9d9;*/
	background-color: #a3b18a;
	width: 100%;
	padding: 20px;
 
	
}
.img-services{

	margin: 50px;
	width: 250px;
	height: 250px;
	border-radius: 50%;
 position: relative;
	background-color:  #dad7cd;
z-index: 100;
		box-shadow:5px 5px 10px #52796f;
         
 
 
}
.img-services::before{
	content: '';
	width: 100%;
	height: 100%;

	position: absolute;
	top:10%;
	left: 10%;
	background-image:url("../images/sheep1.jfif");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 50%;
		box-shadow:  5px 5px 10px #dad7cd,
             -5px -5px 10px #52796f;
 	
}
 
.about-us{
	width: 50%;
	direction: rtl;
	margin-right: 20px;
	text-align:justify;
	background-color: #dad7cd;
	border-radius: 5px;
	padding: 20px;
}

.main-square{
	width: 100%;
	position: relative;
	background-color: #dad7cd;
	z-index: -2;
	padding: 30px 10px;
/*	--mask: conic-gradient(from -70deg at bottom,#0000,#000 1deg 139deg,#0000 140deg) 50%/164.85px 100%;
  -webkit-mask: var(--mask);
          mask: var(--mask);*/
}
.main-square h1{
	text-align: center;
	font-family: 'mitra';
	margin: 20px auto;
	padding: 20px;
	color: #000;
}
.square4{
padding: 10px 10px;
	width: 90%;
	

}


.img-square{
		background-image:url("../images/sheep2.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 50%;
	height: 350px;
	margin: 20px 20px;
	border-radius: 5px;
	

  

}
.square{
	margin: 20px auto;
	width: 50%;	
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.square p{
	margin: 20px;
	background-color: #f4f3ee;
	direction: rtl;
	text-align:right;
	padding: 20px;
	font-family: 'mitra';
	border-radius: 5px;
	
}
.square p > span{
	font-family: 'mahsa';
	color:#d4a373;
	font-weight: bold;
	text-align: center!important;
	margin: 20px auto;
	
}
.main-square div > a{
border: 1px solid #f3de2c;
	border-radius: 5px;
	padding: 10px;
	text-align: center;
	margin: 20px auto;
	color: #f3de2c;
	font-size: 20px;
	font-family: mahsa;
 
	 
	

	
	
}

.shape{
	border-radius: 25% 75% 75% 25% / 33% 25% 75% 67%;
background-color: #344e41;
	width: 200px;
	height: 100px;
	position: absolute;
	top: 80%;
	z-index: -1;
 
	
}.shape2{
	border-radius: 65% 75% 75% 25% / 33% 25% 75% 67%;
background-color: #344e41;
	width: 200px;
	height: 100px;
	position: absolute;
	top: 32%;
	right:10px;
	z-index: -1;
 
	
}

.care-sheep{
	position: relative;
	background-color: #a3b18a;
	width: 100%;
	height: 80vh;
}

.yellow-square{
	
	background-color:  #344e41;
	width: 40%;
	height: 100%;
	margin: 0 auto;
}
.img-care-sheep{
			background-image:url("../images/sheep3.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 50%;
	height:70%;
	margin: 20px 20px;
	border-radius: 5px;
	position: absolute;
	top: 10%;
	left: 10%;
}
.description-care{
	position: absolute;
	top:40%;
	left: 50%;
	background-color:#dad7cd;
	border-radius: 5px;
	padding: 20px;
}.description-care h2{
 
}
.btn-yellow{
	border: 1px solid #f3de2c;
	background-color: #f3de2c;
	color: #000;
	margin-top: 5px;
	padding: 5px;
	width: 30%;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
}
.btn-yellow:hover {
	background-color:#ff7d00;
}


.brown-square{
	background-color: #432818;
	width: 20%;
	height: 80%;

	 position: absolute;
	top:15%;
	left: 15%;
}
.img-footer{
	
			background-image:url("../images/sheep1.jfif");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 20%;
	height:70%;
	margin: 20px 20px;
	border-radius: 5px;
	position: absolute;
	top: 15%;
	left: 10%;
}

.footer{
	background-color: #212529;
	width: 100%;
	padding: 20px ;
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
}
.contact{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	margin: 20px;
	border-bottom: 1px solid #fff;
	
}
.contact h4 a {color: #fff;}
.contact fa{
	color: #fff;
}
.footer h4 {
	text-align: center;
	margin: 10px auto;color: #fff;

}
.footer h5 > a{
	margin: 10px auto;
		direction: rtl;
		text-align: center;
	font-size: 12px;
	color: #fff;

}

.shadow{



border-radius: 50px;
 
box-shadow:  5px 5px 10px #dad7cd,
             -5px -5px 10px #52796f;
}
.glass{
	


background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
@media screen and (max-width:830px){
	
	.titr1{
		font-size: 22px;
		
	}
	.titr2{
		font-size: 20px;
	}
	.titr3{
		font-size: 18px;
	}
	.more,.tell{
		font-size: 16px;
		}
	.section2-header{
	left: 15%;
	top: 60%;	
	}
	.section2-header h3{
	color: #e5e5e5;
		font-size: 1.8rem;

	
}
.section2-header p{
	color: #e5e5e5;
}
	.square{
		display: block;
	}
	
}


@media screen and (max-width:620px){
	
	.header{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.section1-heder,.section2-header{
		position: inherit;
		margin: 20px;
	}
	/*.section2-header{
	left: 5%;
	top: 20%;	
	}*/
		.section2-header h3 ,.section2-header p  ,.social1 a{
		color:#000;
	}
}
@media screen and (max-width:490px){


	
	.section1-heder{
/*		margin-top: 20px;
	 	top:10%;
		right: 30%;*/
	}
	.contact{
		display: block;
		border-bottom: 1px solid #fff;
		
	}
	.services{
		display: flex;
		flex-direction: column;justify-content: center;
		align-items:center;
	}
	.img-services{
	 
	margin-bottom: 20px auto;
	width: 200px;
	height: 200px;
	}
	.about-us{
			width: 100%;
			margin-right: 10px;
	}
	.about-us  p{
	width: 100%;
 text-align: justify-all;
}
	 
	.square4{
		display: block;
		width: 100%;
	}
	.square{
		width: 100%;
	}
	.img-square{

	width: 100%;
	height: 250px;
	margin: 10px auto;
	border-radius: 5px;
	

  

}
	
	.square p{
width: 90%;
		margin: 10px auto;
	
}
	
	.care-sheep{
 
	height: 80vh;
}
	
	.yellow-square{
	

		width: 50%;}
 
.img-care-sheep{
 
	width: 90%;
	height:60%;
	top: 1%;

	left: 5%;
	 margin: 20px auto;
	}

.description-care{

	top:40%;
	left: 10%;
	width: 80%;

}
	.description-care p{
		width: 90%;
	}
.btn-yellow{

	padding: 5px;
	width: 50%;

}
	
}