@charset "utf-8";
/* CSS Document */
.outnotsameintohijj{
	width: 31%;
	margin-right: 2%;
	height: 300px;
	float: right;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 20px
}
.outnotsameintohijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsameintohijj:hover .notsamoverhijj{
	 left: 100%;
}
.outnotsame1hijj{
	width: 58%;
	margin-right: 2%;
	height: 300px;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 10px
}
.outnotsame1hijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsame2hijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsame3hijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsame4hijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsame5hijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsame6hijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsame7hijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsame8hijj:hover .imgnotsamehijj{
  filter: brightness(0.5);
	
}
.outnotsame2hijj{
	width: 40%;
	margin-right: 0%;
	height: 300px;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 30px
}
.outnotsame3hijj{
	width: 29%;
	margin-right: 2%;
	height: 300px;
	float: right;
	position: relative;
	overflow: hidden;
	
	margin-bottom: 50px;
	margin-top: 0px;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #EDEDED
}
.outnotsame4hijj{
	width: 28%;
	margin-right: 2%;
	height: 300px;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 50px;
	margin-top: 0px
	
}
.outnotsame5hijj{

	width: 40%;
	margin-right: 0%;
	height: 300px;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 30px

	
}
.outnotsame6hijj{
	width: 48%;
	margin-right: 2%;
	height: 450px;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	margin-top: -200px
}
.outnotsame7hijj{
	width: 23%;
	margin-right: 2%;
	height: 274px;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	margin-top: -25px
	
}
.outnotsame8hijj{
	width: 23%;
	margin-right: 2%;
	height: 227px;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	margin-top: 20px
	
}
.imgnotsamehijj{
	width: 100%;
	height: 100%;
	transition: 1s;
	filter: brightness(0.8)
}
.onoutnotsamehijj{
	width: 94%;
	position: absolute;
	z-index: 10;
	left: 0;
	bottom: 0;
	text-align: right;
	padding-right: 6%
}
.onoutnotsamehijj p{
	font-family: "Tajawal", sans-serif;
	font-weight: 800;
	font-size: 21px;
	color: #ffffff;
	line-height: 26px;
	text-transform: capitalize;
	text-align: center;
	height: 50px
		
}
.onoutnotsamehijj p span{
	font-weight: 500;
	font-size: 17px;
	position: absolute;
	left: 20px;
	bottom: 20px;
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 7px;
	padding-bottom: 7px;
	
}

.notsamoverhijj{
	content: '';
	position: absolute;
	left: -100%;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: all 1s ease;
	z-index: 4;
	background-image: url(sour/linear.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.outnotsame1hijj:hover .notsamoverhijj{
	 left: 100%;
}
.outnotsame2hijj:hover .notsamoverhijj{
	 left: 100%;
}
.outnotsame3hijj:hover .notsamoverhijj{
	 left: 100%;
}
.outnotsame4hijj:hover .notsamoverhijj{
	 left: 100%;
}
.outnotsame5hijj:hover .notsamoverhijj{
	 left: 100%;
}
.outnotsame6hijj:hover .notsamoverhijj{
	 left: 100%;
}
.outnotsame7hijj:hover .notsamoverhijj{
	 left: 100%;
}
.outnotsame8hijj:hover .notsamoverhijj{
	 left: 100%;
}
@media screen and (min-width: 505px) and (max-width: 1100px) {

.onoutnotsamehijj p{
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 21px;
	color: #ffffff;
	line-height: 26px;
	text-transform: capitalize
}
.onoutnotsamehijj p span{
	font-weight: 500;
	font-size: 14px;
	position: absolute;
	right: 2px;
	bottom: 15px;
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 7px;
	padding-bottom: 7px
}
.outnotsameintohijj{
	width: 47%;
	margin-right: 2%;
	height: 300px;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 20px
}
}
@media screen and (max-width: 500px) {
	.outnotsame1hijj{
	width: 100%;
	margin-right: 0%;
	height: 250px;
	float: none;
	border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 0px
}
.outnotsame2hijj{
	width: 100%;
	margin-right: 0%;
	height: 250px;
	float: none;
	border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 0px
}
	.outnotsame3hijj{
	width: 96%;
	margin-right: 0%;
	height: 250px;
	float: none;
	
		margin-bottom: 20px;
		margin-top: 0px;
		padding-left: 2%;
		padding-right: 2%
}
	.outnotsame4hijj{
	width: 100%;
	margin-right: 0%;
	height: 250px;
	float: none;
	border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 0px
}
	.outnotsame5hijj{
	width: 100%;
	margin-right: 0%;
	height: 250px;
	float: none;
	border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 0px
}
	.outnotsame6hijj{
	width: 100%;
	margin-right: 0%;
	height: 250px;
	float: none;
	border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 0px
}
	.outnotsame7hijj{
	width: 100%;
	margin-right: 0%;
	height: 250px;
	float: none;
	border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 0px
}
	.outnotsame8hijj{
	width: 100%;
	margin-right: 0%;
	height: 250px;
	float: none;
	border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 0px
}
	.outnotsameintohijj{
	width: 100%;
	margin-right: 0%;
	height: 250px;
	float: none;
	border-radius: 10px;
		margin-bottom: 20px;
		margin-top: 0px
}
}