/* Ensure the video section spans the full width */
.video-section {
    width: 100%;
    padding: 0;
    margin-top: 0; /* Ensure no extra space between navbar and video */
}

/* Center the logo in the navbar and set max-height */
.navbar-brand img {
    max-height: 150px; /* As previously set */
    width: auto; /* Maintain aspect ratio */
}

/* Ensure the video is responsive */
.video-section iframe {
    width: 100%;
    height: 75vh; /* As previously set */
}

/* Style the navbar-nav container */
.navbar-nav {
    display: flex;
    flex-direction: column; /* Stack the filler and links vertically */
    height: 100%; /* Take the full height of the navbar */
}

/* Filler div to push the links down */
.nav-filler {
    flex-grow: 1; /* Take up available space to push links down */
    min-height: 80px; /* Adjust this value to control how far down the links are pushed */
}

/* Fine-tune the nav items */
.nav-item {
    padding-bottom: 5px; /* Minimal padding for fine-tuning */
}

/* Ensure the navbar itself has enough height and no extra space above */
.navbar {
    min-height: 160px; /* Slightly more than the logo height */
    padding-top: 5px; /* Reduced top padding */
    padding-bottom: 5px; /* Reduced bottom padding */
    top: 0; /* Ensure the navbar sticks to the top of the page */
    margin: 0; /* Remove any default margin */
}

/* Remove any default body margin to ensure the navbar is flush at the top */
body {
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
}

/* Optional: Adjust for mobile view */
@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 100px; /* Smaller logo on mobile */
    }
    .navbar {
        min-height: 110px; /* Adjust navbar height for mobile */
    }
    .nav-filler {
        min-height: 40px; /* Smaller filler on mobile to avoid excessive spacing */
    }
    .nav-item {
        padding-bottom: 3px; /* Even less padding on mobile */
    }
}

/* Below is the code styling for the hovering donation anchor*/
.donation-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000; /* Ensures it stays above other content */
}

.donation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #ffffff;   color: white;
  border-radius: 50%; /* Circular button */
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background-color 0.3s ease;
  animation: pulse 2s infinite; /* Subtle pulse effect */
}

.donation-icon:hover {
  background-color: #e6e6e6; /* Darker shade on hover */
  transform: scale(1.1); /* Slight zoom on hover */
}

/* Style the image specifically */
.donation-icon .icon {
  max-width: 100%; /* Ensure it doesn’t exceed the container */
  max-height: 100%; /* Ensure it doesn’t exceed the container */
  width: auto; /* Allow natural scaling within constraints */
  height: auto; /* Allow natural scaling within constraints */
  object-fit: contain; /* Maintain aspect ratio and fit within the container */
}

/* Tooltip styling */
.donation-icon .tooltip {
  visibility: hidden;
  background-color: #333;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  right: 70px; /* Position to the left of the button */
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.donation-icon:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Pulse animation for attention */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .donation-button {
    bottom: 10px;
    right: 10px;
  }
  .donation-icon {
    width: 50px;
    height: 50px;
  }
  .donation-icon .icon {
    font-size: 20px; /* Adjust if using text icons, but irrelevant for images */
  }
  .donation-icon .tooltip {
    font-size: 12px;
    right: 60px;
  }
}