:root {
    --verde_inchis: #027A5E;
    --verde: #319B42;
    --lime: #D6EF49;
    --galben: #FFC72C;
    --portocaliu: #F5983B;
}

.body {
    margin: 0;
    width: 100%;
}
.iban{
    font-weight: 450;
}
.header {
    background-color: var(--verde_inchis);
    display: flex;
    height: 9%;
}

.button_container {
    display: inline-flex;
    flex-flow: row;
    align-items: center;
    gap: 3%;
    color: white;
    font-family: bahnschrift;
    font-size: 1vw;
    margin-left: 40%;
    margin-right: 5%;
    justify-content: center;
    width: 50%;
}

.buttonLink {
    text-decoration: none;
    color: white;
}

.header_button {
    width: auto;
    height: auto;
    display: inline;
    text-wrap: nowrap;
    text-align: center;
}

.logo-header {
    height: 80%;
    width: auto;
    margin-left: 10%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
}

.herosection {
    height: 80%;
    width: 100%;
    background-color: var(--verde);
    display: flex;
position: relative;
overflow: hidden;
}
.HScontainer{
    height:100%;
    width: 100%;
    gap: 7.5%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.text {
width: auto;
    color: white;
    font-family: bahnschrift;
    width: 30%;
}

.title {
    font-size: 2.5vw;
    font-weight: 600;
}

.subtitle {
    font-size: 1.5vw;
    font-weight: 200;
}

.robot {
height:80%;}
.robot img{
    height: 100%;
    width: auto;
}

.bule #bula1 {
    position: absolute;
    bottom: 60%;
    right: 85%;
    height: 70%;}

.bule #bula2 {
    position: absolute;
    bottom: 62%;
    left: 85%;
    height: 50%;}

.bule #bula3 {
    position: absolute;
    bottom: -20%;
    left: -3%;
height: 50%;}

.bule #bula4 {
    position: absolute;
    bottom: -20%;
    right: -3%;
    height: 60%;}

.team {
    background-color: white;
    width: 100%;
    height: 90%;
    position: relative;

    overflow: hidden;
}
.teamContainer{
    height:100%;
    width: 100%;
    gap: 7.5%;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.team-text {
width: 38%;
    font-family: bahnschrift;
  
    z-index: 5;
}

.teamTitle {
    font-size: 2.5vw;
    color: var(--verde);
    font-weight: 900;
}

.mainBody {
    font-size: 1.2vw;
}

.videoContainer {
    z-index: 5;

    width: 20%;
    height: auto;
}

.videoTeam {
    width: 100%;
    height: auto;
    border-radius: 20px 20px 20px 20px;
    box-shadow: inset -10px -10px 10px 5px #000000;
    object-fit: cover;
}

.waves {
    position: absolute;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: auto;
    scale: 1;
}

.ftc {
    height: 70%;
    width: 100%;
    background-color: white;
    position: relative;
    overflow: hidden;
}
.ftcContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20%;
width: 100%;
height: 100%;
}
.ftcText {
    font-family: bahnschrift;
    height: 50%;
    width: 25%;

}

.ftcTitle {
    font-size: 2.5vw;
    color: var(--verde);
    font-weight: 900;
    margin-bottom: 5%;
}

.ftcBody {
    font-size: 1.2vw;
}

.ftcVideo {
    height: 50%;
    width: auto;

    border-radius: 25px 25px 25px 25px;
    box-shadow: inset -10px -10px 10px 5px #000000;
    object-fit: cover;
    
}

.footer {
    background-color: var(--verde_inchis);
    height: 35vh;
    width: 100%;
    position: relative;
    bottom: 0;
}

.logoFooter {
    
    position: absolute;
    margin-left: 10%;
    margin-top: 3%;
    margin-bottom: auto;
    margin-right: auto;
    z-index: 5;
    height: 38%;
}
.logoFooter img{
    height: 100%;
}

.wavesFooter {
    position: absolute;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: auto;
    scale: 1;
}

.infoFooter {
    height: 10%;
    position: absolute;
    bottom: 31%;
    margin-left: 9.7%;
    z-index: 5;
    font-family: bahnschrift;
    font-size: 1vw;
    color: white;
    width: 80%;
    gap: 0;
    font-weight: 100;
    font-size: 1vw;

}

