.confetti {
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    position: absolute;
    pointer-events: none;
}

@keyframes fall {
    0% {
        transform: translateY(-100px) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}
.grid-item {
    opacity: 0; /* Start as invisible */
    transform: translateY(50px); /* Start below the normal position */
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Class to add when the element is in view */
.grid-item.visible {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move to original position */
}
   .grid-container {
          display: grid;
padding: 40px 0;
    grid-template-columns: repeat(4, 1fr);
    gap: 19px;
    z-index: 2;
    position: relative;
        }

        /* Style for each item in the grid */
        .grid-item {
            text-align: center;
            background: #fff;
         padding-top: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
        }

        /* Circular images */
        .grid-item img {
              width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    
    box-shadow: 7px 10px 12px #cbcbcb;
        }

        /* Optional text below each image */
        .grid-item h3 {
           font-size: 22px;
    color: #000;
    text-transform: uppercase;
    font-family: oswald, sans-serif;
    font-weight: 500;
        }
		 .grid-item p {
           font-size: 16px;
    color: #000;
    padding:0 10px;
    font-family: lato, sans-serif;
    font-weight: normal;
padding-bottom:20px;
        }

.tile-container {
            perspective: 1000px;
        }

        .tile {
            width: 150px;
            height: 150px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s ease-in-out;
            will-change: transform; /* Optimize rendering */
			margin:0 auto;
        }

        .tile:hover {
            transform: rotateY(180deg);
        }

        .tile .front, .tile .back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        .tile .front {
            
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
        }

        .tile .back {
            
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            transform: rotateY(180deg);
        }

     

      
 @media (max-width: 1200px) {
            .grid-container {
                grid-template-columns: repeat(4, 1fr); /* 4 columns for larger tablets */
            }
        }

        @media (max-width: 992px) {
            .grid-container {
                grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller tablets */
            }
        }

        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr); /* 2 columns for larger mobile devices */
            }

            .grid-item img {
                width: 150px;
                height: 150px; /* Smaller image size for smaller screens */
            }
        }

        @media (max-width: 480px) {
            .grid-container {
                 grid-template-columns: repeat(2, 1fr); /* Single column for very small screens */
            }

            .grid-item img {
                width: 120px;
                height: 120px; /* Further reduced image size */
            }

            .grid-item h3 {
                font-size: 18px;
            }

            .grid-item p {
                font-size: 14px;
            }
        }