html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    body {
        min-height: 100vh;
        position: relative;
        overflow: hidden;
    }

        body::before {
      content: '';
      position: fixed;
      top: 0; 
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../images/indexBG.jpg') no-repeat center center fixed;
      background-size: cover;
      filter: blur(1.5px);
      transform: scale(1.1);  
      mask: linear-gradient(
          90deg,
          rgba(0,0,0,0.1) 0%,
          rgba(0,0,0,0.2) 20%,
          rgba(0,0,0,0.3) 30%,
          rgba(0,0,0,0.4) 40%,
          rgba(0,0,0,1) 70%
      );
      z-index: -2;
  }

        body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      background: linear-gradient(
         90deg,
            rgba(0,0,0,0.1) 0%,
            rgba(0,0,0,0.05) 30%,
            rgba(0,0,0,0.02) 60%,
            rgba(0,0,0,0.005) 85%,
            rgba(0,0,0,0) 100%
            );
            z-index: -1;
    }
    .hero-section {
        min-height: calc(100vh - 120px);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-content {
        width: 60vw;
        max-width: 900px;
        margin: 0 400px 0 0;
        text-align: left;
    }
    
    .footer {
       margin: 0;
      }

    @media (max-width: 900px) {
        .hero-content {
        width: 90vw;
        margin: 0;
        }
        .hero-content h1 {
        font-size: 2.6rem !important;
        }
    }

    .w3-container h1,
    .w3-container h6,
    .w3-container p {
        text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    }