.whiteFilter{
    filter: invert(100%) hue-rotate(180deg) brightness(200%);
}

.icons {
    z-index: 5;
    position: absolute;
    height: 50%;
    width: 20%;
    gap: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 43%;
    margin-bottom: auto;
    flex-wrap: wrap;
    top: 20%;

    #instagram {
        height: 6.5vh;
        position: relative;
        left: 2%;
    }

    #tiktok {
        height: 8vh;
    }

    #youtube {
        height: 8vh;
        position: relative;
        left: 2%;
        
    }

    #linktree {
        height: 6.5vh;
    }

    #linkedin {
        height: 8vh;
    }

    #facebook {
        height: 8vh;
    }
}



.pages {
    position: absolute;
    z-index: 9;
    color: white;
    font-family: bahnschrift;
    font-size: 1vw;
    margin-top: 4%;
    line-height: 1.75;
    margin-left: 80%;
    display: flexbox;
}

.carousel-container {
    width: 100%;
    height: 35vh;
    position: relative;
    overflow: hidden;
}

.arrow-up {
    position: absolute;
    top: 0;
    left: 45vw;
    background: none;
    border: none;
    z-index: 4;
}

.arrow-down {
    position: absolute;
    bottom: 0;
    left: 45vw;
    background: none;
    border: none;
    z-index: 4;
}

.arrow-down:hover {
    cursor: pointer;
    filter: brightness(1.2);
    transform: scale(1.2);
    transition: all 0.12s ease-in-out;
}

.arrow-up:hover {
    cursor: pointer;
    filter: brightness(1.2);
    transform: scale(1.2);
    transition: all 0.12s ease-in-out;
}

.imageContainer {
    position: absolute;
    right: 0;
    top: 0;
    width: 55vw;
    height: 35vh;
    z-index: 1;
    overflow: hidden;
}

.waveContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 45vw;
    height: 35vh;
    z-index: 3;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 70vw;
    height: 100%;
    opacity: 40%;
    z-index: 2;
    background-color: var(--verde);
}

.waveCar {

    height: 100%;
    position: absolute;

}

.textBlock {
    position: absolute;
    top: 0;
    margin: 5vh;
    width: 37vw;
    z-index: 3;
    color: white;
    font-family: bahnschrift;
    font-size: 1vw;
    line-height: 1.75;
    display: flexbox;
}

.carouselImage {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease-in-out;
}

