/* ========================================
   Base Styles
======================================== */
html {
    scroll-behavior: smooth;
    min-height: 100%;
  }
  
  body {
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/heros-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: filter 0.3s ease-in-out;
    z-index: -1; /* Ensures background stays behind everything */
  }
  
  .background-blur::before {
    filter: blur(10px);
  }
  
  
  /* ========================================
     Navigation
  ======================================== */
  .navbar-burger span {
    background-color: white !important; /* Makes the hamburger lines white */
  }
  
  .navbar-brand img {
    filter: invert(1);
  }
  
  
  /* ========================================
     Layout & Components
  ======================================== */
  .card {
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
  
  .media-left {
    display: flex;
    align-items: center;
  }
  
  .section, .box {
    overflow: visible;
  }
  
  #main-logo {
    transition: transform 0.3s ease-in-out;
    filter: invert(75%);
  }
  
  #main-logo:hover {
    transform: scale(1.2); /* Increases the size by 20% */
  }
  
  #textContent {
    margin: 0.5% auto;
    max-width: 90%;
  }
  
  .menu {
    margin-right: 80% auto;
    max-width: 20%;
  }
  
  
  /* ========================================
     Animations
     Source: Animista.net - FreeBSD License
  ======================================== */
  
  /* --- Animation: text-pop-up-top --- */
  /* Generated by Animista on 2025-3-30 22:23:24 */
  @-webkit-keyframes text-pop-up-top {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: none;
    }
    100% {
      -webkit-transform: translateY(-50px);
              transform: translateY(-50px);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow:   0 1px 0 #333333, 
                     0 2px 0 #555555, 
                     0 3px 0 #444444, 
                     0 4px 0 #333333, 
                     0 5px 0 #222222, 
                     0 6px 0 #222222, 
                     0 7px 0 #585858, 
                     0 8px 0 #000000, 
                     0 9px 0 #000000, 
                     0 50px 30px rgba(0, 0, 0, 0.7);
    }
  }
  
  @keyframes text-pop-up-top {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: none;
    }
    100% {
      -webkit-transform: translateY(-50px);
              transform: translateY(-50px);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow:   0 1px 0 #333333, 
                     0 2px 0 #555555, 
                     0 3px 0 #444444, 
                     0 4px 0 #333333, 
                     0 5px 0 #222222, 
                     0 6px 0 #222222, 
                     0 7px 0 #585858, 
                     0 8px 0 #000000, 
                     0 9px 0 #000000, 
                     0 50px 30px rgba(0, 0, 0, 0.7);
    }
  }
  
  
  /* --- Animation: puff-in-center --- */
  /* Generated by Animista on 2025-4-1 10:5:17 */
  @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
  
  /* ========================================
     Animation Usage
  ======================================== */
  #titleHeaderBox {
    margin-left: 2.5%;
    animation: text-pop-up-top 3s ease-out forwards;
    -webkit-animation: text-pop-up-top 3s ease-out forwards;
    -webkit-animation: puff-in-center 2.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: puff-in-center 2.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  }
  

    /* ========================================
     Mobile Alterations
  ======================================== */
  @media (max-width: 768px) {
    body::before {
      background-attachment: scroll !important;
      position: absolute !important;
    }
  }