.overlay-text {
    align-items: center;
    color: #080e00;
    display: block;
    flex-direction: column;
    font-family: Open Sans;
    font-size: clamp(1.5rem,4vw,3rem);
    font-weight: 900;
    height: 100%;
    justify-content: center;
    left: 0;
    line-height: 1;
    max-width: 40%!important;
    min-width: 550px;
    padding: 5%;
    position: relative;
    text-transform: uppercase;
    text-wrap: balance;
    top: 0;
    z-index: 10;
    text-shadow: 0px 0px 30px #0000004f;
}

/* Gradient background that covers the left side area */
.overlay-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #fff 0%, #fff 60%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0.4) 90%, transparent 100%);
    z-index: -1;
}

/* Support for center and right alignment */
.overlay-text[style*="text-align: center"] {
    left: 50%;
    transform: translateX(-50%);
}

.overlay-text[style*="text-align: right"] {
    left: auto;
    right: clamp(5%, 2vw + 8%, 10%);
}

.text-is-bold {
    font-size: clamp(2.5rem, 6vw, 4rem); 
    font-weight: 100; 
    color: #789b49; 
    text-wrap: balance;
}

.hero-particles-container {
    background: transparent;
    border-top: 2px solid #799e4b;
    box-shadow: inset -1px -1px 5px #000;
    /* height: 70vh; */
    height:auto;
    overflow: hidden;
    position: relative;
}

.dnd_area-row-0-background-layers {
    background-attachment: fixed;
}

/* Fix for Safari iOS - background-attachment: fixed is not properly supported */
@supports (-webkit-touch-callout: none) {
    .dnd_area-row-0-background-layers {
        background-attachment: scroll !important;
    }
}

/* Make SVG responsive to height changes */
#particle-svg {
    width: 100%;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Ensure particles maintain square aspect ratio */
#particles rect {
    aspect-ratio: 1;
}



@media (max-width: 992px) {
    .hero-particles-container {
        height: 50vh;
    }
}

@media (max-width: 768px) {
    .hero-particles-container {

        height: 50vh;
        position: relative;
    }

    .overlay-text {
        color: #080e00;
        font-family: Open Sans;
        font-size: clamp(1.5rem,6vw,4rem);
        font-weight: 900;
        line-height: 1;
        max-width: 60% !important;
        min-width: 300px;
        position: absolute;
        text-transform: uppercase;
        text-wrap: balance;
        padding: 3%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Adjust gradient for mobile */
    .overlay-text::before {
        background: linear-gradient(90deg, #fff 0%, #fff 75%, rgba(255,255,255,0.9) 90%, transparent 100%);
    }

    /* Adjust alignment for mobile */
    .overlay-text[style*="text-align: center"] {
        left: 50%;
        transform: translateX(-50%);
    }

    .overlay-text[style*="text-align: right"] {
        left: auto;
        right: clamp(5%, 2vw + 8%, 10%);
        transform: none;
    }

    .text-is-bold {
        color: #789b49;
        font-size: clamp(2.5rem,8vw,5rem);
        font-weight: 100;
        text-wrap: balance;
        word-break: keep-all !important;
    }
}

@media (max-width: 666px) {
    .overlay-text {
        font-size: clamp(1.5rem,8vw,4rem);
        max-width: 400px!important;
    }

    .text-is-bold {
        font-size: clamp(2.5rem,10vw,5rem);
    }

    .hero-particles-container {

    }
}

@media (max-width: 992px) {
    .overlay-text {
     
        max-width: 80% !important;
        min-width: 250px;
        padding: 2%;
        height: auto;
        top: 0;
        left: 0;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    
    .overlay-text {
        font-size: 15px;
        max-width: 100% !important;
        min-width: unset;
        position: absolute;
        text-align: center;
        padding: 4%;
      
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Adjust gradient for very small screens - full coverage */
    .overlay-text::before {
        background: linear-gradient(90deg, #fff 0%, #fff 100%);
    }

    /* Override alignment for very small screens */
    .overlay-text[style*="text-align: center"],
    .overlay-text[style*="text-align: right"],
    .overlay-text[style*="text-align: left"] {
        left: 0;
        right: 0;
        transform: none;
        text-align: center !important;
    }

    .text-is-bold {
        font-size: 25px;
        line-height: 1.2;
    }

    .hero-particles-container {
        background: transparent;
    }
}