@media screen and (max-width: 1008px) {
    .herosection{
        height:40vh ;
    }
    .robot{
    height: 80%;
    }
    .title{
        font-size: 4vw;
    }
    .subtitle{
        font-size: 3vw;
    }
    .text{
        width: 40%;
    }
    .header{
        height: 5%;
    }
    .button_container {
        font-size: 2vw;
        margin-left: 25%;
    }
    .team {
        background-color: white;
        width: 100%;
        height: 40%;
        position: relative;
    
        overflow: hidden;
    }
    .teamContainer{
        height:100%;
        width: 100%;
        gap: 7.5%;
        display: flex;
        justify-content: center;
        align-items: center;  
    }
    .team-text {
         width: 38%;
        font-family: bahnschrift;
      
        z-index: 5;
    }
    
    .teamTitle {
        font-size: 3vw;
        color: var(--verde);
        font-weight: 900;
    }
    
    .mainBody {
        font-size: 1.7vw;
    }
    
    .videoContainer {
        z-index: 5;
    
        width: auto;
        height: 80%;
    }
    
    .videoTeam {
        width:auto;
        height: 100%;
        border-radius: 20px 20px 20px 20px;
        box-shadow: inset -10px -10px 10px 5px #000000;
        object-fit: cover;
    }
    
    .waves {
        position: absolute;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: auto;
        scale: 1;
    }
    
    .ftc {
        height: 40%;
        width: 100%;
        background-color: white;
        position: relative;
        overflow: hidden;
    }
    .ftcContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10%;
    width: 100%;
    height: 100%;
    }
    .ftcText {
        font-family: bahnschrift;
        height: 50%;
        width: 30%;
    
    }
    
    .ftcTitle {
        font-size: 3vw;
        color: var(--verde);
        font-weight: 900;
        margin-bottom: 5%;
    }
    
    .ftcBody {
        font-size: 1.7vw;
    }
    
    .ftcVideo {
        height: 40%;
        width: auto;
    
        border-radius: 25px 25px 25px 25px;
        box-shadow: inset -10px -10px 10px 5px #000000;
        object-fit: cover;
        
    }
    
    .carousel-container {
        width: 100%;
        height: 18vh;
        position: relative;
        overflow: hidden;
    }
    .waveContainer{
        position: absolute;
        top: 0;
        left: 0;
        width: 52vw;
        height: 12vh;
        z-index: 3;
    }
    .waveCar{
        width: 100%;
        height: auto;
    }
    .imageContainer {
        position: absolute;
        right: 0;
        top: 0;
        width: 55vw;
        height: 12vh;
        z-index: 1;
        overflow: hidden;
    }
    .icons {
        z-index: 5;
        position: absolute;
        height: 50%;
        width: 30%;
        gap: 10%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 43%;
        margin-bottom: auto;
        flex-wrap: wrap;
        top: 20%;
    
        #instagram {
            height: 3.5vh;
            position: relative;
            left: 2%;
        }
    
        #tiktok {
            height: 4vh;
        }
    
        #youtube {
            height: 4vh;
            position: relative;
            left: 2%;
        }
    
        #linktree {
            height: 3.5vh;
        }
    
        #linkedin {
            height: 4vh;
        }
    
        #facebook {
            height: 4vh;
        }
    }
    .pages {
        position: absolute;
        z-index: 9;
        color: white;
        font-family: bahnschrift;
        font-size: 1.2vw;
        margin-top: 4%;
        line-height: 1.75;
        margin-left: 80%;
        display: flexbox;
    }
    .infoFooter {
        height: 10%;
        position: absolute;
        bottom: 40%;
        margin-left: 9.7%;
        z-index: 5;
        font-family: bahnschrift;
        color: white;
        width: 80%;
        gap: 0;
        font-weight: 100;
        font-size: 2vw;
    }
    .footer{
        height: 20vh;
    }
    .textBlock {
        position: absolute;
        top: 10%;
        margin: 5vh;
        margin-top: 0;
        margin-bottom: 0;
        width: 33vw;
        z-index: 3;
        color: white;
        font-family: bahnschrift;
        font-size: 2.5vw;
        line-height: 1.75;
        display: flexbox;
    }
    .carouselTitle{
        margin: 0;
    }
    .carouselParagraph{
        display: none;
    }
}
@media screen and (max-width: 640px) {
    .herosection{
        height:30vh ;
    }
    .robot{
    height: 70%;
    }
    .title{
        font-size: 4vw;
    }
    .subtitle{
        font-size: 3vw;
    }
    .text{
        width: 40%;
    }
    .header{
        height: 6vh;
    }
    .button_container {
        display:none;
    }
    .team {
        background-color: white;
        width: 100%;
        height: 40%;
        position: relative;
    
        overflow: hidden;
    }
    .teamContainer{
        height:100%;
        width: 100%;
        gap: 7.5%;
        display: flex;
        justify-content: center;
        align-items: center;  
    }
    .team-text {
         width: 38%;
        font-family: bahnschrift;
        z-index: 5;
    }
    
    .teamTitle {
        font-size: 4vw;
        color: var(--verde);
        font-weight: 900;
    }
    
    .mainBody {
        font-size: 2.2vw;
    }
    
    .videoContainer {
        z-index: 5;
    
        width: auto;
        height: 80%;
    }
    
    .videoTeam {
        width:auto;
        height: 100%;
        border-radius: 20px 20px 20px 20px;
        box-shadow: inset -10px -10px 10px 5px #000000;
        object-fit: cover;
    }
    
    .waves {
        position: absolute;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: auto;
        scale: 1;
    }
    
    .ftc {
        width: 100%;
        background-color: white;
        position: relative;
        overflow: hidden;
    }
    .ftcContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 10%;
        padding-top: 5%;
    width: 100%;
    height:100%;
    }
    .ftcText {
        font-family: bahnschrift;
        position:relative;
        right: 10vh;
    }
    
    .ftcTitle {
        font-size: 4vw;
        color: var(--verde);
        font-weight: 900;
        margin-bottom: 5%;
    }
    
    .ftcBody {
        font-size: 2.2vw;
        width: 60vw;
    }
    
    .ftcVideo {
        height:auto;
        width:80%;
    
        border-radius: 25px 25px 25px 25px;
        box-shadow: inset -10px -10px 10px 5px #000000;
        object-fit: cover;
        
    }
    
    .carousel-container {
        width: 100%;
        height: 6vh;
        position: relative;
        overflow: hidden;
    }
    .waveContainer{
        position: absolute;
        top: 0;
        left: 0;
        width: 52vw;
        height: 6vh;
        z-index: 3;
    }
    .waveCar{
        width: 100%;
        height: auto;
    }
    
