.rain-small-screen {
        display: none;
    }

.rain-large-screen-header {
   	position: relative; /* Position relative to allow absolute children */
    display: flex;
    align-items: flex-start; /* Aligns content to the start vertically */
    justify-content: left; /* Aligns content to the left horizontally */
    height: 90vh; /* Full viewport height */
    color: white; /* Text color */
    padding: 50px; /* Padding around the text */
   /* background-size: cover;  Cover the entire section with the background image */
    background-position: bottom; /* Center the background image */
   background-size: cover;
  	background-repeat: no-repeat;
}

#rain-hero-text {
  	position: absolute;
  	bottom: 50px;
  	left: 50px;
    background-color: #ffffffA6; /* Semi-transparent black background */
    padding: 50px; /* Padding inside the text container */
    border-radius: 8px; /* Optional: rounded corners */
}

/* Large Screen Text */
.rain-h1 {
    margin: 0; /* Remove default margins */
    font-size: 2.5rem; /* Adjust as needed */
}

/* Button Style */
.rain-button {
    background-color: #fcc004; /* Button color */
    color: #333; /* Button text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Padding around button */
    cursor: pointer; /* Pointer cursor */
    font-size: 1rem; /* Button text size */
    border-radius: 5px; /* Rounded corners */
}

/* Button Hover Effect */
.rain-button:hover {
    background-color: #333; /* Button color */
    color: #fcc004; /* Darker blue on hover */
}

/* Media Queries for Mobile */
@media only screen and (max-width: 768px) {
    .rain-large-screen-header{
        display: none; /* Hide large screen hero section on mobile */
    }

    .rain-small-screen {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
        justify-content: center; /* Center content */
        padding: 20px; /* Padding for mobile */
    }

    .rain-small-screen img {
        width: 100%; /* Full width image */
        height: auto; /* Maintain aspect ratio */
    }

    #rain-hero-text-mobile {
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        padding: 20px; /* Padding inside the mobile text container */
        border-radius: 8px; /* Optional: rounded corners */
        text-align: center; /* Center text on mobile */
    }

    #hero-title-mobile {
        font-size: 1.5rem; /* Adjust mobile title size */
    }

    .rain-button-mobile {
        width: 100%; /* Full width button */
        margin-top: 10px; /* Space above button */
    }
}