.main-content{
    display: flex;
    background-image:url('./');
    padding-top: 60px;
    animation: fadeInUp 1s ease-in-out alternate; /* Duration and easing function */
    

}
@keyframes fadeInUp {
    0% {
        opacity: 0; /* Start fully transparent */
        transform: translateY(20px); /* Start 20px below */
    }
    100% {
        opacity: 1; /* End fully opaque */
        transform: translateY(0); /* End in the original position */
    }
}
footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 10%;
}
 #offcanvasNavbar .nav-link.bg-hover-primary:hover {
        background-color:  #23527c; /* primary color */
      }

.main-content {
    animation: fadeInUp 1s ease-in-out alternate; /* Duration and easing function */
}
.bi {
    fill: white; /* or desired color */
    stroke: white; /* or desired color */
    opacity: 1; /* ensure visibility */
    z-index: 1; /* ensure on top */
  }
  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #0d6efd;
}
.nav-pills .nav-link {
    background: 0 0;
    border: 0;
    border-radius: .25rem;
}
.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.welcome-heading {
    font-family: 'open sans,sans serif';
    font-weight: 700;
  }
  h1{
       font-family: 'poppins';
    font-weight: 700;
  
  }
    #offcanvasNavbar .btn-close {
  filter: invert(1); /* invert colors */
  animation: fadeInUp 1s ease-in-out alternate; /* Duration and easing function */
}
  .nav-link.active {
    background-color: #333; /* Adjust to your desired background color */
    color: #fff; /* Adjust to your desired text color */
  }
  @media (max-width: 768px) { /* sm devices */
    h1 {
      margin-top: 150px;
    }
  }
  
  @media (max-width: 576px) { /* xs devices */
    h1 {
      margin-top: 65px;
    }
  }
  @media (max-width:767px) {
    .main-content{
        margin-top: 10%;
    }
    .main-contents{
        margin-top: 50%;
    }
    
  }
  footer {
    position: relative;
    bottom: 0;
    width: 100%;
      }
  
  /* Add some padding to the body to avoid overlap */
  body {
    padding-bottom: 3rem; /* Adjust this value based on your footer height */
  }
  @media (max-width: 768px) {
    .welcome-heading {
      margin-top: -400px;
    }
    .lead {
      margin-bottom: 1.5rem;
    }}
    .border-light {
        border-color: #fff !important; /* Change border color to white */
      }
      
      .hover-shadow {
        transition: box-shadow 0.3s ease-in-out;
      }
      
      .hover-shadow:hover {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* White box shadow on hover */
      }
      
      /* Optional: Add a darker background to make the columns stand out */
      .container {
        margin-top: 100px; /* Dark gray background */
      }
      
      /* Optional: Add some spacing between rows */
      .row {
        margin-bottom: 20px;
      }
      .hover-primary:hover {
        color: #0d6efd; /* Primary color */
      }
      .navbar-dark .navbar-nav .nav-link {
        transition: color 0.2s ease;
      }
      
      .navbar-dark .navbar-nav .nav-link:hover {
        color: #0d6efd; /* Primary color */
      }
      
      .navbar-dark .navbar-nav .nav-link.active {
        color: #0d6efd; /* Primary color */
      }
      .bi-facebook {
        color: #4267B2; /* Facebook Blue */
      }
      
      .bi-twitter {
        color: #1DA1F2; /* Twitter Blue */
      }
      
      .bi-instagram {
        color: #E1306C; /* Instagram Gradient Pink-Orange */
        
      }