.arrow-up {
    position: absolute;
    top: 0;
    left: 45vw;
    background: none;
    border: none;
    z-index: 4;
    height: 20%;
}
.arrow-up svg{
    height: 100%;
}

.arrow-down {
    position: absolute;
    bottom: 0;
    left: 45vw;
    background: none;
    border: none;
    z-index: 4;
    height: 20%;
}
.arrow-down svg{
    height: 100%;
}
    .imageContainer {
        position: absolute;
        right: 0;
        top: 0;
        width: 55vw;
        height: 12vh;
        z-index: 1;
        overflow: hidden;
    }
    .icons {
        z-index: 5;
        position: absolute;
        height: 50%;
        width: 30%;
        gap: 10%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 43%;
        margin-bottom: auto;
        flex-wrap: wrap;
        top: 20%;
    
        #instagram {
            height: 3.5vh;
            position: relative;
            left: 2%;
        }
    
        #tiktok {
            height: 4vh;
        }
    
        #youtube {
            height: 4vh;
            position: relative;
            left: 2%;
        }
    
        #linktree {
            height: 3.5vh;
        }
    
        #linkedin {
            height: 4vh;
        }
    
        #facebook {
            height: 4vh;
        }
    }
    .pages {
        position: absolute;
        z-index: 9;
        color: white;
        font-family: bahnschrift;
        font-size: 2.5vw;
        margin-top: 8%;
        line-height: 1.75;
        margin-left: 80%;
        display: flexbox;
    }
    .infoFooter {
        height: 10%;
        position: absolute;
        bottom: 40%;
        margin-left: 9.7%;
        z-index: 5;
        font-family: bahnschrift;
        color: white;
        width: 80%;
        gap: 0;
        font-weight: 100;
        font-size: 2vw;
    }
    .footer{
        position: relative;
        height: 20vh;
        bottom: 0;
    }
    .textBlock {
        position: absolute;
        top: 12%;
        margin: 5vh;
        margin-top: 0;
        margin-bottom: 0;
        width: 33vw;
        z-index: 3;
        color: white;
        font-family: bahnschrift;
        font-size: 2.5vw;
        line-height: 1.75;
        display: flexbox;
    }
    .carouselTitle{
        margin: 0;
    }
    .carouselParagraph{
        display: none;
    }
    .button_container{
        display: none;
    }
    .ftcBody{
        margin-bottom: 10vh;
    }
    .carousel-container {
        width: 100%;
        height: 8vh;
        position: relative;
        overflow: hidden;
        margin-bottom: 2vh;
    }

}
@media screen and (max-width: 490px) {
    .herosection{
        height:30vh ;
    }
    .robot{
    height: 70%;
    }
    .title{
        font-size: 4vw;
    }
    .subtitle{
        font-size: 3vw;
    }
    .text{
        width: 40%;
    }
    .header{
        height: 6vh;
    }
    .button_container {
        display:none;
    }
    .team {
        background-color: white;
        width: 100%;
        height: 40%;
        position: relative;
    
        overflow: hidden;
    }
    .teamContainer{
        height:100%;
        width: 100%;
        gap: 7.5%;
        display: flex;
        justify-content: center;
        align-items: center;  
    }
    .team-text {
         width: 38%;
        font-family: bahnschrift;
      
        z-index: 5;
    }
    
    .teamTitle {
        font-size: 4vw;
        color: var(--verde);
        font-weight: 900;
    }
    
    .mainBody {
        font-size: 2.2vw;
    }
    
    .videoContainer {
        z-index: 5;
    
        width: auto;
        height: 80%;
    }
    
    .videoTeam {
        width:auto;
        height: 100%;
        border-radius: 20px 20px 20px 20px;
        box-shadow: inset -10px -10px 10px 5px #000000;
        object-fit: cover;
    }
    
    .waves {
        position: absolute;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: auto;
        scale: 1;
    }
    
    .ftc {
        height: 40%;
        width: 100%;
        background-color: white;
        position: relative;
        overflow: hidden;
    }
    .ftcContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 10%;
        padding-top: 5%;
    width: 100%;
    height:100%;
    }
    .ftcText {
        font-family: bahnschrift;
        height: 50%;
        width: 80%;
        position:relative;
        left:0
    }
    
    .ftcTitle {
        font-size: 4vw;
        color: var(--verde);
        font-weight: 900;
        margin-bottom: 5%;
    }
    
    .ftcBody {
        font-size: 2.2vw;
        margin-bottom: 2vh;
    }
    
    .ftcVideo {
        height:auto;
        width:80%;
    
        border-radius: 25px 25px 25px 25px;
        box-shadow: inset -10px -10px 10px 5px #000000;
        object-fit: cover;
        
    }
    
    .carousel-container {
        width: 100%;
        height: 8vh;
        position: relative;
        overflow: hidden;
        margin-bottom: 2vh;
    }
    .waveContainer{
        position: absolute;
        top: 0;
        left: 0;
        width: 52vw;
        height: 6vh;
        z-index: 3;
    }
    .waveCar{
        width: 100%;
        height: auto;
    }
    
