#carouselExample {
        max-height:370px;
        max-width: 500px;
        overflow: hidden;
    }

    .carousel-image {
        object-fit: cover;   
    }

    .navclass {
        background-color: #FFFFFF;
        transition: opacity 0.3s ease, transform 0.3s ease;
        height: 50px;
        width: auto;
      }

    .sniffle {
        transition: transform 0.2s ease;
    }
    .sniffle:hover {
        content: url('sneeze.png');
        transform: scale(1.1);

    }

    /* Fading Sniffles image */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .fade-in-active {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Slide-in from left for h2 */
  .slide-from-left {
    transform: translateX(-30%);
    opacity: 0;
    transition: transform 1.5s ease-out, opacity 2.5s ease-out;
  }
  
  .slide-from-left-active {
    transform: translateX(0);
    opacity: 1;
  }
  
  /* Slide-in from right for h6 */
  .slide-from-right {
    transform: translateX(30%);
    opacity: 0;
    transition: transform 2.0s ease-out, opacity 3.0s ease-out;
  }
  
  .slide-from-right-active {
    transform: translateX(0);
    opacity: 1;
  }

    .navimg1:hover img {
        content: url('home_dark.png');
    }

    @media (max-width: 768px) {
        .nav-link span {
            display: none;
        }
    }

    .navimg2:hover img {
        content: url('settings_dark.png');
    }

    .navimg3:hover img {
        content: url('logout_dark.png'); 
    }

    .navimg4:hover img {
        content: url('help_dark.png'); 
    }

    .navimage {
        width: 40px;
        height: auto;
      }

    .logoimage {
        width: 130px;
        height: auto;
      }  
    
      .logoimage_large {
        width: 300px;
        height: auto;
      }  
    .navclass:hover {
        opacity: 0.7;  /* Fade to 50% opacity */
        transform: scale(1.1);  
    }