.carousel-item img {
  height: 60vh;
  object-fit: cover;
}

.hero-overlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.floating-apply-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background-color: #eab308;
  color: black;
  border-radius: 0;
  padding: 15px 20px;
}

.du-box {
  background-color: #4b2875;
}

.du-boxhead {
  background-color: rgba(75, 40, 117, 0.60);
}

.du-boxheadsolid {
  background-color: rgb(127,106,152);
}

/* This creates the blinking animation */

@keyframes pulseBlink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.smooth-apply-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background-color: rgba(218, 165, 32, 0.85);
  color: #000;
  border: none;
  padding: 15px 20px;
  max-width: 140px;
  white-space: normal;
  text-align: center;
  font-weight: bold;
  animation: pulseBlink 2s infinite;
}

.ticker-window {
  height: 250px;
  overflow: hidden;
  position: relative;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.ticker-track {
  position: absolute;
  width: calc(100% - 30px);
  animation: scrollUp 15s linear infinite;
}

.ticker-window:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes scrollUp {
  0% {
    top: 100%;
  }
  100% {
    top: -150%;
  }
}

.edu-card {
  background-color: #4b2875;
  padding: 30px;
  margin-top: 50px;
  color: white;
}

.edu-card-Team {
  background-color: #4b2875;
  padding: 10px;
  margin-top: 10px;
  color: white;
  border-radius: 30px;
}

.overlapTeam-img {
  position: relative;
  top: 0px;
  left: 0px;
  width: auto;
  height: 150px;
  object-fit: cover;
  box-shadow: 5px 5px 15px rgba(0,0,0,1);
  border-radius: 30px;
}

.overlap-img {
  position: relative;
  top: -50px;
  left: -45px;
  width: calc(100% + 60px);
  height: 220px;
  object-fit: cover;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

.edu-card ul {
  list-style: none;
  padding-left: 0;
}

.edu-card li {
  margin-bottom: 10px;
}

.edu-card a {
  color: #fff;
  text-decoration: none;
}

.edu-card a:hover {
  text-decoration: underline;
}

.css-globe {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-image: url('../../assets/img/Others/worldLow.svg');
  background-size: 600px 300px;
  box-shadow: inset -30px -30px 50px rgba(0, 0, 0, 0.7), inset 10px 10px 30px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
  animation: spinEarth 15s linear infinite;
}

@keyframes spinEarth {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 600px 0;
  }
}

/* Optional: Make it responsive for mobile phones */

@media (max-width: 576px) {
  .css-globe {
    width: 200px;
    height: 200px;
    background-size: 400px 200px;
  }
}

@keyframes spinEarth {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}

#map-dropdown {
}

body::before {
  content: "" !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 700px !important;
  height: 700px !important;
  background-image: url('../../assets/img/Others/Delhi_University.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 0.1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 1. Tell all searchable items to animate smoothly over 0.4 seconds */

.searchable-item {
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease !important;
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}

/* 2. The class we will apply when an item DOES NOT match the search */

.blur-hide {
  opacity: 0 !important;
  filter: blur(10px) !important;
  transform: scale(0.9) !important;
  pointer-events: none !important;
}