.card{
	border:1px solid #e6e9ef;
	padding:16px;
	border-radius:8px;
	background:#fff;
	transition: background 0.3s ease, color 0.3s ease;
}

.card:hover {
  background: var(--blue);          /* change background colour on hover */
  color: #fff; 
}

.services{
		        display:grid;
				grid-template-columns:repeat(4,1fr);
				gap:14px;
				margin-top:6px
}

.card:hover .muted {
  color: #f0f0f0;                   /* lighten muted text on hover */
}

.Home{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: url('NightOperation.png') no-repeat center center;
  background-size: cover;
  height: 400px;
  padding: 40px 150px;
  border-radius: 10px;
  color: #fff;
}

.Home h1{
  text-align: left;
  font-size: 28px;
  margin: 0 0 12px;
}

.Home p {
  opacity:0;
  transform:translateY(30px);
  transition: all 0.6s ease-out;
}

.Home.visible p {
  opacity:1;
  transform:translateY(0);
}

.HomeServices {
  text-align:center;
  padding:20px;
  transition: transform .3s;
  animation: bounceIn 1s ease;
}

.HomeServices i {
	font-size:2rem;
	margin-bottom:8px;
	animation: pulse 2s infinite;
}

.HomeServices p {
  margin: 0;
  font-weight: 500;
  color: var(--charcoal);
}
.HomeServices:hover {
  transform: translateY(-5px);
}

.Homeheading h1 {
  animation: fadeIn 1.5s ease-out;
}
.OurClient .card {
  opacity:0;
  transform:translateY(30px);
  transition: all 0.6s ease-out;
}
.OurClient .card.visible {
  opacity:1;
  transform:translateY(0);
}

/* Animations */
@keyframes fadeIn {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
@keyframes fadeDown {
  from {opacity:0; transform:translateY(-20px);}
  to {opacity:1; transform:translateY(0);}
}
@keyframes fadeUp {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
@keyframes bounceIn {
  0% {transform:scale(0.8); opacity:0;}
  60% {transform:scale(1.05); opacity:1;}
  100% {transform:scale(1);}
}
@keyframes pulse {
  0% {transform:scale(1);}
  50% {transform:scale(1.2);}
  100% {transform:scale(1);}
}

/* Apply animations */
header { animation: fadeDown 1s ease-out; }


.footer-right {
  text-align: right;          /* left align text */
  font-weight: bold;         /* make font bold */
  color: var(--ore);         /* apply ore colour (#8b5e3c) */
}