body {
  font-family: 'Inter', sans-serif;
}

.sponsors .row .col-md-4,
.facilities .row .col-md-4,
.blog-events .row .col-md-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.sponsors hr,
.facilities hr,
.blog-events hr {
  width: 100%;         /* Ensures the hr spans across the container */
  margin: 0;           /* Resets default browser margins */
}
.sponsor-logo-holder {
  display: flex;
  align-items: center;
  justify-content: center;    /* Adjust based on your design */
  overflow: hidden;    /* Ensures logos don't overflow */
  gap: 80px;
  width: max-content;
  animation: scroll 30s linear infinite;
}
.sponsor-logo-holder .sponsor-img img {
  max-height: 60px;   /* Ensures logos fit within the holder */
  width: auto;         /* Maintains aspect ratio */
}
@keyframes scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}
.welcome-note {
  display:flex;
  align-items: center;
  gap: 10px;
}
.welcome .welcome-img {
  height: 100%;
  display: flex;
  align-items: center;
}
.welcome-note .icon-holder{
  background-color: #ffffff;
  border-radius: 50%;
  padding: 15px;
}
.facilities-card  .card-header {
  position: relative;
}
.facilities-card  .card-header .facility-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -35px; /* Adjust this value to move the icon up or down */
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid #fff; /* Optional: adds a border around the icon */
  border-radius: 50%; /* Makes it circular */
  padding: 15px; /* Adjust size as needed */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
}
.facilities-card img{
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
  border-radius: 8px; /* Optional: rounded corners for the image */
}
.upcoming-event {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upcoming-event .date {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 2px solid; /* Adjust color as needed */
  padding: 10px 15px;
  border-radius: 8px;
}
.custom-dots {
  /* 1. Define the pattern: Line (0-40%), Gap (40-50%), Dot (50-70%), Gap (70-100%) */
  border-right: 3px solid black; /* To ensure the background is visible */
}
.left-dots {
  border-left: 3px solid black; /* To ensure the background is visible */
  left: -3px;
}
@media (max-width: 767px) {
  /* Remove borders on smaller screens */
  .custom-dots,
  .left-dots {
    border: none
;  }
  .left-dots {
    left: 0; /* Reset left position */
  }
}
.events-card {
  position: relative;
  display: flex;
  width: 100%;
}
.events-card .card-img {
  border-radius: 8px 0;
  max-width: 150px;
}
.events-card .event-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.events-card .event-tag span {
  padding: 2px 6px;
  border-radius: 4px;
}
.registration-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;  
}
@media (max-width: 767px) {
  .registration-card {
    flex-direction: column;
    text-align: center;
  }
  .registration-card .card-icon {
    margin-bottom: 15px; /* Space between icon and text */
  }
}
.contact .contact-info li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer .footer-logo {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  height: 100%;
}
.footer .footer-logo img {
  width: 80px;
  height: auto;
}
.footer .social-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer .social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trademark .txt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carousel .carousel-overlay {
  background-color: #000000bc;
  height: 100%;
  width: 100%;
}
.carousel h1,
.carousel p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
