.wave-bottom-animation  {
    position: relative;
    overflow: hidden;
}

.wave-bottom-animation::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 200px;

    background-image: url("https://saarimpact.synnnc.com/wp-content/uploads/2026/08/wave-ocean.svg");
    background-repeat: repeat-x;
    background-position: bottom left;
    background-size: auto 60px;

    animation: wave 16s cubic-bezier(.36, .45, .63, .53) infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes wave {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -1000px;
    }
}


.floating-icon {
    position: relative;
    border-radius: 50%;
}

.floating-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.25px;
    background: linear-gradient(135deg, #EFBE1B 0%, #F05924 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@media (max-width: 767px) {
    .floating-icon {
        width: 80px !important; 
        height: 80px !important;
        padding: 10px ;
        box-sizing: border-box ;
        border-radius: 50% ;
		flex-shrink: 0 !important;
    }
}


/* .top-wave-animation {
    position: relative !important ;
    overflow: hidden ;
}

.top-wave-animation::before {
    content: '' !important ;
    position: absolute !important ;
    top: 0;
    left: 0;

    width: 100% ;
    height: 60px ;

    background: url("https://saarimpact.synnnc.com/wp-content/uploads/2026/08/wave-ocean-1-1.svg") repeat-x 0 0 / auto 60px !important;

    z-index: 999 !important ;
    pointer-events: none ;

    animation: topWaveAnimation 8s linear infinite ;
}

@keyframes topWaveAnimation {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: -1000px;
    }
} */



.hero-main {
    position: relative ;
    overflow-x: clip !important;
    overflow-y: visible !important;
}

.hero-main::before {
    content: "" !important;
    position: absolute ;

    width: 825px !important;
    height: 900px !important;

    top: 20px !important;
    right: calc((100% - 1170px) / 2 - 177px) ;
    left: auto !important;

    background-image: url("https://saarimpact.synnnc.com/wp-content/uploads/2026/08/orange-shade-banner.png") ;
    background-repeat: no-repeat ;
    background-size: contain;
    background-position: center ;

    display: block ;
    opacity: 1 ;

    z-index: 0 ;
    
}

.hero-main > * {
    position: relative ;
    z-index: 1 ;
}



@media (min-width: 767px) and (max-width: 1024px) {
    .hero-main::before {
        width: 620px !important;
        height: 620px !important;

        top: 80px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
    }
}

@media (min-width: 530px) and (max-width: 766px) {
    .hero-main::before {
        width: 600px !important;
        height: 600px !important;
        top: 70px !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;
    }
}

@media (min-width: 401px) and (max-width: 529px) {
    .hero-main::before {
        width: 470px !important;
        height: 600px !important;
        top: 70px !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;
    }
}

@media (min-width: 349px) and (max-width: 400px) {
    .hero-main::before {
        width: 300px !important;
        height: 380px !important;
        top: 70px !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;
    }
}

@media (min-width: 300px) and (max-width: 348px) {
    .hero-main::before {
        width: 300px !important;
        height: 380px !important;
        top: 70px !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;
    }
}