html, body {
	  height: 100%;
	  margin: 0;
      overflow: hidden;
	}

	.card {
       z-index: 9999; /* Ensure it stays on top */
		
	}	

	.full-height {
	  height: 100%;
	  background: black;
	}
	
	.imgcontainer {
	  position: relative;
	  width: 100%;
	  max-width: 100%;
	}

	.image {
	  display: block;
	  width: 100%;
	}

	.bottom-left {
	  position: absolute;
	  bottom: 2px;
	  left: 0px;
	  right: 0px;
	  background: rgb(0, 0, 0);
	  background: rgba(0, 0, 0, 0.5); /* Black see-through */
	  color: #f1f1f1; 
	  padding: 10px;
	}

	.centered {
	  position: absolute; /* Position the background text */
	  width: 100%; /* Full width */
	  height: 50%; 
	  top: 35%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  text-align: left;
	  color: #f1f1f1; /* Grey text */
	  padding-left: 40px; /* Some padding */	  
	  padding-right: 40px; /* Some padding */	  
	}
	
        /* Banner Styles */
        .banner-container {
            position: fixed; /* Keep it on top */
            top: 0;
            left: 0;
            width: 74.5%;
            height: 150px;
            background: rgba(64, 64, 64, 0.8); /* Dark grey with transparency */
            color: white;
            font-size: 40px;
            font-weight: bold;
            display: flex;
            align-items: center;
            overflow: hidden;
            z-index: 6000; /* Ensure it stays on top */
        }

        /* Marquee Effect */
        .banner-text {
            white-space: nowrap;
            animation: marquee 10s linear infinite;
        }

        @keyframes marquee {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }