/* ========================================
   Base Styles
======================================== */
html {
    scroll-behavior: smooth;
  }
  
  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/home-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);
  }
  
  
  /* ========================================
     Typography
  ======================================== */
  .subtitile {
    filter: invert(25%) !important;
  }
  
  /* #quote {
    font-family: 'Brush Script MT', cursive !important; font-size: 30px !important;
    font-family: ;
    font-size: 30px !important;
    color: #6600c5 !important;
  }
   */
  
#quoteImage {
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 2%;
}

  /* ========================================
     Layout & Components
  ======================================== */
  .media-left {
    display: flex;
    align-items: center;
  }
  
  .section, .box {
    overflow: visible;
  }
  
  .message {
    transition: transform 0.3s ease-in-out !important;
  }
  
  .message:hover {
    transform: scale(1.05) !important;
    transform-origin: center;
  }
  
  .menu {
    margin-right: 80% auto;
    max-width: 20%;
  }
  
  
  /* ========================================
     Logo Effects
  ======================================== */
  #main-logo {
    filter: invert(75%) !important;
    transition: transform 0.3s ease-in-out;
  }
  
  #main-logo:hover {
    transform: scale(1.2); /* Increases the size by 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 Usage
  ======================================== */
  #titleHeaderBox {
    animation: text-pop-up-top 3s ease-out forwards;
    -webkit-animation: text-pop-up-top 3s ease-out forwards;
  }
  

  /* ========================================
     Mobile Alterations
  ======================================== */
  @media (max-width: 768px) {
    body::before {
      background-attachment: scroll !important;
      position: absolute !important;
    }
    #quoteImage {
      margin-top: 5% !important;
      margin-right: 5% !important;
      margin-left: 5% !important;
    }
  }