@media only screen and (max-width: 768px) {

    html,
    body {
      width: 100%;
      overflow-x: hidden;
    }
  }
  
  body {
    margin: 0;
    padding: 0;
    color: #000;
    font-family: 'poppins';
  }

  .carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide img {
    width: 100%;
    height: auto;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.carousel-indicator {
    width: 10px;
    height: 10px;
    background-color: #888;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.carousel-indicator.active {
    background-color: #333;
}

  .hits-grid-item {
    position: relative;
    overflow: hidden;
  }
  
  .hits-grid-item img {
    transition: transform 0.5s ease;
  }
  
  .hits-grid-item:hover img {
    transform: scale(1.1);
    filter: brightness(50%);
  }
  
  .hits-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    padding: 15px;
    opacity: 0;
    transition: opacity 0.5s ease;
    align-items: center;
  }
  
  .hits-grid-item:hover .hits-overlay {
    opacity: 1;
  }

  .client-card {
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
  }
  
  .client-card:hover {
    transform: scale(0.5);
    overflow: hidden;
  }
  
  @keyframes fadeIn {
      from {
          opacity: 0;
      }
  
      to {
          opacity: 1;
      }
  }
  
  .animate-fade-in {
      animation: fadeIn 1s ease-in-out;
  }
  

  /* Media Queries for Mobile Devices */
@media (max-width: 640px) {
    .container {
      padding: 0 20px;
    }
  
    .md:flex {
      display: none;
    }
  
    #mobile-menu {
      z-index: 49;
    }
  
    #mobile-menu-toggle {
      display: block;
    }
  }

  .animate__animated.animate__bounce {
    --animate-duration: 2s;
  }

  .float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    /* right:40px; */
    left: 40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
  }
  .float:hover {
    color: #fff;
  }
  
  .my-float{
    margin-top:16px;
  }
  
  .bounce {
      animation: bounce 2s infinite;
  }
  
  @keyframes bounce {
      0%,
      25%,
      50%,
      75%,
      100% {
          transform: translateY(0);
      }
      40% {
          transform: translateY(-20px);
      }
      60% {
          transform: translateY(-12px);
      }
  }