div.main-wrap.middle.services
{
	padding: 150px 0px 50px;
}

div.services-header
{
	position: relative;
	float: left;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	padding: 50px 0px;
	background: linear-gradient(to right, #0d3137 0%, #1b2958 100%);
}

	div.services-header-wrap
	{
		position: relative;
		margin: 0px 140px;
	}
	
		div.services-header-info
		{
			width: 800px;
			margin: 0px auto;
		}
		
			div.services-header-info h1
			{
				display: block;
				margin-bottom: 20px;
				font-size: 48px;
				font-weight: 800;
				text-align: center;
				color: #fff;
			}
			
			div.services-header-info span
			{
				display: block;
				font-size: 20px;
				text-align: center;
				color: #ffffffe6;
			}
			
div.services-list
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
	float: left;
	width: 100%;
	margin: 50px 0px;
	padding: 0px 230px;
	box-sizing: border-box;
}

	div.service-item
	{
		padding: 30px;
		border-radius: 20px;
	}
	
	div.service-item.residential
	{
		border: 1px solid #bedbff;
	}
	
	div.service-item.commercial
	{
		border: 1px solid #e9d4ff;
	}
	
	div.service-item.solutions
	{
		border: 1px solid #ffd7a8;
	}
	
		i.service-item-icon
		{
			display: inline-block;
			padding: 20px;
			font-size: 40px;
			color: #fff;
			border-radius: 15px;
		}
		
			i.service-item-icon.mdi-greenhouse
			{
				background: #2b7fff;
			}
			
			i.service-item-icon.mdi-office-building-outline
			{
				background: #ad46ff;
			}
			
			i.service-item-icon.mdi-puzzle-outline
			{
				background: #ff6900;
			}

		span.service-title
		{
			display: block;
			margin: 20px 0px;
			font-size: 24px;
			font-weight: 700;
			color: #1e2939;
		}
		
		span.service-desc
		{
			display: block;
			font-size: 16px;
			line-height: 24px;
			color: #4a5565;
		}
		
		div.service-features
		{
			display: flex;
			flex-direction: column;
			gap: 10px;
			width: 100%;
			margin-top: 20px;
		}
		
			div.service-feature
			{
				display: flex;
				align-items: center;
				gap: 10px;
				width: 100%;
				padding: 10px 15px;
				box-sizing: border-box;
				border-radius: 10px;
				cursor: pointer;
				transition: 0.2s;
				-o-transition: 0.2s;
				-webkit-transition: 0.2s;
			}
			
			div.service-item.residential div.service-feature
			{
				background: #eff6ff;
			}
			
			div.service-item.residential div.service-feature:hover
			{
				background: #dbeafe;
			}
			
			div.service-item.commercial div.service-feature
			{
				background: #faf5ff;
			}
			
			div.service-item.commercial div.service-feature:hover
			{
				background: #f3e8ff;
			}
			
			div.service-item.solutions div.service-feature
			{
				background: #fff7ed;
			}
			
			div.service-item.solutions div.service-feature:hover
			{
				background: #ffedd4;
			}
			
				span.service-feature-dot
				{
					display: block;
					width: 0px;
					height: 0px;
					border: 6px solid #000;
					border-radius: 12px;
				}
				
				div.service-item.residential span.service-feature-dot
				{
					border-color: #2b7fff;
				}
			
				div.service-item.commercial span.service-feature-dot
				{
					border-color: #ad46ff;
				}

				div.service-item.solutions span.service-feature-dot
				{
					border-color: #ff6900;
				}
				
				span.service-feature-title
				{
					font-size: 14px;
					font-weight: 500;
					color: #364153;
				}
				
div.services-additional-list
{
	float: left;
	width: 100%;
	margin: 50px 0px;
	padding: 0px 230px;
	box-sizing: border-box;	
}

	h2
	{
		font-size: 24px;
		font-weight: 800;
		text-align: center;
		color: #1d293d;
	}
	
	div.services-additional-list-wrap
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		width: 100%;
		margin-top: 30px;
	}
	
		div.services-additional-list-item
		{
			padding: 30px;
			border-radius: 20px;
			box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);
			text-align: center;
		}
		
			i.services-additional-item-icon
			{
				display: inline-block;
				font-size: 24px;
				padding: 12px;
				border-radius: 10px;
				color: #fff;
			}

			div.services-additional-list-item.repair i.services-additional-item-icon
			{
				background: #059669;
			}
			
			div.services-additional-list-item.consultation i.services-additional-item-icon
			{
				background: #2b7fff;
			}
			
			span.services-additional-item-title
			{
				display: block;
				margin: 20px 0px;
				font-size: 16px;
				font-weight: 600;
				color: #1d293d;
			}
			
			span.services-additional-item-desc
			{
				display: block;
				font-size: 14px;
				color: #45556c;
			}
			
div.procedure-list
{
	float: left;
	width: 100%;
	margin: 50px 0px;
	padding: 0px 230px;
	box-sizing: border-box;	
}

	div.procedure-list-wrap
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 20px;
		width: 100%;
		margin-top: 30px;
	}
	
		div.procedure-item
		{
			text-align: center;
		}
		
			span.procedure-item-number
			{
				display: inline-block;
				width: 64px;
				font-size: 20px;
				font-weight: 600;
				padding: 20px 0px;
				border-radius: 60px;
				color: #fff;
			}

			div.procedure-item.one span.procedure-item-number
			{
				background: #059669;
			}
			
			div.procedure-item.two span.procedure-item-number
			{
				background: #2b7fff;
			}
			
			div.procedure-item.three span.procedure-item-number
			{
				background: #ad46ff;
			}
			
			div.procedure-item.four span.procedure-item-number
			{
				background: #ff6900;
			}
			
			span.procedure-item-title
			{
				display: block;
				margin: 20px 0px;
				font-size: 16px;
				font-weight: 500;
				color: #1d293d;
			}
			
			span.procedure-item-desc
			{
				display: block;
				font-size: 14px;
				color: #45556c;
			}