body {
            font-family: 'Inter', sans-serif;
            background-color: #f7f9fc;
        }
.container {
            max-width: 1200px;
        }
.hero-section {
    /* The linear-gradient creates a dark overlay with 40% opacity (0.4) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('assets/Waste-Management-Services-sm.jpg');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    color: white; /* This makes your text white so it stands out */
}

/* Other existing CSS... */

.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
    url('assets/Waste-Management-Services-sm.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    color: white; 
}

/* New CSS for the image slider */
.hero-slider {
    /* List all your background images here, separated by a comma. */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('assets/Waste-Management-Services-sm.jpg'), url('assets/al\ sharaqiya\ vehicle.png'); /* Replace with your image paths */
    background-size: cover;
    background-position: center;
    height: 100vh;
    animation: slideIn 10s infinite; /* The animation property */
}

/* Define the animation keyframes */
@keyframes slideIn {
    0% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('assets/Waste-Management-Services-sm.jpg');
    }
    33% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('assets/al\ sharaqiya\ vehicle.png');
    }
    66% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('assets/Waste-Management-Services-sm.jpg');
    }
    100% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url('assets/al\ sharaqiya\ vehicle.png');
    }
}

.card {
  width: 350px;
  height: 250px;
  margin: 1rem auto;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.card-front {
  background: white;
  border: 1px solid #e5e7eb;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.card-back {
  background: #ffffff;
  color: white;
  transform: rotateY(180deg);
}