/* This stylesheet is meant for custom styles, on top of the Bone Template */

section { padding: 100px 0 50px; }
	body.home section.services { padding: 100px 0 100px; }

.services {}
	.services .row { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }
		.services .row:before { display: none; }
		.services .col-sm-4, .services .col-md-4 {
			margin: 0; width: calc(100% / 3 - 20px); padding: 50px; background: #f0f0f0; border: 1px solid #ccc;  border-radius: 5px;
			box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; justify-content: space-around;
		}
		.services .col-md-4 { background: transparent; border: none; padding: 30px; }
			.services h3 { font-size: 2.5rem; margin: 0 0 30px; }

.testim {}
	.testim .row { display: flex; flex-wrap: wrap; gap: 20px; width: 100%;  }
		.testim .row:before { display: none; }
		.testim .col-md-6 { width: calc(100% / 2 - 20px); }
			.testim .col-md-6:before {
				content: ''; width: 100px; height: 100px; margin: 20px auto 0;  display: block; background: #f0f0f0;
				border-radius: 100px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
			}
			.testim .col-md-6 p { font-size: 1.5rem; font-style: italic; margin: 30px; }
			.testim h5 { text-transform: none; padding: 15px; border-top: 1px dotted #ccc; display: table; margin: 0 auto; }

@media screen and (max-width: 768px) {
	section { padding: 30px 0; }
	.services .row, .testim .row { margin: 0; }
	.services .col-sm-4, .services .col-md-4, .testim .col-md-6 { width: 100%; }
}