.spark-logo-nav{
	color: #333333;
}
.bar{
	background-color: #333333; /* changes hamburger menu color */
}
.services {
	margin-top: 5rem;
	text-align: center;
}
.services-bold{
	font-weight: bold;
	letter-spacing: -.1rem;
	padding-left: .5rem;
}
.services-our{
	padding-left: .5rem; /* necessary since I'm suing a tight font */
}
.services-our, .services-bold{
	font-size: 2rem;
}
.line-comb::before,
.line-comb::after {
	width: 40%; /* Sets the width of the lines */
}
.service-card img {
	width: 30%;
	max-width: 150px;
}
	.service-card img {
		width: 100%;
		height: auto;
}

.service-card h2{
	font-size: 1rem;
	
}
.service-card-text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	
}
.service-bold{
	font-weight: bold;
}
.service-light{
	padding-left:	.5rem ;
}
.service-card{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 1rem;
	transition: transform 0.4s ease-in-out; /* to smooth animation */
	height: 500px;
}
footer{
	margin-top: 10rem; /* to give my footer some space */
}


@media screen and (min-width: 576px) {
  /* Styles for screens with a minimum width of 576 pixels */

	.service-card:hover{
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
		transform: translateY(-5px);
	}
}
@media screen and (min-width: 768px) {
  /* Styles for screens with a minimum width of 768 pixels */
	.services-container{
		margin-top: 5rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.testy{
		display: flex;
		justify-content: center;
	}
	.service-card {
		width: 300px;
		justify-content: start;
		height: 400px;
	}
	.service-card img {
		width: 50%;
		height: auto;
	}

}
@media screen and (min-width: 1300px) {
  /* Styles for screens with a minimum width of 1300 pixels */
	.services-container {
		display: flex;
		flex: 1;
		justify-content: space-evenly;
		margin-top: 10rem;
	}
	.nav-link{
		color: #333333;
	}
	.nav-link::before{
		background-color: black;
	}
	.trims img{
		padding: 0;
		width: 30%;
		margin-bottom: 4rem;
	}
	.styling img{
		margin-bottom: 1rem;
	}


}