.servicii_intro{
	height:400px;
	width:100%;
	background-image:url(../images/servi.jpg);
	background-size:cover;
	background-position:center;
}
.title_servicii{
	position: absolute;
    width: 50%;
    margin-left: 25%;
    background: rgb(0,0,0);
    background: linear-gradient(
90deg
, rgba(0,0,0,1) 0%, #253a47 100%, rgba(232,255,0,1) 100%);
    height: 100px;
    top: 350px;
    border-radius: 10px;
    border: 1px solid #fff2d9;
    transition: 0.3s;
}
.title_servicii:hover{
	opacity:0.9;
	cursor:pointer;
}
.title_servicii h2{
	text-align:center;
	color:white;
	font-size:50px;
	font-weight:bold;
	padding-top:20px;
}

.maindiv {
  margin: 4rem;
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 2px 5px 20px #2323235e;
}

/*styling main headline of the website*/
.innerdiv h1 {
  margin: 0.7rem 0 0.4rem;
  color: red;
  text-align:center;
}
/*styling the small flag image in the headline*/
.innerdiv h1 img {
  height: 2rem;
  margin-right: 0.5rem;
}
/*styling the description of the website*/
.innerdiv p {
  font-size: 1.2rem;
  color: red;
  margin-bottom: 1rem;
  text-align:center;
}
/*styling the each card*/
.eachdiv {
  display: inline-block;
  width: 29%;
  background: white;
  box-shadow: 1px 2px 10px #33333352;
  padding: 1rem;
  margin: 0.5rem 0.4%;
  border-radius: 1rem;
  cursor: pointer;
  transition: 0.4s;
}
/*card Hover State*/
.eachdiv:hover {
  transform: scale(1.03);
  box-shadow: 2px 6px 10px #2f2f2f69;
}
/*styling the card images*/
.eachdiv img {
  width: 100%;
  margin-bottom: 0.8rem;
  border-radius: 1rem;
}
/*styling card title*/
.eachdiv h3 {
  color: #e91e63;
  margin-bottom: 0.5rem;
}
/*styling card description*/
.eachdiv p {
  font-size: 0.8rem;
  color: #969696;
  margin-bottom: 0;
}

/*Media Query Part 
For responsiveness of the website*/

/*Under 1000px styling
For medium screen devices*/
@media only screen and (max-width: 1000px) {
  .maindiv {
    margin: 3rem;
  }
  .eachdiv {
    width: 48%;
  }
}

/*Under 600px styling 
For small devices*/
@media only screen and (max-width: 600px) {
  .maindiv {
    margin: 2rem;
  }
  .eachdiv {
    width: 90%;
    margin: 0.5rem 0;
  }
}

/*Note : I have used 1000px and 600px instead of 768px and 500px
Styling over🙂 */
.despartitor{
	height:100px;
	width:100%;
	    background: rgb(0,0,0);
 background: linear-gradient(
90deg
, rgba(0,0,0,1) 0%, #253a47 100%, rgba(232,255,0,1) 100%);
}

@media only screen and (max-width: 1025px) {
	.leftside_serviciu {
			width:100% !IMPORTANT;
					float:none !IMPORTANT;
		display:block !IMPORTANT;
	}
	.container_serviciu{
		display:block !IMPORTANT;
	}
	.image_serviciu{
		width:90% !IMPORTANT;
		margin-left:5% !IMPORTANT;
		float:none !IMPORTANT;
		display:block !IMPORTANT;
	}
	.title_servicii{
		width:max-content;
		height:max-content;
		margin-left:20%;
	}
	.title_servicii h2{
		font-size:40px;
		padding:10px;
	}
}
.serviciu{
	padding-top:100px;
	padding-bottom:100px;
}
.serviciu h2{
	text-transform: UPPERCASE;
    text-align: center;
    color: #ff0000;
    font-size: 43px;
    padding: 70px;
}
.serviciu p{
	    text-align: center;
    color: #ff0000;
    font-size: 26px;
    padding: 10px;
    padding-bottom: 50px;
}
.leftside_serviciu h3{
	text-align: center;
    color: #ff0000;
    font-size: 26px;
    padding: 10px;
    padding-bottom: 50px;
}
.leftside_serviciu{
	display:inline-block;
	width:50%;
	margin-top:50px;
	float:left;
}
.leftside_serviciu .border1{
	margin-left:45%;
}
.leftside_serviciu h5{
	text-align:center;
	font-size:19px;
	line-height:30px;
	padding:70px;
}
.image_serviciu{
	width:50%;
	height:500px;
	display:inline-block;
	float:Right;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%), 0 6px 20px 0 rgb(0 0 0 / 50%);
	transition:0.4s;
}
.image_serviciu:hover{
	transform: scale(1.03);
	cursor:pointer;
}
.container_serviciu{
	
	display:flex;
}