
div.icon-diagram {
	position: relative;
	padding: 8rem 0;
	background: #eee6de;
}

div.icon-diagram .container-fluid {
	display: flex;
	gap: 3%;
	flex-wrap: wrap;
}

div.icon-diagram .title-section h2 {
	font-size: 3em;
	font-weight: 900;
	color: var(--third-color);
}

div.icon-diagram .title-section p {
	max-width: 750px;
	text-wrap: balance;
}

div.icon-diagram .container-fluid.icons {
	margin: 5rem auto 0;
}

.icon-diagram-image-item.col-md-4 {
	flex: 1 1 calc(33.333% - 3%); 
}

.icon-diagram-image-item {
	position: relative;
	padding: 2rem;
	background: var(--body-color);
	border-radius: 7px;
	margin: 0 0 2rem 0 ;
}

.icon-diagram-image-item:before {
	content:'';
	height: 45px;
	width: 45px;
	position: absolute;
	top: -10px;
	right: -10px;
}

.icon-diagram-image-item.no-numbering:before {
	display: none;
}

.icon-diagram-image-item:nth-child(1):before {
	background: url('1.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.icon-diagram-image-item:nth-child(2):before {
	background: url('2.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.icon-diagram-image-item:nth-child(3):before {
	background: url('3.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.icon-diagram-image-item:nth-child(4)::before {
	background: url('4.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

 .icon-diagram-image-item:nth-child(5):before {
	background: url('5.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.icon-diagram-image-item:nth-child(6):before {
	background: url('6.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.icon-diagram-image-item .wrapper {
display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}  
  
.icon-diagram-image-item img {
	width: 40%;
	height: 40%;
	object-fit: contain;
	margin: 0 0 0.75rem 0;
}

.icon-diagram-image-item h4 {
	font-size: 1.5em;
	font-weight: 900;
	color: var(--second-color);
	text-wrap: balance;
}

.icon-diagram-image-item p {
	font-size: 0.875em;
	margin: 0;
	text-wrap: balance;
}

@media only screen and (max-width: 992px){
	.icon-diagram-image-item.col-md-4 {
	  flex: 1 1 calc(50% - 3%);
	}
}

@media only screen and (max-width: 550px){
	.icon-diagram-image-item.col-md-4 {
	  flex: 1 1 calc(100% - 3%);
	}
}