.content {
    position: relative;
    z-index: 100; /* Ensures content is above the parallax layers */
    padding: 50px;
    background-color: rgba(255, 255, 255, 0.8); /* Optional background for contrast */
  }
  
  .banner-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .banner-info h1 {
    font-size: 3em;
    margin-right: 20px;
    position: relative;
    left: 100px;
    top: 220px;
    color: white;
  }
  
  .banner-info img {
    width: 300px;
    height: auto;
    border-radius: 10px; /* Optional styling */
    position: relative;
    right: 600px;
    top: 200px;
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body, html {
    height: 100%;
    overflow-x: hidden;
    background-color: rgb(5, 20, 5);
  }
  
  .parallax-container {
    position: relative;
    height: 3000px; /* Adjust based on the effect */
  }
  
  .parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
  }

 
  
  .layer1 { background-image: url('../img/pixil-layer-0.png'); z-index: 1;}
  .layer2 { background-image: url('../img/pixil-layer-1.png'); z-index: 2;}
  .layer3 { background-image: url('../img/pixil-layer-2.png'); z-index: 3;}
  .layer4 { background-image: url('../img/pixil-layer-3.png'); z-index: 4;} 
  .layer5 { background-image: url('../img/pixil-layer-4.png'); z-index: 5;} 
  .layer6 { background-image: url('../img/pixil-layer-5.png'); z-index: 6;} 
  .layer7 { background-image: url('../img/pixil-layer-6.png'); z-index: 7;} 
  .layer8 { background-image: url('../img/pixil-layer-7.png'); z-index: 8;} 
  .layer9 { background-image: url('../img/pixil-layer-8.png'); z-index: 9;} 
  .layer10 { background-image: url('../img/pixil-layer-9.png'); z-index: 10;} 
  .layer11 { background-image: url('../img/pixil-layer-10.png'); z-index: 11;} 
  .layer12 { background-image: url('../img/pixil-layer-11.png'); z-index: 12;} 
  .layer13 { background-image: url('../img/pixil-layer-12.png'); z-index: 13;} 
  .layer14 { background-image: url('../img/pixil-layer-13.png'); z-index: 14;} 
  .layer15 { background-image: url('../img/pixil-layer-14.png'); z-index: 15; opacity: 0.5;}

  .door-button{
    width: 100px;
    height: 140px;
    border-radius: 10px;
    background-image: url("../img/pixil-layer-door.png");
    background-size: cover;
    position: relative;
    bottom: 260px;
    left: 800px;
    z-index: 100;
  }

@media (min-width : 1028px) {
  .banner-info{
    flex-direction: column;
    position: relative;
    right: 10%;

  }

  .banner-info img{
    position: relative;
    left: 5%;
    margin: 50px;
  }

  a {
    position: relative;
    right: 12%;
    bottom: 21%;
  }

}


  /* Tablet screens (between 768px and 1024px) */
@media (max-width: 1024px) {
  .banner-info h1 {
    font-size: 2.5em;
  }

  .banner-info img {
    width: 250px;

  }
}

/* Mobile screens (less than 768px) */
@media (max-width: 768px) {

    body{
      background-color: rgb(52, 52, 121);
    }


  .banner-info {
    flex-direction: column; /* Stack text and image vertically */
    text-align: center;
    position: relative;
    right: 350px;
  }

  .banner-info h1 {
    font-size: 2em;
    margin: 0 0 10px 0;
    max-width: 10px;
    position: relative;
    left: 10px;
  }

  .banner-info img {
    width: 200px;
    position: relative;
    left: 100px;
    margin-top: 100px;
  }

  .parallax-container{
    position: relative;
    width: 200vw;
  }

  .parallax-layer {
    background-size: cover;
  }
}

/* Parallax Layer Styles */
.parallax-layer {
  background-size: cover;
  background-position: center;
}