body {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-style: normal;
}

.banner {
    background-image: url(./PortfolioImages/image-asset.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 120px 0;
}

.skills-padding {
    padding: 70px 0;
}

.hover:hover{
    border:1px solid rgb(73, 78, 78);
    border-radius: 5%;
    background-color: aqua;
    color: black;

}
.hover1:hover{
    background-color: black;
    color: white;
}
.hover2:hover{
    background-color: rgb(0, 132, 255);
    color: white;
}
.hover3:hover{
    background-color: rgb(71, 194, 87);
    color: white;
}
.hover4:hover{
    text-decoration: none;
    background-color: rgb(71, 194, 87);
    color: white;
}
.about{
  text-shadow: 0px 1px 2px rgb(87, 88, 85);
}

.next:hover{
    color: wheat;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: black;
}

.custom-control {
  filter: invert(1);
}

/* Custom styles for dark carousel indicators */
.carousel-indicators.dark-indicators button {
  background-color: #000; /* Dark background color */
}

.carousel-indicators.dark-indicators button.active {
  background-color: #333; /* Slightly lighter dark for active state */
}

.carousel-item img {
  max-height: 400px; /* Adjust based on your layout */
  object-fit: contain; /* Ensure the whole image is visible */
  width: 100%;
  border-radius: 10px; /* Optional: adds a border radius for a cleaner look */
  background-color: #000; /* Optional: adds a background to fill empty space */
}

@media (max-width: 768px) {
  .carousel-item img {
      max-height: 250px; /* Reduce height for smaller screens */
  }
}