html, body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	body {
		background-color: #343a40;/* grey */
		color: white; /* Optional: makes text readable on dark background */
	}
	.content { flex: 1; /* pushes footer down */ }
    .hero {
     /* background-color: #f8f9fa; */
      text-align: center;
      padding: 60px 20px;
    }
    .hero img {
      max-width: 100%;
      height: auto;
      margin-top: 20px;
    }
    footer {
      background-color: #343a40;
      color: white;
      padding: 20px 0;
      margin-top: auto;
    }
    homeFooter {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #222;
      color: white;
      padding: 15px;
      text-align: center;
    }

    .social-icons a {
      color: white;
      margin: 0 10px;
      font-size: 1.5rem;
    }
    
    .header-banner {

    }
    
	.navbar {
  position: relative;
  z-index: 1050; /* higher than banner overlay */
}
.card-img-overlay {
  z-index: 2; /* keep overlay behind navbar */
}


	/* .frontImage { */
		/* display: flex; */
		/* justify-content: center; */
		/* align-items: center; */
		/* height: 100vh; /* Full viewport height */ */
		/* width: 100%; */
		/* background-image: url('your-image.jpg'); /* Replace with your image path */ */
		/* background-size: cover; */
		/* background-position: center; */
		/* background-repeat: no-repeat; */
		/* text-align: center; */
		/* color: white; /* Optional: for overlay text */ */
		/* padding: 20px; */
		/* box-sizing: border-box; */
	/* } */
	
	.custom-size {
		width: 50%; /* Default for mobile */
		display:block;
		margin: 0 auto;
		border: 2px;
		border-radius: 50px;
		border-style: groove;
	}

	@media (min-width: 768px) {
		.custom-size {
			width: 40%; /* Smaller on tablets and up */
		}
	}


	@media (min-width: 1200px) {
		.custom-size {
			width: 30%; /* Even smaller on large desktops */
		}
	}

.banner-img { width: 100%; height: 300px; /* default height */ object-fit: cover; /* ensures the image fills without distortion */ } @media (min-width: 992px) { .banner-img { height: 500px; /* taller banner on larger screens */ }