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\ waste\ truck.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\ waste\ truck.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\ waste\ truck.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);
}



 /* This is the main button container */
        .whatsapp-button {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            z-index: 50; /* Ensure it stays on top of other content */
        }

        /* Basic styling for the icon and hover effects */
        .whatsapp-icon {
            width: 4rem;
            height: 4rem;
            fill: rgb(10, 218, 131);
            transition-property: transform, box-shadow;
            transition-duration: 300ms;
        }

        .whatsapp-button:hover .whatsapp-icon {
            transform: scale(1.1);
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 640px) {
            .whatsapp-button {
                bottom: 1.5rem;
                left: 1.5rem;
            }
            .whatsapp-icon {
                width: 3.5rem;
                height: 3.5rem;
            }
        }