.hero-section {
  position: relative;
  z-index: 1; /* content above background */
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* semi-transparent dark overlay */
  z-index: -1; /* place behind the content */
}

.hero-section .container {
  position: relative;
  z-index: 2; /* ensure text stays above overlay */
}

.hero-section {
    position: relative; /* For overlay positioning */
    background: linear-gradient(to top, rgba(255, 165, 0, 0.5), rgba(255, 255, 255, 0.1)),
                url('../images/hero-bg.png') center/cover no-repeat;
    min-height: 100vh;
    padding-top: 100px;
    color: white;
    text-shadow: 2px 2px 0 black;
    overflow: hidden; /* Hide overflow of moving storm */
}

/* Sandstorm overlay */
.sandstorm {
    position: absolute;
    top: 0; 
    left: 0;
    width: 200%; /* Double width for smooth loop */
    height: 100%;
    background: url('../images/storm.png') repeat-x; /* Transparent PNG */
    background-size: contain; /* Keep dust scale */
    opacity: 0.55; /* Adjust visibility */
    animation: stormMove 20s linear infinite; /* Smooth constant speed */
    z-index: 1; /* Behind text & characters */
}

/* Ensure content stays above storm */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Smooth horizontal infinite loop */
@keyframes stormMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Logo */
.hero-logo {
    max-width: 250px;
}

/* Character styles */
.character-side {
    max-width: 110%;
    height: 370px;
    filter: drop-shadow(3px 3px 0 black);
}

/* Animations */
.animate-left {
    animation: slideInLeft 1.2s ease-out both;
}

.animate-right {
    animation: slideInRight 1.2s ease-out both;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Text styles */
.hero-title {
    font-size: 2.5rem;
    color: #ffdd00;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    max-width: 800px;
    margin: auto;
    color: #fff;
}

/* Responsive tweaks */
@media (max-width: 767px) {
    .hero-title {
        font-size: 1.8rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .character-side {
        height: auto;
        max-height: 250px;
    }
}

@media (max-width:768px){
   .hero-section {
    position: relative; /* For overlay positioning */
    background: linear-gradient(to top, rgba(255, 165, 0, 0.5), rgba(255, 255, 255, 0.1)),
                url('../images/hero-mb-bg.png') center/cover no-repeat;
    min-height: 100vh;
    padding-top: 100px;
    color: white;
    text-shadow: 2px 2px 0 black;
    overflow: hidden; /* Hide overflow of moving storm */
}

.sandstorm {
    position: absolute;
    top: 0; 
    left: 0;
    width: 200%; /* Double width for smooth loop */
    height: 100%;
    background: url('../images/storm.png') repeat-x; /* Transparent PNG */
    background-size: contain; /* Keep dust scale */
    opacity: 0.55; /* Adjust visibility */
    animation: stormMove 20s linear infinite; /* Smooth constant speed */
    z-index: 1; /* Behind text & characters */
}
}