.arrow-up {
    position: absolute;
    top: 0;
    left: 45vw;
    background: none;
    border: none;
    z-index: 4;
    height: 20%;
}
.arrow-up svg{
    height: 100%;
}

.arrow-down {
    position: absolute;
    bottom: 0;
    left: 45vw;
    background: none;
    border: none;
    z-index: 4;
    height: 20%;
}
.arrow-down svg{
    height: 100%;
}
    .imageContainer {
        position: absolute;
        right: 0;
        top: 0;
        width: 55vw;
        height: 12vh;
        z-index: 1;
        overflow: hidden;
    }
    .icons {
        z-index: 5;
        position: absolute;
        height: 50%;
        width: 30%;
        gap: 10%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 43%;
        margin-bottom: auto;
        flex-wrap: wrap;
        top: 20%;
    
        #instagram {
            height: 3.5vh;
            position: relative;
            left: 2%;
        }
    
        #tiktok {
            height: 4vh;
        }
    
        #youtube {
            height: 4vh;
            position: relative;
            left: 2%;
        }
    
        #linktree {
            height: 3.5vh;
        }
    
        #linkedin {
            height: 4vh;
        }
    
        #facebook {
            height: 4vh;
        }
    }
    .pages {
        position: absolute;
        z-index: 9;
        color: white;
        font-family: bahnschrift;
        font-size: 2.5vw;
        margin-top: 8%;
        line-height: 1.75;
        margin-left: 80%;
        display: flexbox;
    }
    .infoFooter {
        height: 10%;
        position: absolute;
        bottom: 40%;
        margin-left: 9.7%;
        z-index: 5;
        font-family: bahnschrift;
        color: white;
        width: 80%;
        gap: 0;
        font-weight: 100;
        font-size: 2vw;
    }
    .footer{
        height: 20vh;
    }
    .textBlock {
        position: absolute;
        top: 12%;
        margin: 5vh;
        margin-top: 0;
        margin-bottom: 0;
        width: 33vw;
        z-index: 3;
        color: white;
        font-family: bahnschrift;
        font-size: 2.5vw;
        line-height: 1.75;
        display: flexbox;
    }
    .carouselTitle{
        margin: 0;
    }
    .carouselParagraph{
        display: none;
    }

}
@media screen and (max-width: 540px){
    .footer{
       margin-top: 4vh;
    }
}
@media screen and (max-height: 700px) {
    .ftc {
        height: 47vh;
        width: 100%;
        background-color: white;
        position: relative;
        overflow: hidden;
    }
    .ftcContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 10%;
        padding-top: 5%;
    width: 100%;
    height:100%;
    }
    .ftcText {
        font-family: bahnschrift;
        height: 50%;
        width: 80%;
        position:relative;
        left:0
    }
    
    .ftcTitle {
        font-size: 4vw;
        color: var(--verde);
        font-weight: 900;
        margin-bottom: 5%;
    }
    
    .ftcBody {
        font-size: 2.2vw;
        margin-bottom: 2vh;
    }
    
    .ftcVideo {
        height:auto;
        width:80%;
    
        border-radius: 25px 25px 25px 25px;
        box-shadow: inset -10px -10px 10px 5px #000000;
        object-fit: cover;
        
    }
    
}
@media screen and (max-height: 500px) {
    .ftc {
        height: 50vh;
        width: 100%;
        background-color: white;
        position: relative;
        overflow: hidden;
    }
    .ftcContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 10%;
        padding-top: 5%;
    width: 100%;
    height:100%;
    }
    .ftcText {
        font-family: bahnschrift;
        height: 50%;
        width: 80%;
        position:relative;
        left:0
    }
    
    .ftcTitle {
        font-size: 4vw;
        color: var(--verde);
        font-weight: 900;
        margin-bottom: 5%;
    }
    
    .ftcBody {
        font-size: 2.2vw;
        margin-bottom: 2vh;
    }
    
    .ftcVideo {
        height:auto;
        width:80%;
    
        border-radius: 25px 25px 25px 25px;
        box-shadow: inset -10px -10px 10px 5px #000000;
        object-fit: cover;
        
    }
    
}



