/* ===== HERO BANNER ===== */
.hero-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-logo {
    position: absolute;
    top: 120px;
    left: 6rem;
    transform: translateY(-50%);
    z-index: 50;                      
    width: min(200px, 20vw);
    pointer-events: none;
    opacity: 1;                      
}

.hero-logo img {
    width: 100%;
    height: auto;
    display: block;
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    /* filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.5)); */
    opacity: 1;                       /* force visible */
}

.section-heading{
  font-size: clamp(1rem, 5vw, 5rem);
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.1em;
  margin-right: -0.5em;
  color: white;
  width: 90vw;
  max-width: 1200px;
}

.cnt-btn{
	position: absolute;
    bottom: 100px;
    right: 6rem;
    z-index: 50;                      
    opacity: 1; 
}



.banner-container {
  position: relative;
  overflow: hidden;
  height: 90vh; /* Set the height for the banner */
  width: 100%;
  z-index:-1;
}

.banner_section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.banner_section .outer,
.banner_section .inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.banner_section .bg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.banner_section .bg .support_h2 {
  z-index: 2;
  color: white;
  font-size: 2rem; /* Adjust as needed */
}

.first .bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%), url('/images/hero1.jpeg');
}

.second .bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%), url('/images/hero2b.jpg');
}

.third .bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%), url('/images/hero3b.jpg');
}

.fourth .bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%), url('/images/hero4b.jpg');
}

.fifth .bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%), url('/images/hero5b.jpeg');
  background-position: 50% 45%;
}




@keyframes slide {
  0%, 33.33% { opacity: 0; visibility: hidden; }
  33.33%, 66.66% { opacity: 1; visibility: visible; }
  66.66%, 100% { opacity: 0; visibility: hidden; }
}

.main-content {
  margin-top: 220px; /* Add space for the banner */
}



.support_h2 * {
  will-change: transform;
}

.support_logo{
	position:fixed;
	top:100px;
	left:100px;
	width:200px;
	z-index:10;
}



/* On small screens, move logo to top‑left or reduce size */
@media (max-width: 768px) {
    .hero-logo {
        top: 5%;
        left: 5%;
        transform: translateY(0);
        width: 120px;
    }
}