/* Add the existing CSS styles here */

/* Add styles for carousel and carousel images for mobile devices only */
@media (max-width: 767px) {
  .hidemobile{display:none;}
  .carousel-container {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    margin-right: 4%;
  }

  .team-slider__images {
    display: flex;
    transition: transform 0.3s ease;
  }

  .team-slider__image,
  .team-slider__hover-image {
    min-width: 100%;
    height: auto;
    object-fit: cover; /* Maintain image aspect ratio */
  }

  /* Adding styles to Image text */
  .carousel-container .our-teamColstxt{
    position: absolute;
    bottom: 45px; 
    padding-bottom: 0px;
  }
  /* Add styles for the circular clickable navigation menu */
  .carousel-nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding: 10px;
  }

  .carousel-nav-item {
    width: 15px;
    height: 15px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
  }

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

/* Additional styles for larger screens (non-mobile) can go here */

/* For example, styles for larger screens can be added like this:*/
@media (min-width: 768px) {
  .carousel-container {
    display: none; // Hide the carousel on larger screens
  }
}