footer
{
  width:100%;
}



.bg-homehead1 {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

  .bg-homehead1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/home_bg1.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: blur(10px) grayscale(80%); /* Initial blur effect */
    transform: scale(1); /* Start at normal scale */
    animation: loopBackground 6s ease-in-out infinite; /* Looping animation */
    z-index: 1;
  }

  .bg-homehead1 > * {
    position: relative;
    z-index: 2;
  }

/* Keyframes for the looping animation */
@keyframes loopBackground {
  0%, 100% {
    transform: scale(1); /* Normal scale at start and end */
    filter: blur(10px) grayscale(80%); /* Start and end with blur/grayscale */
  }

  50% {
    transform: scale(1.01); /* Slightly scaled up */
    filter: blur(6px) grayscale(60%); /* Clear and color halfway through */
  }
}


/* Your EXISTING Main Class (Keep this for the Home Page) */
.draco-topicon {
  margin: 0 auto 0 auto;
  height: 256px;
  width: 256px;
  background-image: url('../img/dracoheart.png');
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center;
  background-attachment: fixed; /* This creates the cool effect on home, but breaks navbar */
  filter: blur(0px) grayscale(0%);
  transform: scale(1);
  animation: looptopicon 4s ease-in-out infinite;
}

/* Add this specifically for the Navbar version */
.mud-toolbar .draco-topicon {
  width: 30px;                 /* Force small size */
  height: 30px;                /* Force small size */
  background-size: contain;    /* Fit the whole dragon in the small box */
  background-attachment: scroll; /* REQUIRED: Disables the "fixed" wall-paper effect */
  margin: 0;                   /* Remove centering margins */
}

.mud-toolbar:hover .draco-topicon, .draco-topicon:hover {
    animation:3s none ;

  }

@keyframes looptopicon {
  0%, 100% {
    transform: scale(1);
    filter: blur(0.5px) grayscale(20%);
  }

  50% {
    transform: scale(1.1);
    filter: blur(0px) grayscale(0%);
  }
}





.head-text {
  font-size: 80px;
}

.btn-icon i {
  margin-right: 8px;
}

.social-icons a {
  color: #fff;
  margin: 0 10px;
  font-size: 24px;
  text-decoration: none;
  position: relative; /* Enable absolute positioning of the span */
}

  .social-icons a span {
    display: none;
    position: absolute; /* Position it absolutely within the anchor */
    left: 0; /* Align it to the left of the anchor */
    top: 100%; /* Move it below the anchor */
    white-space: nowrap; /* Prevent wrapping */
    background-color: rgba(0, 0, 0, 0.8); /* Background color for better visibility */
    color: #fff; /* Text color */
    padding: 5px 10px; /* Padding for better appearance */
    border-radius: 5px; /* Rounded corners */
    margin-top: 5px; /* Space between the link and the text */
    z-index: 100; /* Ensure it is above other elements */
  }

  .social-icons a:hover {
    color: #00aced; /* Change this to the color you prefer on hover */
  }

    .social-icons a:hover span {
      display: block;
    }




/* Styling for section headings */
.section-heading {
  font-size: 1.75rem; /* Increase font size */
  font-weight: bold; /* Make the font bold */
  color: white; /* Add a custom color (Bootstrap info color as an example) */
  text-transform: uppercase; /* Make text uppercase */
  letter-spacing: 1px; /* Add a bit of spacing between letters */
  border-bottom: 3px solid #6f6f6f; /* Add a colored underline */
  padding-bottom: 5px; /* Space between text and underline */
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center; /* Center-align the heading */
}



.mud-button .bi {
    vertical-align: 0 !important; /* Removes the default Bootstrap 'sag' */
    line-height: 1;               /* Ensures the icon height matches the text */
}





/* --- Draco Reveal Animation System --- */

/* Base settings for all animations */
.draco-reveal {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* 1. From Bottom (Default) - Pushed down */
.draco-reveal-bottom {
    transform: translateY(50px);
}

/* 2. From Top - Pulled up */
.draco-reveal-top {
    transform: translateY(-50px);
}

/* 3. From Left - Pushed left */
.draco-reveal-left {
    transform: translateX(-50px);
}

/* 4. From Right - Pushed right */
.draco-reveal-right {
    transform: translateX(50px);
}

/* --- The "Visible" State --- */
/* This overrides the positions above and brings element to center */
.draco-reveal-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}




.draco-mud-icon-xlarge
{
   font-size: 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
}

.draco-mud-icon-xxlarge
{
   font-size: 6rem !important;
    width: 6rem !important;
    height: 6rem !important;
}