/* DONATE TO US SECTION -- donate.css */

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Bahnschrift', sans-serif;
        }
        
       
        
        .donation-card {
            background: white;
            border-radius: 24px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        
        .donation-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
        
        .section-title {
            position: relative;
            display: inline-block;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 45%;
            background-color: rgba(214, 239, 73, 0.4);
            z-index: -1;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .section-title:hover:after {
            height: 55%;
        }
        
        .donation-option {
            transition: all 0.3s;
            background: white;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
        }
        
        .donation-option:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #027A5E, #319B42);
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .donation-option:hover:before {
            opacity: 1;
        }
        
        .donation-option:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
        }
        
        .donate-button {
            position: relative;
            overflow: hidden;
            z-index: 1;
            box-shadow: 0 4px 6px rgba(0,0,0,0.06);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        
        .donate-button:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0%;
            background: linear-gradient(90deg, #006a52, #027A5E);
            z-index: -1;
            border-radius: 16px;
            transition: height 0.3s;
        }
        
        .donate-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }
        
        .donate-button:hover:after {
            height: 100%;
        }
        
        .qr-placeholder {
            border-radius: 18px;
            position: relative;
            overflow: hidden;
        }
        
        .qr-placeholder:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #027A5E 0%, #319B42 50%, #d6ef4966 100%);
            opacity: 0.03;
        }
        
        .info-badge {
            transition: all 0.3s;
            border-radius: 12px;
        }
        
        .info-badge:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.06);
        }
        
        .feature-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            transition: all 0.3s;
        }
        
        .feature-icon i {
            transition: all 0.3s;
        }
        
        .feature:hover .feature-icon {
            transform: scale(1.1);
        }
        
        .feature:hover .feature-icon i {
            transform: scale(1.1);
        }
        
        .pattern-bg {
            background-image: 
                radial-gradient(circle at 1% 1%, rgba(214, 239, 73, 0.04) 0%, transparent 10%),
                radial-gradient(circle at 99% 99%, rgba(255, 199, 44, 0.04) 0%, transparent 10%);
        }
        
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.6s ease-out forwards;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }
        
        .animate-float {
            animation: float 4s ease-in-out infinite;
        }
        
        .delay-100 {
            animation-delay: 0.1s;
        }
        
        .delay-200 {
            animation-delay: 0.2s;
        }
        
        .delay-300 {
            animation-delay: 0.3s;
        }

        .donateToUsSection{
            display: flex;
            height: 85vh;
            position: relative; 
        }
        .downSec{
            position: relative;
            top: 10vh;
        }

        @media screen and (max-width: 1008px) {
            .donateToUsSection{
                height:125vh ;
            }
        }
        @media screen and (max-width: 768px) {
            .donateToUsSection{
                height:170vh ;
            }
        }
        @media screen and (max-height: 800px) {
            .donateToUsSection{
                height:225vh ;
            }
        }