.carousel-inner{

  width: 100%;

}



.list-container{

  width: 450px !important;



}



.carousel-container {

  position: relative;

  overflow: hidden;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

}



.carousel-track {

  display: flex;

  transition: transform 0.5s ease-in-out;

  will-change: transform;

}



.team-card {

  flex: 0 0 33.333%; /* Show 3 cards at a time */

  text-align: center;

  padding: 10px;

  box-sizing: border-box;

  margin: 0 20px;

  height: 350px;

}



/* .team-card img {

  width: 100%;

  border-radius: 50%;

  margin-bottom: 10px;

}

 */

.carousel-button {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background-color: rgba(197, 197, 197, 0.185);

  color: #08080870;

  border: none;

  padding: 10px;

  cursor: pointer;

  z-index: 10;

}



#carouselTrack {

  display: flex;

  align-items: center;

  gap: 10px; /* Adds spacing between cards */

  transition: transform 0.5s ease-in-out;

}



.team-card {

  flex: 0 0 calc(100% / 2 - 10px / 3); /* Account for spacing in card width */

  max-width: calc(100% / 4 - 10px / 4);

  box-sizing: border-box; /* Ensures padding/margin doesn't break the layout */

}



@media (max-width: 992px) {

  .team-card {

      flex: 0 0 100%;

      max-width: 100%;

      margin: 0 auto; /* Center the card */

  }

}



/* Container Styling */

#carouselContainer {

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

  max-width: 90% !important;

  margin: 20px auto;

  padding: 0 50px;

}



/* Track Wrapper */

#carouselTrackWrapper {

  width: 95%;

  overflow: hidden;

  padding-left: 2px;

  overflow: hidden;

}



#carouselTrack {

  display: flex;

  align-items: center;

  gap: 10px; /* Spacing between cards */

  transition: transform 0.5s ease-in-out;

}



/* Cards */

.team-card {

  flex: 0 0 calc(100% / 3 - 10px / 3); /* Account for spacing in card width */

  max-width: calc(100% / 4 - 10px / 4);

  box-sizing: border-box;

  background: #fff;

  padding: 20px;

  text-align: center;

  border-radius: 8px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}



@media (max-width: 992px) {

  .team-card {

      flex: 0 0 100%;

      max-width: 100%;

      margin: 0 auto;

  }

}



/* Arrows Styling */

.arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background-color: rgba(197, 197, 197, 0.185);

  color: #08080870;

  border: none;

  padding: 10px;

  cursor: pointer;

  z-index: 10;

}



#prevButton {

  left: 10px;

}



#nextButton {

  right: 10px;

}



.arrow:hover {

  background-color: rgba(197, 197, 197, 0.555);

}



@media (min-width: 1070px){

  .team-card{

    max-width: 240px;

    margin: 0 10px;

  }

  .team-card:first-child{

    margin-left: 0;

  }

  #carouselContainer{

    width: 100%;

    padding: 0 50px;

  }

}



.rounded-image {

  width: 120px; /* Fixed width for the image */

  height: 170px; /* Fixed height for the image */

  border-radius: 50%; /* Circular shape */

  object-fit: cover; /* Ensures the image covers the area without distortion */

  margin-bottom: 15px; /* Space below the image */

}



/* Text Styling */

.height-per {

  font-size: 16px;

  color: #333;

  margin: 5px 0;

  font-weight: normal;

}



/* LinkedIn Icon Styling */

.contact-logos {

  width: 30px; /* Fixed size for the icon */

  height: 30px; /* Fixed size for the icon */

  margin-top: 10px;

  cursor: pointer;

  transition: transform 0.3s ease-in-out; /* Smooth scaling effect */

}



.contact-logos:hover {

  transform: scale(1.1); /* Slightly enlarge on hover */

}