/* ========================================
   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/contact-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 & Sections
  ======================================== */
  .media-left {
    display: flex;
    align-items: center;
  }
  
  .section, .box {
    overflow: visible;
  }
  
  
  /* ========================================
     Components
  ======================================== */
  .message {
    transition: transform 0.3s ease-in-out !important;
  }
  
  .message:hover {
    transform: scale(1.05) !important;
    transform-origin: center;
  }
  
  #main-logo {
    transition: transform 0.3s ease-in-out;
  }
  
  #main-logo:hover {
    transform: scale(1.2); /* Increases the size by 20% */
  }
  
  
  /* ========================================
     Forms & Menus
  ======================================== */
  #submitForm {
    margin: 3% auto;
    max-width: 80%;
  }
  
  .menu {
    margin-right: 80% auto;
    max-width: 20%;
  }
  

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