.nav-link:hover {
    background-color: black;
  }
  
 
  


  
/* Default styles */
.carousel-inner .image-container {
  position: relative;
}


.carousel-inner .overlay-text {
  position: absolute;
  top: 58%;
  left: 55%;
  transform: translate(-50%, -50%);
  color: white;
   
  
  
  
}

/* Media query for responsiveness */
@media (max-width: 768px) {
  .carousel-inner .image-container img {
    height: 700px;
  }
  
  .carousel-inner .overlay-text {
    top: 58%;
    left: 55%;
    transform: translate(-50%, -50%);
    padding: 5px;
  
  }
}

.carousel-inner .overlay-text p {
  
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

/* Add this to your existing CSS or in a separate CSS file */
.contact-info {
  display: flex;
  align-items: center;
}

.contact-number {
  margin-left: auto;
  margin-right: 15px; /* Add some spacing */
  color: #fff; /* Set the color you want */
}



 /* social media icons */
 @media (max-width: 768px) {
  .social-icons {
    margin-top: 2rem;
   
   
  }
}
/* CSS for color change on hover */
.social-icons a i {
  color: blue; /* Initial color */
  transition: color 0.3s ease;
  font-size: 30px;
}
.social-icons a:hover i {
  color: red; /* Color on hover */
  
 
}