.section-divider {
  display: block;
  width: 75%; /* Sets the width of the line to 75% of the parent */
  height: 1px; /* The thickness of the line */
  background-color: rgba(255, 255, 255, 0.1); /* Light color */
  margin: 30px auto; /* Centers the line and adds vertical space */
}
.logo {
  width: 100px; /* Set the width of the logo */
  height: 100px; /* Set the height of the logo to be equal to width */
  border-radius: 50%; /* Makes the logo round */
  object-fit: cover; /* Ensures the image covers the area without distortion */
}
/* Optional: Content Styling */
header {
  position: relative;
  z-index: 10; /* Ensures the header stays on top of the smoke */
  
}
    #tooltip {
      visibility: hidden;
      position: fixed; /* Fix position relative to the viewport */
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 5px;
      border-radius: 4px;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1000; /* Ensure the tooltip is above other elements */
    }
/* Example of styling for buttons, headings, etc. */
.text-gold-primary {
  color: #d4af37;
}

.btn-gold {
  background: #d4af37;
  color: #1e1e1e;
  padding: 0.5rem 1rem;
  font-weight: 700;
  box-shadow: 0 0 15px #d4af37;
}

.btn-gold:hover {
  box-shadow: 0 0 25px #d4af37;
}

/* Background radial gradient for body */
.bg-gradient-radial {
  background-image: radial-gradient(circle at center, #292929 0%, #1e1e1e 80%);
}

/* Hero Fade Animation */
.hero-fade {
  animation: fadeInHero 2s ease-in-out forwards;
  opacity: 0;
}

@keyframes fadeInHero {
  to {
    opacity: 1;
  }
}

/* Ensure the background image behaves properly */
section {
  background-size: cover; /* Ensures the image covers the entire area */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  height: 100%; /* Ensures the section's height adapts properly */
}

/* Adjust the background image behavior on small screens */
@media (max-width: 640px) {
  section {
    background-size: contain; /* Ensures the whole image is visible without cropping */
    background-position: center center; /* Keeps the image centered */
  }

  h1 {
    font-size: 2.5rem; /* Adjust the font size for mobile */
  }

  p {
    font-size: 1rem; /* Adjust the font size for mobile */
  }

  .btn-gold {
    padding: 12px 20px; /* Adjust button padding for mobile */
  }
}